wip: add responsive header and fixes on styling

src/components/DrawerRouterContainer.jsx

@@ -27,6 +27,7 @@ class DrawerRouterContainer extends React.Component {
     state = {
         expanded: true,
         selectedId: items.findIndex(x => x.selected === true),
+        isMobile: false
     }
 
     handleClick = () => {

src/components/Header.jsx

@@ -23,10 +23,10 @@ const Header = (props) => {
                 <div className="settings">
                     <span>Language</span>
                     <DropDownList data={[ "Eng", "Bg", "Gb" ]} defaultValue="Eng"/>
-                    <Avatar type={'image'} shape={'circle'}>
-                        <img src={userAvatar} alt="user-avatar"/>
-                    </Avatar>
                 </div>
+                <Avatar type={'image'} shape={'circle'}>
+                    <img src={userAvatar} alt="user-avatar"/>
+                </Avatar>
             </div>
         </header>
     );

src/pages/Dashboard.jsx

@@ -151,7 +151,7 @@ const Dashboard = () => {
 
     return (
         <div id="Dashboard" className="main-content">
-            <div className="card-container">
+            <div className="card-container grid">
                 <h3 className="card-title">Team Efficiency</h3>
                 <div className="card-buttons">
                     <ButtonGroup>
@@ -168,7 +168,7 @@ const Dashboard = () => {
                 </div>
                 <div className="card-component">CHART HERE:</div>
             </div>
-            <div className="card-container">
+            <div className="card-container grid">
                 <h3 className="card-title">Team Members</h3>
                 <div className="card-buttons">
                     <ButtonGroup>

src/pages/Info.jsx

@@ -8,11 +8,10 @@ import { Button } from '@progress/kendo-react-buttons';
 const Info = () => {
     return (
         <div id="Info" className="info-page main-content">
-            <div className="kendoka">
-                <img src={kendoka} alt="kendoka" />
-            </div>
-            <div>
-                <div className="container">
+            <div className="content">
+                    <div className="kendoka">
+                        <img src={kendoka} alt="kendoka" />
+                    </div>
                     <div className="section-1">
                         <h1>KendoReact</h1>
                         <h2>UI for React Developers</h2>
@@ -216,10 +215,9 @@ const Info = () => {
                                 </h3>
                             </div>
                         </div>
-                    </div>
                 </div>
-                <div className="footer"/>
             </div>
+            <div className="footer"/>
         </div>
     );
 }

src/pages/Planning.jsx

@@ -5,7 +5,7 @@ const Planning = () => {
     
     return (
         <div id="Planning" className="main-content">
-            <div className="card-container">
+            <div className="card-container grid">
                 <h3 className="card-title">Team Calendar</h3>
                 <span></span>
                 <span></span>

src/pages/Profile.jsx

@@ -17,7 +17,7 @@ const Profile = () => {
             alert(JSON.stringify(dataItem, null, 2));
         };
         return (
-            <div id="Profile" className="main-content">
+            <div id="Profile" className="profile-page main-content">
                 <div className="card-container">
                     <div className="card-component">
                         <Form

src/styles/_common.scss

@@ -1,3 +1,7 @@
+#root {
+    overflow-x: hidden;
+}
+
 body,
 h1,
 h2,
@@ -17,14 +21,10 @@ li {
 }
 
 .k-drawer-container.k-drawer-push {
-    position: fixed;
-    width: 100%;
-    height: 100%;
     background-color: $background-color;
-    overflow-y: scroll;
+    min-height: calc(100vh - 80px);
 
     .k-drawer {
-        position: sticky;
         box-shadow: 0 0 10px rgba(0,0,0,.2);
         border-right-width: 0 !important;
     }
@@ -73,67 +73,19 @@ li {
     }
 }
 
-.header {
-    height: 80px;
-    
-    .nav-container {
-        display: flex;
-        flex-direction: row;
-        align-items: center;
-        height: 100%;
-        color: $white;
-    }
-    .menu-button {
-        flex: 0 0 50px;
-        text-align: center;
-    }
-    .hamburger-icon {
-        background-image:  url('./../assets/hamburger-icon.svg');
-        background-repeat: no-repeat;
-        width: 20px;
-    }
-    .title {
-        display: flex;
-        flex: 1 0 auto;
-        margin-left: 25px;
-    }
-    .vl {
-        border-left: 1px solid $white;
-        height: 25px;
-        margin: 6px 15px;
-    }
-    .settings {
-        flex: 0 0 auto;
-        display: flex;
-        align-items: center;
-    }
-    .k-avatar {
-        width: 40px;
-        height: 40px;
-        margin: 0 25px;
-        border: 1px solid white;
-
-        img {
-            width: 40px;
-            height: 40px;
-        }
-    }
-    .k-dropdown {
-        max-width: 70px;
-        margin-left: 15px;
-    }
-}
-
 .card-container {
     background-color: $white;
     border-radius: 5px;
     margin: 25px;
     padding: 25px;
     box-shadow: 0 0 10px rgba(0,0,0,.2);
-    display: grid;
-    grid-template-columns: repeat(3, 1fr);
-    column-gap: 10px;
-    row-gap: 1em;
+
+    &.grid {
+        display: grid;
+        grid-template-columns: repeat(3, 1fr);
+        column-gap: 10px;
+        row-gap: 1em;
+    }
 
     .card-buttons {
         text-align: center;
@@ -163,6 +115,16 @@ li {
     }
 }
 
+.profile-page {
+    .k-form {
+        margin: 15px auto;
+    }
+
+    .k-form-field:first-of-type .k-form-field-wrap {
+        margin: auto;
+    }
+}
+
 .info-page {
     background-color: $info-background;
     color: $white;
@@ -173,10 +135,17 @@ li {
     a {
         color: $link-color;
     }
+    
+    .content {
+        padding: 120px 40px 0;
+        margin: 0 auto;
+        position: relative;
+        max-width: 820px;
+    }
 
     .kendoka {
         position: absolute;
-        right: 5em;
+        right: 0;
         top: 2em;
 
         img {
@@ -184,11 +153,6 @@ li {
         }
     }
 
-    .container {
-        padding: 120px 145px 0;
-        position: relative;
-    }
-
     h1 {
         font-size: 71px;
         font-weight: bold;
@@ -266,3 +230,81 @@ li {
         }
     }
 }
+
+
+// Header
+.header {
+    height: 80px;
+
+    .nav-container {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        justify-content: space-between;
+        height: 100%;
+        color: $white;
+    }
+
+    .menu-button {
+        flex: 0 0 50px;
+        text-align: center;
+    }
+
+    .hamburger-icon {
+        background-image:  url('./../assets/hamburger-icon.svg');
+        background-repeat: no-repeat;
+        width: 20px;
+    }
+
+    .title, .settings, .k-avatar {
+        display: none;
+    }
+}
+
+@media (min-width: 300px) {
+    .header {
+        .k-avatar {
+            display: block;
+            width: 40px;
+            height: 40px;
+            margin: 0 25px;
+            border: 1px solid white;
+    
+            img {
+                width: 40px;
+                height: 40px;
+            }
+        }
+    }
+}
+
+@media (min-width: 480px) {
+    .header {
+        .title {
+            display: flex;
+            flex: 1 0 auto;
+            margin-left: 25px;
+        }
+        .vl {
+            border-left: 1px solid $white;
+            height: 25px;
+            margin: 6px 15px;
+        }
+    }
+}
+
+
+@media (min-width: 768px) {
+    .header {
+        .settings {
+            display: flex;
+            flex: 0 0 auto;
+            align-items: center;
+        }
+        
+        .k-dropdown {
+            max-width: 70px;
+            margin-left: 15px;
+        }
+    }
+}