Incorporate hover effects for sidebar

Author: wang3101

app/containers/SidebarContainer.tsx

@@ -7,16 +7,22 @@ import ContactSupportIcon from '@material-ui/icons/ContactSupport';
 import SettingsIcon from '@material-ui/icons/Settings';
 import '../stylesheets/SidebarContainer.css';
 
-const testIn = () => {
-  console.log('Hovering in sidebar');
-};
-const testOut = () => {
-  console.log('Hovering outside sidebar');
+// const [mini, setMini] = useState(false);
+let mini = true;
+const toggleSidebar = () => {
+  if (mini) {
+    console.log('Opening sidebar');
+    // document.getElementById('mySidebar').style.width = '250px';
+    mini = false;
+  } else {
+    console.log('Closing sidebar');
+    mini = true;
+  }
 };
 
 const SidebarContainer: React.FC = (): JSX.Element => (
-  <div className="sidebar-container" onMouseOver={testIn} onMouseOut={testOut}>
-    <div className="sidebar">
+  <div className="sidebar-container">
+    <div className="sidebar" id="mySidebar" onMouseOver={toggleSidebar} onMouseOut={toggleSidebar}>
       <img alt="Chronos Logo" id="serviceDashLogo" src={'../assets/icon2Cropped.png'} />
       <Link className="sidebar-link" to="/">
         <HomeSharpIcon style={{ boxShadow: 'none', width: '40px', height: '40px' }} />

app/stylesheets/SidebarContainer.css

@@ -1,8 +1,11 @@
 .sidebar-container {
   color: white;
   background-color: #24262f;
-  min-width: 200px;
-  transition: 0.3s;
+  min-width: 100px;
+  transition: 300ms;
+  overflow: hidden;
+  z-index: 10;
+  white-space: nowrap;
 }
 /* .material-icons,
 .icon-text {
@@ -12,14 +15,16 @@
   padding-bottom: 3px;
   margin-right: 30px;
 } */
-/* .sidebar-container:hover {
-  min-width: 400px;
-} */
+.sidebar-container:hover {
+  min-width: 200px;
+}
 .sidebar {
+  padding-left: 20px;
+  width: 250px;
   position: fixed;
   display: flex;
   flex-direction: column;
-  align-items: center;
+  align-items: left;
   justify-items: center;
   align-content: center;
 }
@@ -29,26 +34,27 @@
 }
 
 .sidebar-link {
+  overflow: hidden;
+  z-index: 1;
   margin: 5px 0;
   padding: 1px 5px;
   display: flex;
   align-items: center;
   justify-content: left;
   background-color: #24262f;
   height: 40px;
-  width: 150px;
-  /* width: 42px; */
+  width: 50px;
   border: thin solid rgb(79, 79, 85);
   border-radius: 3px;
   font-size: 125%;
   color: whitesmoke;
   text-decoration: none;
-  transition: 0.2s;
+  transition: 300ms;
   box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
 }
 
 .sidebar-link:hover {
   background-color: #494fee;
   color: azure;
-  /* width: 150px; */
+  width: 150px;
 }