From d0cb3b44dc99346301ac1e94ed4e06aa1769dd92 Mon Sep 17 00:00:00 2001
From: Llewellyn D'souza <lledsouza2209@gmail.com>
Date: Fri, 7 Jan 2022 18:08:24 +0530
Subject: [PATCH] Added: Sidebar nav rendering

---
 src/components/Sidebar/index.js           | 52 ++++++++++++++++++++++-
 src/components/Sidebar/sidebar.module.css | 11 ++++-
 src/components/topbar/index.js            |  2 +-
 3 files changed, 62 insertions(+), 3 deletions(-)

diff --git a/src/components/Sidebar/index.js b/src/components/Sidebar/index.js
index 9542e22..792aefd 100644
--- a/src/components/Sidebar/index.js
+++ b/src/components/Sidebar/index.js
@@ -1,6 +1,53 @@
+import { NavLink } from 'react-router-dom';
 import XIcon from '../../assets/icons/X-close-icon';
 import styles from './sidebar.module.css';
 
+const items = {
+  title: {
+    icon: '',
+    text: 'Main link',
+    link: '/',
+  },
+  subs: [
+    {
+      text: 'Sub links',
+      link: '/',
+    },
+    {
+      text: 'Sub links',
+      link: '/',
+    },
+    {
+      text: 'Sub links',
+      link: '/',
+    },
+    {
+      text: 'Sub links',
+      link: '/',
+    },
+    {
+      text: 'Sub links',
+      link: '/',
+    },
+  ],
+};
+
+const NavGroupItems = ({ list }) => (
+  <div className={styles.sidebarGroup}>
+    <NavLink to={list.title.link}>
+      <div className={styles.sidebarMainItem}>
+        <XIcon />
+        {list.title.text}
+      </div>
+    </NavLink>
+    {list.subs.map((subLink) => (
+      <NavLink to={subLink.link}>
+        <div className={styles.sidebarSubItem}>{subLink.text}</div>
+      </NavLink>
+    ))}
+  </div>
+);
+
 export default function Sidebar({ isMobileScreen, isOpen, setOpen }) {
   if (!isMobileScreen && isOpen) {
     return (
@@ -15,7 +62,10 @@ export default function Sidebar({ isMobileScreen, isOpen, setOpen }) {
             <XIcon />
           </div>
         </div>
-        <div className={styles.sidebarNav}></div>
+        <div className={styles.sidebarList}>
+          <NavGroupItems list={items} />
+          <NavGroupItems list={items} />
+        </div>
       </div>
     );
   }
diff --git a/src/components/Sidebar/sidebar.module.css b/src/components/Sidebar/sidebar.module.css
index 8ee47cc..d027277 100644
--- a/src/components/Sidebar/sidebar.module.css
+++ b/src/components/Sidebar/sidebar.module.css
@@ -3,7 +3,6 @@
   background: #2d373c;
   min-height: 100vh;
   min-width: 350px;
-  padding: 40px;
 }
 
 /* @media only screen and (max-width: 800px) {
@@ -14,6 +13,7 @@
   display: flex;
   justify-content: space-between;
   align-items: baseline;
+  padding: 40px 40px 30px 40px;
 }
 
 .closeIcon {
@@ -28,3 +28,12 @@
 
   color: #ffffff;
 }
+
+.sidebarList {
+}
+
+.sidebarMainItem {
+}
+
+.sidebarSubItem {
+}
diff --git a/src/components/topbar/index.js b/src/components/topbar/index.js
index db802d2..571f32c 100644
--- a/src/components/topbar/index.js
+++ b/src/components/topbar/index.js
@@ -12,7 +12,7 @@ export default function TopBar({ isMobileScreen, isSidebarOpen, setSidebarOpen }
       >
         {isSidebarOpen ? null : <HamburgerIcon color="#000" />}
       </div>
-      <div>Other icons here</div>
+      <div>Right side icons here</div>
     </div>
   );
 }