Basic Laravel project

resources/js/components/NavUser.vue

@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import UserInfo from '@/components/UserInfo.vue';
+import { DropdownMenu, DropdownMenuContent, DropdownMenuTrigger } from '@/components/ui/dropdown-menu';
+import { SidebarMenu, SidebarMenuButton, SidebarMenuItem, useSidebar } from '@/components/ui/sidebar';
+import { type User } from '@/types';
+import { usePage } from '@inertiajs/vue3';
+import { ChevronUp } from 'lucide-vue-next';
+import UserMenuContent from './UserMenuContent.vue';
+
+const page = usePage();
+const user = page.props.auth.user as User;
+const { isMobile, state } = useSidebar();
+</script>
+
+<template>
+    <SidebarMenu>
+        <SidebarMenuItem>
+            <DropdownMenu>
+                <DropdownMenuTrigger as-child>
+                    <SidebarMenuButton size="lg" class="group data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground">
+                        <UserInfo :user="user" />
+                        <ChevronUp class="transition group-data-[state=open]:rotate-180 ml-auto size-4" data-icon />
+                    </SidebarMenuButton>
+                </DropdownMenuTrigger>
+                <DropdownMenuContent
+                    class="w-(--reka-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>
+        </SidebarMenuItem>
+    </SidebarMenu>
+</template>