Move user menu to sidebar, fixes #35

resources/js/components/NavFooter.vue

@@ -1,32 +1,36 @@
 <script setup lang="ts">
 import { SidebarGroup, SidebarGroupContent, SidebarMenu, SidebarMenuButton, SidebarMenuItem } from '@/components/ui/sidebar';
-import { toUrl } from '@/lib/utils';
-import { type NavItem } from '@/types';
-import { Link } from '@inertiajs/vue3';
+import { User } from '@/types';
+import { defineProps } from 'vue';
+import UserInfo from '@/components/UserInfo.vue';
+import { DropdownMenu, DropdownMenuContent, DropdownMenuTrigger } from '@/components/ui/dropdown-menu';
+import UserMenuContent from '@/components/UserMenuContent.vue';
 
-interface Props {
-    items: NavItem[];
+const props = defineProps<{
+    user: User;
     class?: string;
-}
+}>()
 
-defineProps<Props>();
 </script>
 
 <template>
-    <SidebarGroup :class="`group-data-[collapsible=icon]:p-0 ${$props.class || ''}`">
+    <SidebarGroup class="p-0">
         <SidebarGroupContent>
             <SidebarMenu>
-                <SidebarMenuItem v-for="item in items" :key="item.title">
-                    <SidebarMenuButton
-                        class="text-neutral-600 hover:text-neutral-800 dark:text-neutral-300 dark:hover:text-neutral-100"
-                        as-child>
-                        <Link :href="item.href">
-                        <component :is="item.icon" :class="item.color" stroke-width="1.5" />
-                        <span>{{ item.title }}</span>
-                        </Link>
-                    </SidebarMenuButton>
-                </SidebarMenuItem>
+                <DropdownMenu>
+                    <DropdownMenuTrigger as-child>
+                        <SidebarMenuItem>
+                            <SidebarMenuButton
+                                class="pl-0 rounded-[1rem_var(--radius-md)_var(--radius-md)_1rem] group-data-[state=collapsed]:rounded-full">
+                                <UserInfo :user="props.user" />
+                            </SidebarMenuButton>
+                        </SidebarMenuItem>
+                    </DropdownMenuTrigger>
+                    <DropdownMenuContent align="start">
+                        <UserMenuContent />
+                    </DropdownMenuContent>
+                </DropdownMenu>
             </SidebarMenu>
         </SidebarGroupContent>
     </SidebarGroup>
-</template>
+</template>