Fully added listing functionality.

src/componets/SideBar.js

@@ -11,7 +11,7 @@ import "react-pro-sidebar/dist/css/styles.css";
 import "../styles/SideBar.css";
 import { Link } from "react-router-dom";
 
-const SideBar = ({ tags, handleToggleSidebar, toggle }) => {
+const SideBar = ({ tags, lists, handleToggleSidebar, toggle }) => {
   const sortedTags = tags.sort((a, b) => {
     const A = a.toLowerCase(),
       B = b.toLowerCase();
@@ -19,6 +19,19 @@ const SideBar = ({ tags, handleToggleSidebar, toggle }) => {
     if (A > B) return 1;
     return 0;
   });
+
+  const sortedLists = lists
+    .sort((a, b) => {
+      const A = a.toLowerCase(),
+        B = b.toLowerCase();
+      if (A < B) return -1;
+      if (A > B) return 1;
+      return 0;
+    })
+    .filter((e) => {
+      return e != "Unsorted";
+    });
+
   return (
     <ProSidebar
       toggled={toggle}
@@ -37,6 +50,21 @@ const SideBar = ({ tags, handleToggleSidebar, toggle }) => {
             </Link>
           </MenuItem>
 
+          <SubMenu
+            icon={<h2 className="sidebar-icon">&#xf02c;</h2>}
+            suffix={<span className="badge">{sortedTags.length}</span>}
+            title={<h3 className="menu-item">Lists</h3>}
+          >
+            {sortedLists.map((e, i) => {
+              const path = `/lists/${e}`;
+              return (
+                <MenuItem prefix={"#"} key={i}>
+                  <Link to={path}>{e}</Link>
+                </MenuItem>
+              );
+            })}
+          </SubMenu>
+
           <SubMenu
             icon={<h2 className="sidebar-icon">&#xf02c;</h2>}
             suffix={<span className="badge">{sortedTags.length}</span>}