illusory-iotam/apps/frontend/src/lib/components/nav-user.svelte

<script lang="ts">
    import * as Avatar from "$lib/components/ui/avatar/index.js";
    import * as DropdownMenu from "$lib/components/ui/dropdown-menu/index.js";
    import * as Sidebar from "$lib/components/ui/sidebar/index.js";
    import { useSidebar } from "$lib/components/ui/sidebar/index.js";
    import { secondaryNavTree } from "$lib/core/constants";
    import { sessionsVM } from "$lib/domains/account/sessions/sessions.vm.svelte";
    import { user as userStore } from "$lib/global.stores";
    import { type User } from "@pkg/logic/domains/user/data";
    import { resetMode, setMode } from "mode-watcher";
    import ChevronsUpDown from "~icons/lucide/chevrons-up-down";
    import LogOut from "~icons/lucide/log-out";
    import Monitor from "~icons/lucide/monitor";
    import Moon from "~icons/lucide/moon";
    import Sun from "~icons/lucide/sun";

    const sidebar = useSidebar();

    let user = $state({
        name: "",
        email: "",
        image: "",
        ...($userStore || {}),
    } as any as User);

    userStore.subscribe((value) => {
        if (value) {
            user = value;
        }
        if (user.name.length < 2) {
            // @ts-ignore
            user.name = "User";
        }
    });

    $inspect(user);

    async function logoutUser() {
        await sessionsVM.logout();
    }
</script>

<Sidebar.Menu>
    <Sidebar.MenuItem>
        <DropdownMenu.Root>
            <DropdownMenu.Trigger>
                {#snippet child({ props })}
                    <Sidebar.MenuButton
                        size="lg"
                        class="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
                        {...props}
                    >
                        <Avatar.Root class="h-8 w-8 rounded-lg">
                            <Avatar.Image src={user.image} alt={user.name} />
                            <Avatar.Fallback class="rounded-lg">
                                {user.name.slice(0, 2).toUpperCase()}
                            </Avatar.Fallback>
                        </Avatar.Root>
                        <div
                            class="grid flex-1 text-left text-sm leading-tight"
                        >
                            <span class="truncate font-semibold"
                                >{user.name}</span
                            >
                            <span class="truncate text-xs">{user.email}</span>
                        </div>
                        <ChevronsUpDown class="ml-auto size-4" />
                    </Sidebar.MenuButton>
                {/snippet}
            </DropdownMenu.Trigger>
            <DropdownMenu.Content
                class="w-[var(--bits-dropdown-menu-anchor-width)] min-w-56 rounded-lg"
                side={sidebar.isMobile ? "bottom" : "right"}
                align="end"
                sideOffset={4}
            >
                <DropdownMenu.Label class="p-0 font-normal">
                    <div
                        class="flex items-center gap-2 px-1 py-1.5 text-left text-sm"
                    >
                        <Avatar.Root class="h-8 w-8 rounded-lg">
                            <Avatar.Image src={user.image} alt={user.name} />
                            <Avatar.Fallback class="rounded-lg">
                                {user.name.slice(0, 2).toUpperCase()}
                            </Avatar.Fallback>
                        </Avatar.Root>
                        <div
                            class="grid flex-1 text-left text-sm leading-tight"
                        >
                            <span class="truncate font-semibold"
                                >{user.name}</span
                            >
                            <span class="truncate text-xs">{user.email}</span>
                        </div>
                    </div>
                </DropdownMenu.Label>
                <DropdownMenu.Separator />

                <DropdownMenu.Group>
                    {#each secondaryNavTree as item (item.title)}
                        <DropdownMenu.Item>
                            <a
                                href={item.url}
                                class="flex h-full w-full items-center gap-2"
                            >
                                <item.icon />
                                <span>{item.title}</span>
                            </a>
                        </DropdownMenu.Item>
                    {/each}
                </DropdownMenu.Group>

                <DropdownMenu.Separator />

                <!-- Theme switcher section -->
                <DropdownMenu.Sub>
                    <DropdownMenu.SubTrigger>
                        <Sun
                            class="h-4 w-4 scale-100 rotate-0 transition-all dark:scale-0 dark:-rotate-90"
                        />
                        <Moon
                            class="absolute h-4 w-4 scale-0 rotate-90 transition-all dark:scale-100 dark:rotate-0"
                        />
                        <span>Theme</span>
                    </DropdownMenu.SubTrigger>
                    <DropdownMenu.SubContent>
                        <DropdownMenu.Item onclick={() => setMode("light")}>
                            <Sun class="mr-2 h-4 w-4" />
                            <span>Light</span>
                        </DropdownMenu.Item>
                        <DropdownMenu.Item onclick={() => setMode("dark")}>
                            <Moon class="mr-2 h-4 w-4" />
                            <span>Dark</span>
                        </DropdownMenu.Item>
                        <DropdownMenu.Item onclick={() => resetMode()}>
                            <Monitor class="mr-2 h-4 w-4" />
                            <span>System</span>
                        </DropdownMenu.Item>
                    </DropdownMenu.SubContent>
                </DropdownMenu.Sub>

                <DropdownMenu.Separator />
                <DropdownMenu.Item onclick={() => logoutUser()}>
                    <LogOut />
                    Log out
                </DropdownMenu.Item>
            </DropdownMenu.Content>
        </DropdownMenu.Root>
    </Sidebar.MenuItem>
</Sidebar.Menu>