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

<script setup lang="ts">
import { DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator } from '@/components/ui/dropdown-menu';
import { logout } from '@/routes';
import { edit } from '@/routes/profile';
import { Link, router } from '@inertiajs/vue3';
import { LogOut, Settings, User } 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 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>
        <Link class="block w-full" :href="logout()" @click="handleLogout" as="button" data-test="logout-button">
        <LogOut stroke-width="1.5" class="mr-2 h-4 w-4" />
        Log out
        </Link>
    </DropdownMenuItem>
</template>