Added: sidebar open-close

src/components/Sidebar/index.js

@@ -1,9 +1,23 @@
+import XIcon from '../../assets/icons/X-close-icon';
 import styles from './sidebar.module.css';
 
-export default function Sidebar() {
-  return (
-    <div className={styles.navSidebar}>
-      <div className={styles.sidebarBranding}>Plaidware</div>
-    </div>
-  );
+export default function Sidebar({ isMobileScreen, isOpen, setOpen }) {
+  if (!isMobileScreen && isOpen) {
+    return (
+      <div className={styles.navSidebar}>
+        <div className={styles.sidebarBrandingHeader}>
+          <div className={styles.sidebarBranding}>Plaidware</div>
+          <div
+            onClick={() => {
+              setOpen(false);
+            }}
+          >
+            <XIcon />
+          </div>
+        </div>
+        <div className={styles.sidebarNav}></div>
+      </div>
+    );
+  }
+  return null;
 }

src/components/Sidebar/sidebar.module.css

@@ -2,9 +2,24 @@
   grid-column: 1;
   background: #2d373c;
   min-height: 100vh;
+  min-width: 350px;
   padding: 40px;
 }
 
+/* @media only screen and (max-width: 800px) {
+
+} */
+
+.sidebarBrandingHeader {
+  display: flex;
+  justify-content: space-between;
+  align-items: baseline;
+}
+
+.closeIcon {
+  font-size: larger;
+}
+
 .sidebarBranding {
   font-style: normal;
   font-weight: bold;
@@ -12,4 +27,4 @@
   line-height: 44px;
 
   color: #ffffff;
-}
+}

src/components/topbar/index.js

@@ -1,8 +1,18 @@
-import React from 'react'
-import styles from './topbar.module.css'
+import React from 'react';
+import HamburgerIcon from '../../assets/icons/Hamburger-icon';
+import styles from './topbar.module.css';
 
-export default function TopBar() {
+export default function TopBar({ isMobileScreen, isSidebarOpen, setSidebarOpen }) {
   return (
-    <div className={styles.topBar}>search comes here</div>
-  )
+    <div className={styles.topBar}>
+      <div
+        onClick={() => {
+          setSidebarOpen(true);
+        }}
+      >
+        {isSidebarOpen ? null : <HamburgerIcon color="#000" />}
+      </div>
+      <div>Other icons here</div>
+    </div>
+  );
 }

src/components/topbar/topbar.module.css

@@ -1,5 +1,10 @@
 .topBar {
   grid-row: 1;
+
   padding: 24px 48px;
   box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.08);
-}
+
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}

src/layouts/dashboard/dashboard.module.css

@@ -1,7 +1,7 @@
 .dashboardGrid {
   width: 100vw;
   display: grid;
-  grid-template-columns: 300px auto;
+  grid-template-columns: max-content auto;
 }
 
 .mainContent {
@@ -10,7 +10,19 @@
   grid-template-rows: 108px 72px auto;
 }
 
+@media only screen and (max-width: 800px) {
+  .dashboardGrid {
+    grid-template-columns: auto;
+  }
+
+  .mainContent {
+    grid-column: 1;
+    grid-template-rows: 50px 50px auto;
+  }
+}
+
 .content {
   grid-row: 3;
   padding: 24px 48px;
+  min-height: 100%;
 }

src/layouts/dashboard/index.js

@@ -1,15 +1,21 @@
+import { useState } from 'react';
 import { Outlet } from 'react-router-dom';
+
 import Breadcrumbs from '../../components/breadcrumbs';
 import Sidebar from '../../components/Sidebar';
 import TopBar from '../../components/topbar';
+import useWindowDimensions from '../../hooks/useWindowDimensions';
 import styles from './dashboard.module.css';
 
 export default function Dashboard() {
+  const [sidebarOpen, setSidebarOpen] = useState(true);
+  const { isMobileScreen } = useWindowDimensions();
+
   return (
     <div className={styles.dashboardGrid}>
-      <Sidebar />
+      <Sidebar isMobileScreen={isMobileScreen} isOpen={sidebarOpen} setOpen={setSidebarOpen} />
       <div className={styles.mainContent}>
-        <TopBar />
+        <TopBar isMobileScreen={isMobileScreen} isSidebarOpen={sidebarOpen} setSidebarOpen={setSidebarOpen} />
         <Breadcrumbs />
         <div className={styles.content}>
           <Outlet />