Still sidebar improvements.

package-lock.json

@@ -17,6 +17,7 @@
         "react-lazyload": "^3.2.0",
         "react-loader-spinner": "^6.0.0-0",
         "react-pro-sidebar": "^0.7.1",
+        "react-router-dom": "^6.3.0",
         "react-scripts": "5.0.0",
         "react-select": "^5.3.2",
         "web-vitals": "^2.1.4"
@@ -8155,6 +8156,14 @@
         "he": "bin/he"
       }
     },
+    "node_modules/history": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/history/-/history-5.3.0.tgz",
+      "integrity": "sha512-ZqaKwjjrAYUYfLG+htGaIIZ4nioX2L70ZUMIFysS3xvBsSG4x/n1V6TXV3N8ZYNuFGlDirFg32T7B6WOUPDYcQ==",
+      "dependencies": {
+        "@babel/runtime": "^7.7.6"
+      }
+    },
     "node_modules/hoist-non-react-statics": {
       "version": "3.3.2",
       "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
@@ -13441,6 +13450,30 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/react-router": {
+      "version": "6.3.0",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.3.0.tgz",
+      "integrity": "sha512-7Wh1DzVQ+tlFjkeo+ujvjSqSJmkt1+8JO+T5xklPlgrh70y7ogx75ODRW0ThWhY7S+6yEDks8TYrtQe/aoboBQ==",
+      "dependencies": {
+        "history": "^5.2.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8"
+      }
+    },
+    "node_modules/react-router-dom": {
+      "version": "6.3.0",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.3.0.tgz",
+      "integrity": "sha512-uaJj7LKytRxZNQV8+RbzJWnJ8K2nPsOOEuX7aQstlMZKQT0164C+X2w6bnkqU3sjtLvpd5ojrezAyfZ1+0sStw==",
+      "dependencies": {
+        "history": "^5.2.0",
+        "react-router": "6.3.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8",
+        "react-dom": ">=16.8"
+      }
+    },
     "node_modules/react-scripts": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-5.0.0.tgz",
@@ -22177,6 +22210,14 @@
       "resolved": "https://registry.npmjs.org/he/-/he-1.2.0.tgz",
       "integrity": "sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw=="
     },
+    "history": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/history/-/history-5.3.0.tgz",
+      "integrity": "sha512-ZqaKwjjrAYUYfLG+htGaIIZ4nioX2L70ZUMIFysS3xvBsSG4x/n1V6TXV3N8ZYNuFGlDirFg32T7B6WOUPDYcQ==",
+      "requires": {
+        "@babel/runtime": "^7.7.6"
+      }
+    },
     "hoist-non-react-statics": {
       "version": "3.3.2",
       "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
@@ -25832,6 +25873,23 @@
       "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.11.0.tgz",
       "integrity": "sha512-F27qZr8uUqwhWZboondsPx8tnC3Ct3SxZA3V5WyEvujRyyNv0VYPhoBg1gZ8/MV5tubQp76Trw8lTv9hzRBa+A=="
     },
+    "react-router": {
+      "version": "6.3.0",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.3.0.tgz",
+      "integrity": "sha512-7Wh1DzVQ+tlFjkeo+ujvjSqSJmkt1+8JO+T5xklPlgrh70y7ogx75ODRW0ThWhY7S+6yEDks8TYrtQe/aoboBQ==",
+      "requires": {
+        "history": "^5.2.0"
+      }
+    },
+    "react-router-dom": {
+      "version": "6.3.0",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.3.0.tgz",
+      "integrity": "sha512-uaJj7LKytRxZNQV8+RbzJWnJ8K2nPsOOEuX7aQstlMZKQT0164C+X2w6bnkqU3sjtLvpd5ojrezAyfZ1+0sStw==",
+      "requires": {
+        "history": "^5.2.0",
+        "react-router": "6.3.0"
+      }
+    },
     "react-scripts": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-5.0.0.tgz",

package.json

