Move user menu to sidebar, fixes #35

resources/js/components/UserMenuContent.vue

@@ -1,45 +1,43 @@
 <script setup lang="ts">
-import UserInfo from '@/components/UserInfo.vue';
 import { DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator } from '@/components/ui/dropdown-menu';
 import { logout } from '@/routes';
 import { edit } from '@/routes/profile';
-import type { User } from '@/types';
 import { Link, router } from '@inertiajs/vue3';
-import { LogOut, Settings } from 'lucide-vue-next';
+import { LogOut, Settings, User } from 'lucide-vue-next';
 import axios from 'axios';
-
-interface Props {
-    user: User;
-}
+import { Kbd, KbdGroup } from '@/components/ui/kbd';
 
 const handleLogout = () => {
     router.flushAll();
     localStorage.removeItem('sanctum_token');
     delete axios.defaults.headers.common['Authorization'];
 };
-
-defineProps<Props>();
 </script>
 
 <template>
-    <DropdownMenuLabel class="p-0 font-normal">
-        <div class="flex items-center gap-2 px-1 py-1.5 text-left text-sm">
-            <UserInfo :user="user" :show-email="true" />
-        </div>
-    </DropdownMenuLabel>
-    <DropdownMenuSeparator />
     <DropdownMenuGroup>
-        <DropdownMenuItem :as-child="true">
-            <Link class="block w-full" :href="edit()" prefetch as="button">
-            <Settings class="mr-2 h-4 w-4" />
-            Settings
+
+        <DropdownMenuItem as-child>
+            <Link :href="edit()" prefetch class="flex items-center justify-between">
+            <div class="flex items-center gap-3">
+                <Settings stroke-width="1.5" />
+                <span class="mr-4">Einstellungen</span>
+            </div>
+            <KbdGroup>
+                <Kbd class="visible-mac">⌘</Kbd>
+                <Kbd class="visible-pc">Ctrl</Kbd>
+                <Kbd>,</Kbd>
+            </KbdGroup>
             </Link>
         </DropdownMenuItem>
+
     </DropdownMenuGroup>
+
     <DropdownMenuSeparator />
-    <DropdownMenuItem :as-child="true">
+
+    <DropdownMenuItem as-child>
         <Link class="block w-full" :href="logout()" @click="handleLogout" as="button" data-test="logout-button">
-        <LogOut class="mr-2 h-4 w-4" />
+        <LogOut stroke-width="1.5" class="mr-2 h-4 w-4" />
         Log out
         </Link>
     </DropdownMenuItem>