fix: resolve sidebar collapse white screen and state persistence

Author: VasuS609

frontend/src/components/Navigation/Sidebar/AppSidebar.tsx

@@ -27,26 +27,13 @@ import { Button } from '@/components/ui/button';
 import {
   Tooltip,
   TooltipContent,
-  TooltipProvider,
   TooltipTrigger,
 } from '@/components/ui/tooltip';
 
 export function AppSidebar() {
   const location = useLocation();
   const [version, setVersion] = useState<string>('1.0.0');
-  const { open, setOpen, toggleSidebar } = useSidebar();
-
-  useEffect(() => {
-    const savedState = localStorage.getItem('sidebar-open');
-    if (savedState !== null) {
-      const shouldBeOpen = savedState === 'true';
-      setOpen(shouldBeOpen);
-    }
-  }, [setOpen]);
-
-  useEffect(() => {
-    localStorage.setItem('sidebar-open', String(open));
-  }, [open]);
+  const { open, toggleSidebar } = useSidebar();
 
   useEffect(() => {
     getVersion().then((version) => {
@@ -125,27 +112,25 @@ export function AppSidebar() {
           <div
             className={`flex transition-all duration-300 ${open ? 'justify-end px-4' : 'justify-center'}`}
           >
-            <TooltipProvider>
-              <Tooltip>
-                <TooltipTrigger asChild>
-                  <Button
-                    variant="ghost"
-                    size="icon"
-                    onClick={toggleSidebar}
-                    className="hover:bg-accent h-8 w-8 transition-transform duration-300 ease-in-out"
-                  >
-                    <ChevronLeft
-                      className={`h-5 w-5 transition-transform duration-300 ease-in-out ${
-                        !open ? 'rotate-180' : ''
-                      }`}
-                    />
-                  </Button>
-                </TooltipTrigger>
-                <TooltipContent side="right">
-                  <p>{open ? 'Collapse sidebar' : 'Expand sidebar'}</p>
-                </TooltipContent>
-              </Tooltip>
-            </TooltipProvider>
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <Button
+                  variant="ghost"
+                  size="icon"
+                  onClick={toggleSidebar}
+                  className="hover:bg-accent h-8 w-8 transition-transform duration-300 ease-in-out"
+                >
+                  <ChevronLeft
+                    className={`h-5 w-5 transition-transform duration-300 ease-in-out ${
+                      !open ? 'rotate-180' : ''
+                    }`}
+                  />
+                </Button>
+              </TooltipTrigger>
+              <TooltipContent side="right">
+                <p>{open ? 'Collapse sidebar' : 'Expand sidebar'}</p>
+              </TooltipContent>
+            </Tooltip>
           </div>
         </div>
       </SidebarFooter>

frontend/src/components/ui/sidebar.tsx

@@ -68,9 +68,22 @@ function SidebarProvider({
   const [openMobile, setOpenMobile] = React.useState(false);
 
   // This is the internal state of the sidebar.
-  // We use openProp and setOpenProp for control from outside the component.
   const [_open, _setOpen] = React.useState(defaultOpen);
   const open = openProp ?? _open;
+
+  // Restore sidebar state from cookie on mount
+  React.useEffect(() => {
+    try {
+      const cookies = document.cookie.split('; ').find(row => row.startsWith(SIDEBAR_COOKIE_NAME + '='));
+      if (cookies) {
+        const savedState = cookies.split('=')[1] === 'true';
+        _setOpen(savedState);
+      }
+    } catch {
+      // Ignore cookie errors
+    }
+  }, []);
+
   const setOpen = React.useCallback(
     (value: boolean | ((value: boolean) => boolean)) => {
       const openState = typeof value === 'function' ? value(open) : value;
@@ -81,7 +94,11 @@ function SidebarProvider({
       }
 
       // This sets the cookie to keep the sidebar state.
-      document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`;
+      try {
+        document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`;
+      } catch {
+      
+      }
     },
     [setOpenProp, open],
   );
@@ -107,8 +124,7 @@ function SidebarProvider({
     return () => window.removeEventListener('keydown', handleKeyDown);
   }, [toggleSidebar]);
 
-  // We add a state so that we can do data-state="expanded" or "collapsed".
-  // This makes it easier to style the sidebar with Tailwind classes.
+  
   const state = open ? 'expanded' : 'collapsed';
 
   const contextValue = React.useMemo<SidebarContextProps>(
@@ -231,7 +247,7 @@ function Sidebar({
           side === 'left'
             ? 'left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]'
             : 'right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]',
-          // Adjust the padding for floating and inset variants.
+     
           variant === 'floating' || variant === 'inset'
             ? 'p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]'
             : 'group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l',
@@ -425,7 +441,7 @@ function SidebarGroupAction({
       data-sidebar="group-action"
       className={cn(
         'text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground absolute top-3.5 right-3 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-hidden transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',
-        // Increases the hit area of the button on mobile.
+        
         'after:absolute after:-inset-2 md:after:hidden',
         'group-data-[collapsible=icon]:hidden',
         className,
@@ -560,7 +576,7 @@ function SidebarMenuAction({
       data-sidebar="menu-action"
       className={cn(
         'text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground peer-hover/menu-button:text-sidebar-accent-foreground absolute top-1.5 right-1 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-hidden transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',
-        // Increases the hit area of the button on mobile.
+      
         'after:absolute after:-inset-2 md:after:hidden',
         'peer-data-[size=sm]/menu-button:top-1',
         'peer-data-[size=default]/menu-button:top-1.5',
@@ -604,7 +620,7 @@ function SidebarMenuSkeleton({
 }: React.ComponentProps<'div'> & {
   showIcon?: boolean;
 }) {
-  // Random width between 50 to 90%.
+
   const width = React.useMemo(() => {
     return `${Math.floor(Math.random() * 40) + 50}%`;
   }, []);