Added: Sidebar nav rendering

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