update imports, render top menu on smaller screens

#69
yalla-coop · Oct 4, 2019 · da57ac4 · da57ac4
1 parent 95e5ac4
commit da57ac4
Show file tree

Hide file tree

Showing 2 changed files with 56 additions and 50 deletions.
diff --git a/src/components/Admin/RentalData/RentalRecord.js b/src/components/Admin/RentalData/RentalRecord.js
@@ -11,7 +11,7 @@ import * as S from './RentalData.style';
 import { status as constStatus } from '../../../constants/rentalRecords';
 
 // custom hooks
-import useWindowWidth from '../../../useWindowWidth';
+import useWindowWidth from '../../../hooks/useWindowWidth';
 
 function RentalRecord({ location, history }) {
   const [isTablet, setTablet] = useState(false);

diff --git a/src/components/Admin/SideMenu/index.js b/src/components/Admin/SideMenu/index.js
@@ -7,20 +7,71 @@ import { Link } from 'react-router-dom';
 import { menuElements } from '../../../constants/adminRoutes';
 
 // custom hooks
-import useWindowWidth from '../../../useWindowWidth';
+import useWindowWidth from '../../../hooks/useWindowWidth';
 
 const { Sider } = Layout;
 const { SubMenu } = Menu;
 
+const InnerMenu = () => (
+  <Menu
+    defaultSelectedKeys={['/']}
+    defaultOpenKeys={[menuElements[0].title]}
+    mode="inline"
+    theme="light"
+  >
+    {menuElements.map(element =>
+      element.items ? (
+        <SubMenu
+          style={{ textAlign: 'left' }}
+          key={element.route}
+          title={
+            <span>
+              <Icon type={element.icon} />
+              <span>{element.title}</span>
+            </span>
+          }
+        >
+          {element.items.map(item => (
+            <Menu.Item
+              key={element.route + item.route}
+              style={{ textAlign: 'left' }}
+            >
+              <Link to={`/control-panel${element.route + item.route}`}>
+                <span>{item.title}</span>
+              </Link>
+            </Menu.Item>
+          ))}
+        </SubMenu>
+      ) : (
+        <Menu.Item key={element.route} style={{ textAlign: 'left' }}>
+          <Link to={`/control-panel${element.route}`}>
+            <Icon type={element.icon} />
+            <span>{element.title}</span>
+          </Link>
+        </Menu.Item>
+      )
+    )}
+    <Menu.Item style={{ textAlign: 'left' }}>
+      <Link to="/">
+        <Icon type="home" />
+        <span>Vist Website</span>
+      </Link>
+    </Menu.Item>
+  </Menu>
+);
+
 export default function SideMenu() {
   const [collapsed, setCollapsed] = useState(false);
+  const [isSmallScreen, setSmallScreen] = useState(false);
   const device = useWindowWidth();
 
   useEffect(() => {
-    setCollapsed(device.isTablet);
+    setSmallScreen(device.isTablet);
   }, [device]);
 
-  return (
+  return isSmallScreen ? (
+    <InnerMenu />
+  ) : (
     <Sider
       collapsible
       collapsed={collapsed}
@@ -30,52 +81,7 @@ export default function SideMenu() {
       theme="light"
       style={{ paddingTop: '2rem' }}
     >
-      <div className="logo" />
-      <Menu
-        defaultSelectedKeys={['/']}
-        defaultOpenKeys={[menuElements[0].title]}
-        mode="inline"
-        theme="light"
-      >
-        {menuElements.map(element =>
-          element.items ? (
-            <SubMenu
-              style={{ textAlign: 'left' }}
-              key={element.route}
-              title={
-                <span>
-                  <Icon type={element.icon} />
-                  <span>{element.title}</span>
-                </span>
-              }
-            >
-              {element.items.map(item => (
-                <Menu.Item
-                  key={element.route + item.route}
-                  style={{ textAlign: 'left' }}
-                >
-                  <Link to={`/control-panel${element.route + item.route}`}>
-                    <span>{item.title}</span>
-                  </Link>
-                </Menu.Item>
-              ))}
-            </SubMenu>
-          ) : (
-            <Menu.Item key={element.route} style={{ textAlign: 'left' }}>
-              <Link to={`/control-panel${element.route}`}>
-                <Icon type={element.icon} />
-                <span>{element.title}</span>
-              </Link>
-            </Menu.Item>
-          )
-        )}
-        <Menu.Item style={{ textAlign: 'left' }}>
-          <Link to="/">
-            <Icon type="home" />
-            <span>Vist Website</span>
-          </Link>
-        </Menu.Item>
-      </Menu>
+      <InnerMenu />
     </Sider>
   );
 }