Still sidebar improvements.

src/App.js

@@ -11,6 +11,8 @@ import concatTags from './modules/concatTags';
 import NoResults from './componets/NoResults';
 import Loader from './componets/Loader';
 import SideBar from './componets/SideBar';
+import Tags from './routes/Tags.js';
+import { Route, Routes } from "react-router-dom";
 
 function App() {
   const [data, setData] = useState([]),
@@ -109,47 +111,65 @@ function App() {
   return (
     <div className="App">
       <SideBar tags={tags} handleToggleSidebar={handleToggleSidebar} toggle={toggle} />
-      <div className='content'>
-        <div className="head">
-          <button className='sidebar-btn btn' style={{marginRight: '10px'}} onClick={handleToggleSidebar}>&#xf0c9;</button>
-          <input className="search" type="search" placeholder="&#xf002; Search" onChange={search}/>
-          <button className="add-btn btn" onClick={() => setNewBox(true)}>&#xf067;</button>
-          <button className="dark-light-btn btn" onClick={() => setLightMode(!lightMode)}></button>
-        </div>
+      <Routes>
+        <Route path="/" element={<div className='content'>
+          <div className="head">
+            <button className='sidebar-btn btn' style={{marginRight: '10px'}} onClick={handleToggleSidebar}>&#xf0c9;</button>
+            <input className="search" type="search" placeholder="&#xf002; Search" onChange={search}/>
+            <button className="add-btn btn" onClick={() => setNewBox(true)}>&#xf067;</button>
+            <button className="dark-light-btn btn" onClick={() => setLightMode(!lightMode)}></button>
+          </div>
 
-        {numberOfResults > 0 ? <p className="results">{numberOfResults} Bookmarks found</p> : null}
+          {numberOfResults > 0 ? <p className="results">{numberOfResults} Bookmarks found</p> : null}
 
-        <button className='btn' style={{marginTop: '10px'}} onClick={() => setFilterBox(true)}>&#xf0b0;</button>
-        <button className='btn' style={{marginLeft: '10px'}} onClick={() => setSortBox(true)}>&#xf0dc;</button>
-        <List lightMode={lightMode} SetLoader={SetLoader} data={filteredData} tags={tags} reFetch={fetchData} />
+          <button className='btn' style={{marginTop: '10px'}} onClick={() => setFilterBox(true)}>&#xf0b0;</button>
+          <button className='btn' style={{marginLeft: '10px'}} onClick={() => setSortBox(true)}>&#xf0dc;</button>
+          
+          <List
+            lightMode={lightMode} 
+            SetLoader={SetLoader} 
+            data={filteredData} 
+            tags={tags} 
+            reFetch={fetchData} 
+          />
 
-        {numberOfResults === 0 ? <NoResults /> : null}
+          {numberOfResults === 0 ? <NoResults /> : null}
 
-        {sortBox ? <Sort 
-          sortBy={sortByFunc}
-          onExit={exitSorting}
-        /> : null}
+          {sortBox ? <Sort 
+            sortBy={sortByFunc}
+            onExit={exitSorting}
+          /> : null}
 
-        {filterBox ? <Filters 
-          nameChecked={nameChecked}
-          handleNameCheckbox={handleNameCheckbox}
-          descriptionChecked={descriptionChecked}
-          handleDescriptionCheckbox={handleDescriptionCheckbox}
-          tagsChecked={tagsChecked} 
-          handleTagsCheckbox={handleTagsCheckbox}
-          onExit={exitFilter}
-        /> : null}
+          {filterBox ? <Filters 
+            nameChecked={nameChecked}
+            handleNameCheckbox={handleNameCheckbox}
+            descriptionChecked={descriptionChecked}
+            handleDescriptionCheckbox={handleDescriptionCheckbox}
+            tagsChecked={tagsChecked} 
+            handleTagsCheckbox={handleTagsCheckbox}
+            onExit={exitFilter}
+          /> : null}
 
-        {newBox ? <AddItem 
-          SetLoader={SetLoader}
-          onExit={exitAdding} 
-          reFetch={fetchData} 
-          lightMode={lightMode}
-          tags={() => tags} 
-        /> : null}
+          {newBox ? <AddItem 
+            SetLoader={SetLoader}
+            onExit={exitAdding} 
+            reFetch={fetchData} 
+            lightMode={lightMode}
+            tags={() => tags} 
+          /> : null}
 
-        {loader ? <Loader lightMode={lightMode} /> : null}
-      </div>
+          {loader ? <Loader lightMode={lightMode} /> : null}
+        </div>} />
+
+        <Route path="tags/:tagId" element={<Tags
+          lightMode={lightMode} 
+          SetLoader={SetLoader} 
+          data={filteredData} 
+          tags={tags} 
+          reFetch={fetchData}
+        />} />
+        
+      </Routes>
     </div>
   );
 }

src/componets/SideBar.js

@@ -1,6 +1,7 @@
-import { ProSidebar, SidebarHeader, SidebarFooter, SidebarContent } from 'react-pro-sidebar';
+import { ProSidebar, SidebarHeader, SidebarFooter, SidebarContent, Menu, MenuItem, SubMenu } from 'react-pro-sidebar';
 import 'react-pro-sidebar/dist/css/styles.css';
 import '../styles/SideBar.css';
+import { Link } from "react-router-dom";
 
 const SideBar = ({ tags, handleToggleSidebar, toggle }) => {
   return (
@@ -13,11 +14,20 @@ const SideBar = ({ tags, handleToggleSidebar, toggle }) => {
         <h1>LinkWarden</h1>
     </SidebarHeader>
     <SidebarContent className='sidebar-content'>
-
-        <h3>Tags:</h3>
-        {tags.map((e) => {
-            return <p>{e}</p>
-        })}
+        <Menu iconShape="circle">
+            
+            <MenuItem><Link to="/"><h3>View All</h3></Link></MenuItem>
+            
+            <SubMenu title='Tags'>                
+                {tags.map((e, i) => {
+                    const path = `/tags/${e}`
+                    return <MenuItem key={i}><Link to={path}>{e}</Link></MenuItem>
+                })}
+            </SubMenu>
+                
+            
+            
+        </Menu>
     </SidebarContent>
     <SidebarFooter>
         <p className='credits'>©{new Date().getFullYear()} Made with 💙 by <a href='https://github.com/Daniel31x13'>Daniel 31X13</a></p>

src/index.js

@@ -2,10 +2,13 @@ import React from "react";
 import ReactDOM from "react-dom/client";
 import "./styles/index.css";
 import App from "./App";
+import { BrowserRouter } from "react-router-dom";
 
 const root = ReactDOM.createRoot(document.getElementById("root"));
 root.render(
   <React.StrictMode>
-    <App />
+    <BrowserRouter>
+      <App />
+    </BrowserRouter>
   </React.StrictMode>
 );

src/routes/Tags.js

@@ -0,0 +1,21 @@
+import { useParams } from 'react-router-dom';
+import List from '../componets/List';
+
+const Tags = ({ data }) => {
+  const { tagId } = useParams();
+  const dataWithMatchingTag = data.filter((e) => {
+    return e.tag.includes(tagId)
+  });
+
+  console.log(dataWithMatchingTag)
+
+  return (
+    <div className="content">
+      <List
+        data={dataWithMatchingTag} 
+      />
+    </div>
+  )
+}
+
+export default Tags

src/styles/SideBar.css

@@ -24,7 +24,6 @@
     text-decoration: underline;
 }
 
-
 .pro-sidebar-layout {
     background: #384952;
     text-shadow: none;