# All files / js/components UserMenuContent.vue

0% Statements 0/26
0% Branches 0/10
0% Functions 0/15
0% Lines 0/24

Press n or j to go to the next uncovered block, b, p or k for the previous block.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107

     <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, X } from 'lucide-vue-next';
    import { useRecentlyViewed } from '@/composables/useRecentlyViewed';
    import { computed } from 'vue';

    interface Props {
        user: User | null;
    }

    const props = defineProps<Props>();

    const { items, removeItem } = useRecentlyViewed();

    const recentlyViewedItems = computed(() => items.value.slice(0, 5)); // Show max 5 items

    const handleLogout = () => {
        router.flushAll();
    };

    const handleRemoveItem = (event: MouseEvent, url: string) => {
        event.preventDefault();
        event.stopPropagation();
        removeItem(url);
    };
    </script>

    <template>
        <template v-if="user">
            <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 />
            <template v-if="recentlyViewedItems.length > 0">
                <DropdownMenuGroup>
                    <DropdownMenuLabel class="px-2 py-1.5 text-xs font-semibold text-muted-foreground">
                        Recently Viewed
                    </DropdownMenuLabel>
                    <DropdownMenuItem
                        v-for="item in recentlyViewedItems"
                        :key="item.url"
                        :as-child="true"
                        class="group"
                    >
                        <Link
                            class="flex w-full items-center justify-between gap-2"
                            :href="item.url"
                            prefetch
                            as="button"
                        >
                            <div class="flex items-center gap-2 min-w-0 flex-1">
                                <component
                                    v-if="item.icon"
                                    :is="item.icon"
                                    class="h-4 w-4 shrink-0 text-muted-foreground"
                                />
                                <span class="truncate text-sm">{{ item.title }}</span>
                            </div>
                            <button
                                type="button"
                                class="ml-2 shrink-0 opacity-0 transition-opacity group-hover:opacity-100"
                                @click.stop="handleRemoveItem($event, item.url)"
                                title="Remove from recently viewed"
                            >
                                <X class="h-3 w-3 text-muted-foreground hover:text-foreground" />
                            </button>
                        </Link>
                    </DropdownMenuItem>
                </DropdownMenuGroup>
                <DropdownMenuSeparator />
            </template>
            <DropdownMenuGroup>
                <DropdownMenuItem :as-child="true">
                    <Link class="block w-full" :href="edit()" prefetch as="button">
                        <Settings class="mr-2 h-4 w-4" />
                        Settings
                    </Link>
                </DropdownMenuItem>
            </DropdownMenuGroup>
            <DropdownMenuSeparator />
            <DropdownMenuItem :as-child="true">
                <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>
        </template>
    </template>