feat(sidebar): add state persistence using localStorage

app/layout.tsx

@@ -43,11 +43,9 @@ export default function RootLayout({
         )}
       >
         <Providers themeProps={{ attribute: "class", defaultTheme: "dark" }}>
-          <div className="flex items-center dark h-screen justify-center overflow-hidden">
-            <div className="flex h-dvh w-full">
-              <SidebarWrap />
-              <main className="w-full flex-1 flex-col p-4">{children}</main>
-            </div>
+          <div className="flex items-center h-dvh w-full justify-center overflow-hidden">
+            <SidebarWrap />
+            <main className="w-full flex-1 flex-col p-4">{children}</main>
           </div>
         </Providers>
       </body>

components/sidebar/SidebarWrap.tsx

@@ -2,7 +2,7 @@
 
 import { Icon } from "@iconify/react";
 import { Button, ScrollShadow, Spacer, Tooltip } from "@nextui-org/react";
-import React from "react";
+import React, { useCallback, useEffect, useState } from "react";
 import { useMediaQuery } from "usehooks-ts";
 
 import { cn } from "@/utils/cn";
@@ -14,15 +14,31 @@ import { sectionItemsWithTeams } from "./SidebarItems";
 import UserAvatar from "./UserAvatar";
 
 export const SidebarWrap = () => {
-  const [isCollapsed, setIsCollapsed] = React.useState(false);
+  const [isCollapsed, setIsCollapsed] = useState(false);
+  const [isLoaded, setIsLoaded] = useState(false);
+
   const isMobile = useMediaQuery("(max-width: 768px)");
 
   const isCompact = isCollapsed || isMobile;
 
-  const onToggle = React.useCallback(() => {
-    setIsCollapsed((prev) => !prev);
+  useEffect(() => {
+    const savedState = localStorage.getItem("isCollapsed");
+    if (savedState !== null) {
+      setIsCollapsed(JSON.parse(savedState));
+    }
+    setIsLoaded(true);
   }, []);
 
+  const onToggle = useCallback(() => {
+    setIsCollapsed((prev) => {
+      const newState = !prev;
+      localStorage.setItem("isCollapsed", JSON.stringify(newState));
+      return newState;
+    });
+  }, []);
+
+  if (!isLoaded) return null;
+
   return (
     <div
       className={cn(