sidebar with hardcoded values

src/App.css

@@ -12,6 +12,7 @@
   justify-content: space-between;
   align-items: baseline;
   width: 100%;
+  height: 5rem;
   border-bottom: 1px solid black;
 }
 
@@ -36,3 +37,29 @@
   flex-direction: column;
   align-items: center;
 }
+
+.sidebar {
+  display: flex;
+  flex-direction: column;
+  width: 12rem;
+  position: fixed;
+  background-color: black;
+  color: white;
+  right: 0;
+  top: 5rem;
+  padding: 1.5rem;
+  transition: right 0.6s ease-out;
+}
+
+.sidebar-hidden {
+  display: flex;
+  flex-direction: column;
+  width: 12rem;
+  position: fixed;
+  background-color: black;
+  color: white;
+  right: -15rem;
+  top: 5rem;
+  padding: 1.5rem;
+  transition: right 0.6s ease-out;
+}

src/features/navbar/Navbar.js

@@ -1,13 +1,24 @@
-import React from "react";
+import React, { useState } from "react";
 import SearchBar from "../searchBar/searchBar";
-import './Navbar.css';
+import Sidebar from "../sidebar/Sidebar";
 
 export default function Navbar() {
+    const [collapsed, setCollapsed] = useState(true);
+
+    const handleCollapse = () => {
+        setCollapsed(!collapsed);
+    }
+
     return (
+        <>
         <div className="navbar">
             <h1>Reddit but it's all cats</h1>
             <SearchBar />
-            <p>Expand sidebar here</p>
+            <button onClick={handleCollapse}>Sidebar</button>
         </div>
+        <div className="sidebar-container">
+            <Sidebar isCollapsed={collapsed} />
+        </div>
+        </>
     )
 }

src/features/searchBar/searchBar.js

@@ -9,17 +9,11 @@ export default function SearchBar() {
     }
 
     useEffect(() => {
-        let isSearching = true;
-        
         if (term) {
             // dispatch an action which filters content by {term}
         } else {
             return;
         }
-
-        return () => {
-            isSearching = false;
-        }
     }, [term])
 
     return (

src/features/sidebar/Sidebar.js

@@ -0,0 +1,12 @@
+import React from "react";
+
+export default function Sidebar({isCollapsed}) {
+    return (
+        <div className={isCollapsed ? 'sidebar-hidden' : 'sidebar'}>
+            <p>Hard coded subreddit</p>
+            <p>Hard coded subreddit</p>
+            <p>Hard coded subreddit</p>
+            <p>Hard coded subreddit</p>
+        </div>
+    );
+}