src/App.css

@@ -97,7 +97,7 @@
 .sidebar {
   display: flex;
   flex-direction: column;
-  width: 12rem;
+  width: 13.5rem;
   position: fixed;
   background-color: black;
   color: white;

src/features/sidebar/Sidebar.css

@@ -20,6 +20,14 @@
     margin: 0.8rem 0;
 }
 
+.individual-sub button {
+    margin-right: 1rem;
+}
+
+.individual-sub label {
+    text-align: right;
+}
+
 .search-sub-input {
     margin-top: 2rem;
 }

src/features/sidebar/SidebarItem.js

@@ -1,23 +1,17 @@
-import React, { useState } from "react";
-// import { useDispatch } from "react-redux";
-// import { updateSubVisibility } from "../reddit/redditSlice";
+import React, { useEffect, useRef, useState } from "react";
+import { useDispatch } from "react-redux";
+import { updateSubVisibility } from "../reddit/redditSlice";
 
 export default function SidebarItem({sub}) {
-    const [visible, setVisible] = useState('hide');     // dispatch will be used to dispatch updateSubVisibility on change in state
-    // const dispatch = useDispatch();                  // this will likely be within a useEffect hook
+    const dispatch = useDispatch();
 
-    const handleClick = () => {
-        if (visible === 'hide') {
-            setVisible('show');
-        } else if (visible === 'show') {
-            setVisible('hide');
-        }
+    const handleClick = () => {    
+        dispatch(updateSubVisibility(sub));
     }
 
     return (
         <div className="individual-sub">
-            {/* <input type="checkbox" id={sub} checked={checked} onChange={handleClick}></input> */}
-            <button id={sub} onClick={handleClick}>{visible}</button>
+            <button id={sub} onClick={handleClick}>toggle</button>
             <label id={sub}>{sub}</label>
         </div>
     );