From 1fd471f58a045d9635e794b62b468a7c2710b8d8 Mon Sep 17 00:00:00 2001
From: oscarzhou <oscarzhou0727@icloud.com>
Date: Sun, 13 Dec 2020 16:39:52 +1300
Subject: [PATCH] component: adjust more on the responsive behavior of 
 SideDrawer and NavigationItems component

---
 .../NavigationItem/NavigationItem.css         | 46 +++++++++++++------
 .../NavigationItems/NavigationItems.css       |  7 +++
 .../Navigation/SideDrawer/SideDrawer.css      |  1 +
 src/components/Navigation/Toolbar/Toolbar.css |  6 +++
 src/components/Navigation/Toolbar/Toolbar.js  |  2 +-
 5 files changed, 47 insertions(+), 15 deletions(-)

diff --git a/src/components/Navigation/NavigationItems/NavigationItem/NavigationItem.css b/src/components/Navigation/NavigationItems/NavigationItem/NavigationItem.css
index 8133516..15bda5e 100644
--- a/src/components/Navigation/NavigationItems/NavigationItem/NavigationItem.css
+++ b/src/components/Navigation/NavigationItems/NavigationItem/NavigationItem.css
@@ -1,25 +1,43 @@
 .NavigationItem {
-    margin: 0;
+    margin: 10px 0;
     box-sizing: border-box;
-    display: flex;
-    height: 100%;
-    align-items: center;
+    display: block;
+    width: 100%;
 }
 
-
-.NavigationItem a{
-    color: white;
+.NavigationItem a {
+    color:#8f5c2c;
     text-decoration: none;
-    height: 100%;
-    padding: 16px 10px;
-    border-bottom: 4px solid transparent;
+    width: 100%;
     box-sizing: border-box;
     display: block;
 }
 
-.NavigationItem a:hover,
-.NavigationItem a:active,
+.NavigationItem a:hover, 
+.NavigationItem a:active, 
 .NavigationItem a.active {
-    background-color: #8f5c2c;
-    border-bottom: 4px solid #40a4c8;
+    color: #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;
+    }
 }
\ No newline at end of file
diff --git a/src/components/Navigation/NavigationItems/NavigationItems.css b/src/components/Navigation/NavigationItems/NavigationItems.css
index a3fe703..877b152 100644
--- a/src/components/Navigation/NavigationItems/NavigationItems.css
+++ b/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;
+    }
 }
\ No newline at end of file
diff --git a/src/components/Navigation/SideDrawer/SideDrawer.css b/src/components/Navigation/SideDrawer/SideDrawer.css
index 2eacf15..d6f0344 100644
--- a/src/components/Navigation/SideDrawer/SideDrawer.css
+++ b/src/components/Navigation/SideDrawer/SideDrawer.css
@@ -28,4 +28,5 @@
 
 .Logo{
     height: 11%;
+    margin-bottom: 32px;
 }
\ No newline at end of file
diff --git a/src/components/Navigation/Toolbar/Toolbar.css b/src/components/Navigation/Toolbar/Toolbar.css
index a786ed9..592362d 100644
--- a/src/components/Navigation/Toolbar/Toolbar.css
+++ b/src/components/Navigation/Toolbar/Toolbar.css
@@ -19,4 +19,10 @@
 
 .Logo{
     height: 80%;
+}
+
+@media (max-width: 499px) {
+    .DesktopOnly {
+        display: none;
+    }
 }
\ No newline at end of file
diff --git a/src/components/Navigation/Toolbar/Toolbar.js b/src/components/Navigation/Toolbar/Toolbar.js
index a6bf075..7ba0f10 100644
--- a/src/components/Navigation/Toolbar/Toolbar.js
+++ b/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>