Add icon resizing on hover in sidebar container

Author: wang3101

app/components/About.tsx

@@ -1,7 +1,7 @@
 import React from 'React';
 
 const About: React.FC = () => {
-  return <div>Hello this is the About</div>;
+  return <div className="home">Hello this is the About</div>;
 };
 
 export default About;

app/components/Contact.tsx

@@ -1,7 +1,7 @@
 import React from 'React';
 
 const Contact: React.FC = () => {
-  return <div>Hello this is the Contact</div>;
+  return <div className="home">Hello this is the Contact</div>;
 };
 
 export default Contact;

app/components/Home.tsx

@@ -7,7 +7,9 @@ const Home = () => (
   <div className="home">
     <img src={'../assets/pangolin.png'} alt="Chronos logo" />
     <h1 id="welcome">Welcome to Chronos!</h1>
-    <Link className="get-started-btn" to="/applications">Get Started</Link>
+    <Link className="get-started-btn" to="/applications">
+      Get Started
+    </Link>
   </div>
 );
 

app/components/Settings.tsx

@@ -1,7 +1,7 @@
 import React from 'React';
 
 const Settings: React.FC = () => {
-  return <div>Hello this is the Settings</div>;
+  return <div className="home">Hello this is the Settings</div>;
 };
 
 export default Settings;

app/containers/DashboardContainer.tsx

@@ -6,7 +6,7 @@ import HealthContextProvider from '../context/HealthContext';
 import CommsContextProvider from '../context/CommsContext';
 import ApplicationContextProvider from '../context/ApplicationContext';
 import DashboardContextProvider from '../context/DashboardContext';
-import DockerContextProvider from '../context/DockerContext'
+import DockerContextProvider from '../context/DockerContext';
 
 const DashboardContainer = () => (
   <Router>
@@ -15,10 +15,10 @@ const DashboardContainer = () => (
         <DashboardContextProvider>
           <CommsContextProvider>
             <DockerContextProvider>
-            <HealthContextProvider>
-              <SidebarContainer />
-              <MainContainer />
-            </HealthContextProvider>
+              <HealthContextProvider>
+                <SidebarContainer />
+                <MainContainer />
+              </HealthContextProvider>
             </DockerContextProvider>
           </CommsContextProvider>
         </DashboardContextProvider>
@@ -30,7 +30,7 @@ const DashboardContainer = () => (
 // Style
 const dashboardStyle = {
   display: 'flex',
-  backgroundColor: '#F7F8FC'
-}
+  backgroundColor: '#F7F8FC',
+};
 
 export default DashboardContainer;

app/containers/SidebarContainer.tsx

@@ -7,36 +7,45 @@ import ContactSupportIcon from '@material-ui/icons/ContactSupport';
 import SettingsIcon from '@material-ui/icons/Settings';
 import '../stylesheets/SidebarContainer.css';
 
-// 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;
-  }
-};
+// Toggle logic if JS needed in the future
 
+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">
-    <div className="sidebar" id="mySidebar" onMouseOver={toggleSidebar} onMouseOut={toggleSidebar}>
+  <div
+    className="sidebar-container"
+    id="mySidebar"
+    /*onMouseOver={toggleSidebar}
+    onMouseOut={toggleSidebar}*/
+  >
+    <div className="sidebar">
       <img alt="Chronos Logo" id="serviceDashLogo" src={'../assets/icon2Cropped.png'} />
-      <Link className="sidebar-link" to="/">
+      <img alt="Chronos Logo Mini" id="miniLogo" src={'../assets/pangolin.png'} />
+      <br />
+      <br />
+      <br />
+      <Link className="sidebar-link" to="/" id="home">
         <HomeSharpIcon style={{ boxShadow: 'none', width: '40px', height: '40px' }} />
         &emsp;Home
       </Link>
-      <Link className="sidebar-link" to="/about">
+      <Link className="sidebar-link" to="/about" id="about">
         <InfoIcon style={{ boxShadow: 'none', width: '40px', height: '40px' }} />
         &emsp;About
       </Link>
-      <Link className="sidebar-link" to="/contact">
+      <Link className="sidebar-link" to="/contact" id="contact">
         <ContactSupportIcon style={{ boxShadow: 'none', width: '40px', height: '40px' }} />
         &emsp;Contact
       </Link>
-      <Link className="sidebar-link" to="/settings">
+      <Link className="sidebar-link" to="/settings" id="settings">
         <SettingsIcon style={{ boxShadow: 'none', width: '40px', height: '40px' }} />
         &emsp;Settings
       </Link>

app/stylesheets/SidebarContainer.css

@@ -1,12 +1,16 @@
 .sidebar-container {
   color: white;
   background-color: #24262f;
-  min-width: 100px;
-  transition: 300ms;
+  width: 100px;
+  transition: 900ms;
   overflow: hidden;
-  z-index: 10;
+  z-index: 1;
   white-space: nowrap;
 }
+/* .sidebar-container:hover .home { */
+/* .home {
+  background-color: black !important;
+} */
 /* .material-icons,
 .icon-text {
   vertical-align: middle;
@@ -16,17 +20,58 @@
   margin-right: 30px;
 } */
 .sidebar-container:hover {
-  min-width: 200px;
+  width: 200px;
+}
+.sidebar-container:hover .sidebar-link {
+  width: 150px;
+}
+.sidebar-container:hover .sidebar {
+  width: 200px;
+}
+.sidebar-container:hover #serviceDashLogo {
+  opacity: 1;
+}
+.sidebar-container:hover #miniLogo {
+  opacity: 0;
+}
+
+#home {
+  transition: 600ms;
+}
+#about {
+  transition: 700ms;
+}
+#contact {
+  transition: 800ms;
+}
+#settings {
+  transition: 900ms;
+}
+
+#serviceDashLogo {
+  opacity: 0;
+  transition: 900ms;
+}
+#miniLogo {
+  position: absolute;
+  animation: twirl 20s infinite linear;
+  left: 7px;
+  top: 35px;
+  height: 75px;
+  width: 75px;
+  opacity: 1;
+  transition: 400ms;
 }
 .sidebar {
   padding-left: 20px;
-  width: 250px;
+  width: 100px;
   position: fixed;
   display: flex;
   flex-direction: column;
   align-items: left;
   justify-items: center;
   align-content: center;
+  transition: 900ms;
 }
 
 .container img {
@@ -56,5 +101,4 @@
 .sidebar-link:hover {
   background-color: #494fee;
   color: azure;
-  width: 150px;
 }