Quay/quay
1
1
Fork 0
Code Issues Pull Requests Actions Releases 1 Activity

Added dashboard page layout & sites overview

Browse Source
This commit is contained in:
KartoffelChips
2026-04-05 17:55:58 +02:00
parent 7bb7454d7f
commit a6f60a5a38
38 changed files with 2687 additions and 111 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/NavUser.tsx
+123
View File
@@ -0,0 +1,123 @@
import { useTheme } from './theme-provider';
import { SidebarMenu, SidebarMenuButton, SidebarMenuItem, useSidebar } from './ui/sidebar';
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuLabel,
DropdownMenuSeparator,
DropdownMenuTrigger,
} from './ui/dropdown-menu';
import { Avatar, AvatarFallback, AvatarImage } from './ui/avatar';
import { ChevronsUpDown, Laptop, LogOut, Moon, Sun } from 'lucide-react';
export function NavUser() {
const { isMobile } = useSidebar();
const { theme, setTheme } = useTheme();
const userName = 'Jan';
const profilePictureUrl = '/api/v1/users/me/profile-image';
return (
<SidebarMenu>
<SidebarMenuItem>
<DropdownMenu>
<DropdownMenuTrigger asChild>
<SidebarMenuButton
size="lg"
className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
>
<Avatar className="h-8 w-8 rounded-lg">
<AvatarImage
src={profilePictureUrl}
alt={userName + ' profile image'}
/>
<AvatarFallback className="rounded-lg">
{userName
.split(' ')
.map((n) => n[0])
.join('')
.toUpperCase()}
</AvatarFallback>
</Avatar>
<div className="grid flex-1 text-left text-md leading-tight">
<span className="truncate font-medium">{userName}</span>
</div>
<ChevronsUpDown className="ml-auto size-4" />
</SidebarMenuButton>
</DropdownMenuTrigger>
<DropdownMenuContent
className="w-(--radix-dropdown-menu-trigger-width) min-w-56 rounded-lg"
side={isMobile ? 'bottom' : 'right'}
align="end"
sideOffset={4}
>
<DropdownMenuLabel className="p-0 font-normal">
<div className="flex items-center gap-2 px-1 py-1.5 text-left text-sm">
<Avatar className="h-8 w-8 rounded-lg">
<AvatarImage
src={profilePictureUrl}
alt={userName + ' profile image'}
/>
<AvatarFallback className="rounded-lg">
{userName
.split(' ')
.map((n) => n[0])
.join('')
.toUpperCase()}
</AvatarFallback>
</Avatar>
<div className="grid flex-1 text-left text-md leading-tight">
<span className="truncate font-medium">{userName}</span>
</div>
</div>
</DropdownMenuLabel>
<DropdownMenuSeparator />
<DropdownMenu>
<DropdownMenuTrigger asChild>
<SidebarMenuButton className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground">
{theme === 'light' ? (
<Sun className="text-muted-foreground" />
) : theme === 'dark' ? (
<Moon className="text-muted-foreground" />
) : (
<Laptop className="text-muted-foreground" />
)}
Theme
</SidebarMenuButton>
</DropdownMenuTrigger>
<DropdownMenuContent
className="w-(--radix-dropdown-menu-trigger-width) min-w-56 rounded-lg"
side={isMobile ? 'bottom' : 'right'}
align="start"
sideOffset={4}
>
<DropdownMenuItem onClick={() => setTheme('light')}>
<Sun className="text-muted-foreground" />
Light
</DropdownMenuItem>
<DropdownMenuItem onClick={() => setTheme('dark')}>
<Moon className="text-muted-foreground" />
Dark
</DropdownMenuItem>
<DropdownMenuItem onClick={() => setTheme('system')}>
<Laptop className="text-muted-foreground" />
System
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
<DropdownMenuSeparator />
<DropdownMenuItem
onClick={() => {
// TODO logout logic
}}
>
<LogOut />
Logout
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
</SidebarMenuItem>
</SidebarMenu>
);
}