fixing the navigation in the user dropdown

Author: tnylea

resources/js/components/app-header.tsx

@@ -27,6 +27,7 @@ import {
     Sheet,
     SheetContent,
     SheetHeader,
+    SheetTitle,
     SheetTrigger,
 } from "@/components/ui/sheet"
 import { type SharedData } from '@/types';
@@ -80,6 +81,7 @@ export function AppHeader({ breadcrumbs = [] }: AppHeaderProps) {
                             </Button>
                         </SheetTrigger>
                         <SheetContent side="left" className="bg-neutral-50 h-full flex flex-col items-stretch w-64">
+                            <SheetTitle className="sr-only">Navigation Menu</SheetTitle>
                             <SheetHeader className="text-left flex justify-start">
                                 <AppLogoIcon className="h-6 w-6 fill-current text-black dark:text-white" />
                             </SheetHeader>

resources/js/components/delete-user.tsx

@@ -49,14 +49,12 @@ export default function DeleteUser() {
                         <Button variant="destructive">Delete account</Button>
                     </DialogTrigger>
                     <DialogContent>
+                        <DialogTitle>Are you sure you want to delete your account?</DialogTitle>
+                        <DialogDescription>
+                            Once your account is deleted, all of its resources and data will also be permanently deleted. Please enter your
+                            password to confirm you would like to permanently delete your account.
+                        </DialogDescription>
                         <form className="space-y-6" onSubmit={deleteUser}>
-                            <DialogHeader className="space-y-3">
-                                <DialogTitle>Are you sure you want to delete your account?</DialogTitle>
-                                <DialogDescription>
-                                    Once your account is deleted, all of its resources and data will also be permanently deleted. Please enter your
-                                    password to confirm you would like to permanently delete your account.
-                                </DialogDescription>
-                            </DialogHeader>
                             <div className="grid gap-2">
                                 <Label htmlFor="password" className="sr-only">
                                     Password
@@ -70,6 +68,7 @@ export default function DeleteUser() {
                                     value={data.password}
                                     onChange={(e) => setData('password', e.target.value)}
                                     placeholder="Password"
+                                    autoComplete="current-password"
                                 />
 
                                 <InputError message={errors.password} />

resources/js/components/nav-user.tsx

@@ -15,10 +15,12 @@ import { UserMenuContent } from '@/components/user-menu-content';
 import { type SharedData } from '@/types';
 import { Link, usePage } from '@inertiajs/react';
 import { ChevronsUpDown, LogOut, Settings } from 'lucide-react';
+import { useIsMobile } from '@/hooks/use-mobile';
 
 export function NavUser() {
     const { auth } = usePage<SharedData>().props;
     const { state } = useSidebar();
+    const isMobile = useIsMobile();
 
     return (
         <SidebarMenu>
@@ -33,7 +35,7 @@ export function NavUser() {
                     <DropdownMenuContent 
                         className="w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg" 
                         align="end"
-                        side={state === 'collapsed' ? "left" : "bottom"}
+                        side={isMobile ? "bottom" : state === 'collapsed' ? "left" : "bottom"}
                     >
                         <UserMenuContent user={auth.user} />
                     </DropdownMenuContent>

resources/js/components/ui/sidebar.tsx

@@ -6,7 +6,7 @@ import * as React from 'react';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
 import { Separator } from '@/components/ui/separator';
-import { Sheet, SheetContent } from '@/components/ui/sheet';
+import { Sheet, SheetContent, SheetTitle } from '@/components/ui/sheet';
 import { Skeleton } from '@/components/ui/skeleton';
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
 import { useIsMobile } from '@/hooks/use-mobile';
@@ -75,6 +75,18 @@ const SidebarProvider = React.forwardRef<
         return isMobile ? setOpenMobile((open) => !open) : setOpen((open) => !open);
     }, [isMobile, setOpen, setOpenMobile]);
 
+    // Listen for mobile navigation events
+    React.useEffect(() => {
+        const handleMobileNavigation = () => {
+            if (isMobile) {
+                setOpenMobile(false);
+            }
+        };
+
+        window.addEventListener('mobile-navigation', handleMobileNavigation);
+        return () => window.removeEventListener('mobile-navigation', handleMobileNavigation);
+    }, [isMobile, setOpenMobile]);
+
     // Adds a keyboard shortcut to toggle the sidebar.
     React.useEffect(() => {
         const handleKeyDown = (event: KeyboardEvent) => {
@@ -160,6 +172,7 @@ const Sidebar = React.forwardRef<
                     }
                     side={side}
                 >
+                    <SheetTitle className="sr-only">Sidebar Navigation</SheetTitle>
                     <div className="flex h-full w-full flex-col">{children}</div>
                 </SheetContent>
             </Sheet>

resources/js/components/user-menu-content.tsx

@@ -8,12 +8,15 @@ import {
 } from "@/components/ui/dropdown-menu"
 import { Settings, LogOut } from 'lucide-react';
 import { type User } from '@/types';
+import { useMobileNavigation } from '@/hooks/use-mobile-navigation';
 
 interface UserMenuContentProps {
     user: User;
 }
 
 export function UserMenuContent({ user }: UserMenuContentProps) {
+    const cleanup = useMobileNavigation();
+
     return (
         <>
             <DropdownMenuLabel className="p-0 font-normal">
@@ -24,15 +27,27 @@ export function UserMenuContent({ user }: UserMenuContentProps) {
             <DropdownMenuSeparator />
             <DropdownMenuGroup>
                 <DropdownMenuItem asChild>
-                    <Link className="block w-full" href={route('profile.edit')} as="button" prefetch>
+                    <Link 
+                        className="block w-full" 
+                        href={route('profile.edit')} 
+                        as="button" 
+                        prefetch
+                        onClick={cleanup}
+                    >
                         <Settings className="mr-2" />
                         Settings
                     </Link>
                 </DropdownMenuItem>
             </DropdownMenuGroup>
             <DropdownMenuSeparator />
             <DropdownMenuItem asChild>
-                <Link className="block w-full" method="post" href={route('logout')} as="button">
+                <Link 
+                    className="block w-full" 
+                    method="post" 
+                    href={route('logout')} 
+                    as="button"
+                    onClick={cleanup}
+                >
                     <LogOut className="mr-2" />
                     Log out
                 </Link>

resources/js/hooks/use-mobile-navigation.ts

@@ -0,0 +1,15 @@
+import { useCallback } from 'react';
+
+export function useMobileNavigation() {
+    const cleanup = useCallback(() => {
+        // Remove pointer-events style from body
+        document.body.style.removeProperty('pointer-events');
+        // Find and click the close button of any open sheet
+        const closeButton = document.querySelector('[data-radix-collection-item]');
+        if (closeButton instanceof HTMLElement) {
+            closeButton.click();
+        }
+    }, []);
+
+    return cleanup;
+}

resources/js/lib/utils.ts

@@ -1,6 +1,14 @@
-import { clsx, type ClassValue } from 'clsx';
+import { type ClassValue, clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 
 export function cn(...inputs: ClassValue[]) {
     return twMerge(clsx(inputs));
 }
+
+export function cleanupMobileNavigation() {
+    // Remove pointer-events style from body
+    document.body.style.removeProperty('pointer-events');
+    
+    // Dispatch a custom event that the sidebar can listen to
+    window.dispatchEvent(new CustomEvent('mobile-navigation'));
+}