409/warren
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

create frontend directory

Browse Source
This commit is contained in:
Shawn
2025-07-11 23:55:46 +02:00
parent c281b9a673
commit dba7a8b0e8
110 changed files with 0 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

111
frontend/components/SidebarUser.vue Normal file
View File

@@ -0,0 +1,111 @@
<script setup lang="ts">
import {
SidebarMenu,
SidebarMenuItem,
SidebarMenuButton,
useSidebar,
} from '@/components/ui/sidebar';
import {
DropdownMenu,
DropdownMenuTrigger,
DropdownMenuContent,
DropdownMenuLabel,
} from '@/components/ui/dropdown-menu';
import { Avatar, AvatarImage, AvatarFallback } from '@/components/ui/avatar';
const { isMobile } = useSidebar();
const user = {
name: '409',
email: 'user@example.com',
avatar: 'https://cdn.discordapp.com/avatars/285424924049276939/0368b00056c416cae689ab1434c0aac0.webp',
};
</script>
<template>
<SidebarMenu>
<SidebarMenuItem>
<DropdownMenu>
<DropdownMenuTrigger as-child>
<SidebarMenuButton
size="lg"
class="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
tooltip="Settings"
>
<Avatar class="h-8 w-8 rounded-lg">
<AvatarImage :src="user.avatar" />
<AvatarFallback class="rounded-lg"
>A</AvatarFallback
>
</Avatar>
<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>
<Icon
name="lucide:chevrons-up-down"
class="ml-auto size-4"
/>
</SidebarMenuButton>
</DropdownMenuTrigger>
<DropdownMenuContent
class="w-[--reka-dropdown-menu-trigger-width] min-w-56 rounded-lg"
align="end"
:side="isMobile ? 'bottom' : 'right'"
:side-offset="4"
>
<DropdownMenuLabel class="p-0 font-normal">
<div
class="flex items-center gap-2 px-1 py-1.5 text-left text-sm"
>
<Avatar class="h-8 w-8 rounded-lg">
<AvatarImage
:src="user.avatar"
:alt="user.name"
/>
<AvatarFallback class="rounded-lg">
CN
</AvatarFallback>
</Avatar>
<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>
</DropdownMenuLabel>
<DropdownMenuSeparator />
<DropdownMenuGroup>
<DropdownMenuItem>
<Icon name="lucide:user" />
Account
</DropdownMenuItem>
</DropdownMenuGroup>
<DropdownMenuSeparator />
<DropdownMenuGroup>
<DropdownMenuItem>
<Icon name="lucide:settings" />
Settings
</DropdownMenuItem>
</DropdownMenuGroup>
<DropdownMenuSeparator />
<DropdownMenuItem>
<Icon name="lucide:door-open" />
Log out
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
</SidebarMenuItem>
</SidebarMenu>
</template>