Caramel-CRM/resources/js/components/UserMenuContent.vue

<script setup lang="ts">
import { DropdownMenuGroup, DropdownMenuItem, DropdownMenuSeparator } from '@/components/ui/dropdown-menu';
import { logout } from '@/routes';
import { edit } from '@/routes/profile';
import { proceduralDocumentation } from '@/routes';
import { Link, router } from '@inertiajs/vue3';
import { Book, LogOut, Settings } from 'lucide-vue-next';
import axios from 'axios';
import { Kbd, KbdGroup } from '@/components/ui/kbd';

const handleLogout = () => {
    router.flushAll();
    localStorage.removeItem('sanctum_token');
    delete axios.defaults.headers.common['Authorization'];
};
</script>

<template>
    <DropdownMenuGroup>

        <DropdownMenuItem as-child>
            <Link :href="edit()" prefetch class="flex items-center justify-between">
            <div class="flex items-center gap-3">
                <Settings  />
                <span class="mr-4">Einstellungen</span>
            </div>
            <KbdGroup>
                <Kbd class="visible-mac">⌘</Kbd>
                <Kbd class="visible-pc">Ctrl</Kbd>
                <Kbd>,</Kbd>
            </KbdGroup>
            </Link>
        </DropdownMenuItem>

        <DropdownMenuItem as-child>
            <Link :href="proceduralDocumentation()" prefetch class="flex items-center justify-between">
            <div class="flex items-center gap-3">
                <Book  />
                <span class="mr-4">Verfahrensdokumentation</span>
            </div>
            </Link>
        </DropdownMenuItem>


        <DropdownMenuSeparator />

        <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" />
            Log out
            </Link>
        </DropdownMenuItem>
        
    </DropdownMenuGroup>
</template>