From 79966db251d30a02807e13b2a933832eab1acb96 Mon Sep 17 00:00:00 2001
From: Pablo Lara <larabjj@gmail.com>
Date: Thu, 11 Jul 2024 15:31:24 +0200
Subject: [PATCH] feat(sidebar): add state persistence using localStorage

---
 app/layout.tsx                     |  8 +++-----
 components/sidebar/SidebarWrap.tsx | 24 ++++++++++++++++++++----
 2 files changed, 23 insertions(+), 9 deletions(-)

diff --git a/app/layout.tsx b/app/layout.tsx
index 074a962755..c414a0bf59 100644
--- a/app/layout.tsx
+++ b/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>
diff --git a/components/sidebar/SidebarWrap.tsx b/components/sidebar/SidebarWrap.tsx
index 533b1819fc..81f2e195aa 100644
--- a/components/sidebar/SidebarWrap.tsx
+++ b/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(