fix: sidebar dropdown open position (#71)

* fix: sidebar open position

This update aligns the vue-starter-kit with react-starter-kit regarding the sidebar dropdown

* Update NavUser.vue

---------

Co-authored-by: Taylor Otwell <[email protected]>

Author: pristavu

resources/js/components/NavUser.vue

@@ -1,14 +1,15 @@
 <script setup lang="ts">
 import UserInfo from '@/components/UserInfo.vue';
 import { DropdownMenu, DropdownMenuContent, DropdownMenuTrigger } from '@/components/ui/dropdown-menu';
-import { SidebarMenu, SidebarMenuButton, SidebarMenuItem } from '@/components/ui/sidebar';
+import { SidebarMenu, SidebarMenuButton, SidebarMenuItem, useSidebar } from '@/components/ui/sidebar';
 import { type SharedData, type User } from '@/types';
 import { usePage } from '@inertiajs/vue3';
 import { ChevronsUpDown } from 'lucide-vue-next';
 import UserMenuContent from './UserMenuContent.vue';
 
 const page = usePage<SharedData>();
 const user = page.props.auth.user as User;
+const { isMobile, state } = useSidebar();
 </script>
 
 <template>
@@ -21,7 +22,12 @@ const user = page.props.auth.user as User;
                         <ChevronsUpDown class="ml-auto size-4" />
                     </SidebarMenuButton>
                 </DropdownMenuTrigger>
-                <DropdownMenuContent class="w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg" side="bottom" align="end" :side-offset="4">
+                <DropdownMenuContent 
+                    class="w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg" 
+                    :side="isMobile ? 'bottom' : state === 'collapsed' ? 'left' : 'bottom'"
+                    align="end" 
+                    :side-offset="4"
+                >
                     <UserMenuContent :user="user" />
                 </DropdownMenuContent>
             </DropdownMenu>