component: adjust more on the responsive behavior of SideDrawer and NavigationItems component

src/components/Navigation/NavigationItems/NavigationItem/NavigationItem.css

@@ -1,25 +1,43 @@
 .NavigationItem {
-    margin: 0;
+    margin: 10px 0;
     box-sizing: border-box;
-    display: flex;
+    display: block;
-    height: 100%;
+    width: 100%;
-    align-items: center;
 }
 
-
+.NavigationItem a {
-.NavigationItem a{
+    color:#8f5c2c;
-    color: white;
     text-decoration: none;
-    height: 100%;
+    width: 100%;
-    padding: 16px 10px;
-    border-bottom: 4px solid transparent;
     box-sizing: border-box;
     display: block;
 }
 
-.NavigationItem a:hover,
+.NavigationItem a:hover, 
-.NavigationItem a:active,
+.NavigationItem a:active, 
 .NavigationItem a.active {
-    background-color: #8f5c2c;
+    color: #40a4c8;
-    border-bottom: 4px solid #40a4c8;
+}
+
+@media (min-width: 500px) {
+    .NavigationItem {
+        margin: 0;
+        display: flex;
+        height: 100%;
+        width: auto;
+        align-items: center;
+    }
+    .NavigationItem a {
+        color: white;
+        height: 100%;
+        padding: 16px 10px;
+        border-bottom: 4px solid transparent;
+    }
+    .NavigationItem a:hover, 
+    .NavigationItem a:active, 
+    .NavigationItem a.active {
+        background-color: #8f5c2c;
+        border-bottom: 4px solid #40a4c8;
+        color: white;
+    }
 }

src/components/Navigation/NavigationItems/NavigationItems.css

@@ -3,6 +3,13 @@
     padding: 0;
     list-style: none;
     display: flex;
+    flex-flow: column;
     align-items: center;
     height: 100%;
+}
+
+@media (min-width: 500px) {
+    .NavigationItems{
+        flex-flow: row;
+    }
 }

src/components/Navigation/SideDrawer/SideDrawer.css

@@ -28,4 +28,5 @@
 
 .Logo{
     height: 11%;
+    margin-bottom: 32px;
 }

src/components/Navigation/Toolbar/Toolbar.css

@@ -19,4 +19,10 @@
 
 .Logo{
     height: 80%;
+}
+
+@media (max-width: 499px) {
+    .DesktopOnly {
+        display: none;
+    }
 }

src/components/Navigation/Toolbar/Toolbar.js

@@ -11,7 +11,7 @@ const toolbar = () => {
             <div className={classes.Logo}>
                 <Logo />
             </div>
-            <nav>
+            <nav className={classes.DesktopOnly}>
                 <NavigationItems />
             </nav>
         </header>