fix: restore focus to sidebar toggle button and prevent focus flicker on mobile drawer close

Author: munlicode

apps/web/app/components/layout/AppSidebar.tsx

@@ -131,7 +131,13 @@ export function AppSidebar({ isOpen = true, onOpenChange }: AppSidebarProps) {
   if (isMobile) {
     return (
       <Drawer open={isOpen} onOpenChange={onOpenChange} direction="left">
-        <DrawerContent className="bg-background rounded-none border-none p-0 data-[vaul-drawer-direction=left]:w-72">
+        <DrawerContent
+          className="bg-background rounded-none border-none p-0 data-[vaul-drawer-direction=left]:w-72"
+          onCloseAutoFocus={(e) => {
+            e.preventDefault();
+            document.getElementById("sidebar-toggle-button")?.focus();
+          }}
+        >
           <DrawerTitle className="sr-only">Navigation Menu</DrawerTitle>
           <DrawerDescription className="sr-only">
             Main application navigation links

apps/web/app/components/layout/SidebarToggle.tsx

@@ -1,21 +1,29 @@
 import { PanelLeftIcon } from "lucide-react";
-import { Button, cn } from "@kreozalabs/kei-ui";
+import { Button, cn, useIsMobile } from "@kreozalabs/kei-ui";
 
 interface SidebarToggleProps {
   onClick?: () => void;
   className?: string;
 }
 
 export function SidebarToggle({ onClick, className }: SidebarToggleProps) {
+  const isMobile = useIsMobile();
+
   return (
     <Button
       variant="ghost"
       size="icon"
+      id="sidebar-toggle-button"
       className={cn(
         "hover:bg-muted/80 text-muted-foreground/40 hover:text-foreground size-8 rounded-lg border-none transition-all active:scale-90",
         className
       )}
-      onClick={onClick}
+      onClick={(e) => {
+        if (isMobile) {
+          e.currentTarget.blur();
+        }
+        onClick?.();
+      }}
       title="Toggle Sidebar (Ctrl+B)"
     >
       <PanelLeftIcon className="size-5" />