Finished sidebar functionality.

src/App.js

@@ -111,20 +111,50 @@ 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>
+
+        {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>
+            
+        {numberOfResults === 0 ? <NoResults /> : 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}
+
+        {newBox ? <AddItem 
+          SetLoader={SetLoader}
+          onExit={exitAdding} 
+          reFetch={fetchData} 
+          lightMode={lightMode}
+          tags={() => tags} 
+        /> : null}
+
+        {loader ? <Loader lightMode={lightMode} /> : null}
+      </div>
+
       <Routes>
-        <Route path="/" element={<div className='content'>
+        <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}
-
-          <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} 
@@ -132,33 +162,6 @@ function App() {
             tags={tags} 
             reFetch={fetchData} 
           />
-
-          {numberOfResults === 0 ? <NoResults /> : 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}
-
-          {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
@@ -167,8 +170,7 @@ function App() {
           data={filteredData} 
           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;
 }