Finished sidebar functionality.

src/App.js

@@ -111,8 +111,8 @@ function App() {
   return (
     <div className="App">
       <SideBar tags={tags} handleToggleSidebar={handleToggleSidebar} toggle={toggle} />
-      <Routes>
+
-        <Route path="/" element={<div className='content'>
+      <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}/>
@@ -125,14 +125,6 @@ function App() {
         <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}
 
         {sortBox ? <Sort 
@@ -159,6 +151,17 @@ function App() {
         /> : null}
 
         {loader ? <Loader lightMode={lightMode} /> : null}
+      </div>
+
+      <Routes>
+        <Route path="/" element={<div className='content'>          
+          <List
+            lightMode={lightMode} 
+            SetLoader={SetLoader} 
+            data={filteredData} 
+            tags={tags} 
+            reFetch={fetchData} 
+          />
         </div>} />
 
         <Route path="tags/:tagId" element={<Tags
@@ -168,7 +171,6 @@ function App() {
           tags={tags} 
           reFetch={fetchData}
         />} />        
-        
       </Routes>
     </div>
   );

src/componets/SideBar.js

@@ -16,9 +16,9 @@ const SideBar = ({ tags, handleToggleSidebar, toggle }) => {
     <SidebarContent className='sidebar-content'>
         <Menu iconShape="circle">
             
-            <MenuItem><Link to="/"><h3>View All</h3></Link></MenuItem>
+            <MenuItem><Link to="/"><h3>Show Everything</h3></Link></MenuItem>
             
-            <SubMenu title='Tags'>                
+            <SubMenu icon='#' defaultOpen={true} title='Tags'>                
                 {tags.map((e, i) => {
                     const path = `/tags/${e}`
                     return <MenuItem key={i}><Link to={path}>{e}</Link></MenuItem>

src/routes/Tags.js

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

src/styles/App.css

@@ -23,11 +23,9 @@
 
 .App {
   min-height: 100vh;
-  display: flex;
 }
 
 .content {
-  width: 100%;
   padding: 20px;
 }