@@ -13,6 +13,7 @@
     "react-lazyload": "^3.2.0",
     "react-loader-spinner": "^6.0.0-0",
     "react-pro-sidebar": "^0.7.1",
+    "react-router-dom": "^6.3.0",
     "react-scripts": "5.0.0",
     "react-select": "^5.3.2",
     "web-vitals": "^2.1.4"

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'>
+      <Routes>
-        <div className="head">
+        <Route path="/" element={<div className='content'>
-          <button className='sidebar-btn btn' style={{marginRight: '10px'}} onClick={handleToggleSidebar}>&#xf0c9;</button>
+          <div className="head">
-          <input className="search" type="search" placeholder="&#xf002; Search" onChange={search}/>
+            <button className='sidebar-btn btn' style={{marginRight: '10px'}} onClick={handleToggleSidebar}>&#xf0c9;</button>
-          <button className="add-btn btn" onClick={() => setNewBox(true)}>&#xf067;</button>
+            <input className="search" type="search" placeholder="&#xf002; Search" onChange={search}/>
-          <button className="dark-light-btn btn" onClick={() => setLightMode(!lightMode)}></button>
+            <button className="add-btn btn" onClick={() => setNewBox(true)}>&#xf067;</button>
-        </div>
+            <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={{marginTop: '10px'}} onClick={() => setFilterBox(true)}>&#xf0b0;</button>
-        <button className='btn' style={{marginLeft: '10px'}} onClick={() => setSortBox(true)}>&#xf0dc;</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}
+          <List
+            lightMode={lightMode} 
+            SetLoader={SetLoader} 
+            data={filteredData} 
+            tags={tags} 
+            reFetch={fetchData} 
+          />
 
-        {sortBox ? <Sort 
+          {numberOfResults === 0 ? <NoResults /> : null}
-          sortBy={sortByFunc}
-          onExit={exitSorting}
-        /> : null}
 
-        {filterBox ? <Filters 
+          {sortBox ? <Sort 
-          nameChecked={nameChecked}
+            sortBy={sortByFunc}
-          handleNameCheckbox={handleNameCheckbox}
+            onExit={exitSorting}
-          descriptionChecked={descriptionChecked}
+          /> : null}
-          handleDescriptionCheckbox={handleDescriptionCheckbox}
-          tagsChecked={tagsChecked} 
-          handleTagsCheckbox={handleTagsCheckbox}
-          onExit={exitFilter}
-        /> : null}
 
-        {newBox ? <AddItem 
+          {filterBox ? <Filters 
-          SetLoader={SetLoader}
+            nameChecked={nameChecked}
-          onExit={exitAdding} 
+            handleNameCheckbox={handleNameCheckbox}
-          reFetch={fetchData} 
+            descriptionChecked={descriptionChecked}
+            handleDescriptionCheckbox={handleDescriptionCheckbox}
+            tagsChecked={tagsChecked} 
+            handleTagsCheckbox={handleTagsCheckbox}
+            onExit={exitFilter}
+          /> : null}
+
+          {newBox ? <AddItem 
+            SetLoader={SetLoader}
+            onExit={exitAdding} 
+            reFetch={fetchData} 
+            lightMode={lightMode}
+            tags={() => tags} 
+          /> : null}
+
+          {loader ? <Loader lightMode={lightMode} /> : null}
+        </div>} />
+
+        <Route path="tags/:tagId" element={<Tags
           lightMode={lightMode} 
-          tags={() => tags} 
+          SetLoader={SetLoader} 
-        /> : null}
+          data={filteredData} 
+          tags={tags} 
+          reFetch={fetchData}
+        />} />
         
-        {loader ? <Loader lightMode={lightMode} /> : null}
+      </Routes>
-      </div>
     </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'>
+        <Menu iconShape="circle">
             
-        <h3>Tags:</h3>
+            <MenuItem><Link to="/"><h3>View All</h3></Link></MenuItem>
-        {tags.map((e) => {
+            
-            return <p>{e}</p>
+            <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;