From a21fe88c49e86196c53e355a0b0fc0514ec3d937 Mon Sep 17 00:00:00 2001
From: Andrei Pristavu <andrew@andrew.ro>
Date: Sun, 2 Mar 2025 20:32:44 +0200
Subject: [PATCH 1/2] fix: sidebar open position

This update aligns the vue-starter-kit with react-starter-kit regarding the sidebar dropdown
---
 resources/js/components/NavUser.vue | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/resources/js/components/NavUser.vue b/resources/js/components/NavUser.vue
index e92bc04e..c0aa5dd8 100644
--- a/resources/js/components/NavUser.vue
+++ b/resources/js/components/NavUser.vue
@@ -1,7 +1,7 @@
 <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';
@@ -9,6 +9,7 @@ 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>

From c57c82f64e153f3c96f9216b785d10bad46881d3 Mon Sep 17 00:00:00 2001
From: Taylor Otwell <taylor@laravel.com>
Date: Wed, 12 Mar 2025 11:46:12 -0500
Subject: [PATCH 2/2] Update NavUser.vue

---
 resources/js/components/NavUser.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/resources/js/components/NavUser.vue b/resources/js/components/NavUser.vue
index c0aa5dd8..65dff773 100644
--- a/resources/js/components/NavUser.vue
+++ b/resources/js/components/NavUser.vue
@@ -27,7 +27,7 @@ const { isMobile, state } = useSidebar();
                     :side="isMobile ? 'bottom' : state === 'collapsed' ? 'left' : 'bottom'"
                     align="end" 
                     :side-offset="4"
-                    >
+                >
                     <UserMenuContent :user="user" />
                 </DropdownMenuContent>
             </DropdownMenu>