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;
-}
+}