feat(responsiveness): add responsivenss to navigation menu

#199
CodeTanzania · Jun 4, 2019 · 74a4658 · 74a4658
1 parent d6fb876
commit 74a4658
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 3 deletions.
diff --git a/src/components/NavigationMenu/index.js b/src/components/NavigationMenu/index.js
@@ -81,21 +81,21 @@ const NavigationMenuItem = ({ name, icon, path, disabled, description }) => (
  */
 const NavigationMenu = ({ routes, match }) => {
   let url = '';
-  let colSpan = 12;
+  let colSpan = { span: 12 };
 
   if (match) {
     ({ url } = match);
   }
 
   if (routes.length > 4) {
-    colSpan = 8;
+    colSpan = { xxl: 8, xl: 8, lg: 8, md: 8, sm: 12, xs: 12 };
   }
 
   return (
     <div className="NavigationMenu">
       <Row type="flex" align="middle">
         {routes.map(route => (
-          <Col key={route.path} span={colSpan}>
+          <Col key={route.path} {...colSpan}>
             <NavigationMenuItem
               name={route.name}
               icon={route.icon}

diff --git a/src/components/NavigationMenu/styles.css b/src/components/NavigationMenu/styles.css
@@ -26,3 +26,15 @@
 .NavigationMenu .NavigationMenuItem .text-disabled {
   color: #a0b0b8;
 }
+
+@media screen and (max-width: 768px) {
+  .NavigationMenu {
+    width: 80%;
+  }
+}
+
+ @media screen and (max-width: 426px) {
+  .NavigationMenu {
+    width: 100%;
+  }
+}