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

Add app sidebar

Browse Source
This commit is contained in:
KartoffelChipss
2026-05-05 22:32:49 +02:00
parent 663c1137dd
commit c8ec394774
13 changed files with 190 additions and 144 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/NavUser.tsx
+26 -21
View File
@@ -10,14 +10,17 @@ import {
} from './ui/dropdown-menu';
import { Avatar, AvatarFallback, AvatarImage } from './ui/avatar';
import { ChevronsUpDown, Laptop, LogOut, Moon, Sun } from 'lucide-react';
import { Link } from 'react-router';
export function NavUser() {
interface NavUserProps {
userName?: string;
profilePictureUrl?: string;
}
export function NavUser({ userName, profilePictureUrl }: NavUserProps) {
const { isMobile } = useSidebar();
const { theme, setTheme } = useTheme();
const userName = 'Jan';
const profilePictureUrl = '/api/v1/users/me/profile-image';
return (
<SidebarMenu>
<SidebarMenuItem>
@@ -25,7 +28,7 @@ export function NavUser() {
<DropdownMenuTrigger asChild>
<SidebarMenuButton
size="lg"
className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
className="data-open:bg-sidebar-accent data-open:text-sidebar-accent-foreground"
>
<Avatar className="h-8 w-8 rounded-lg">
<AvatarImage
@@ -34,10 +37,12 @@ export function NavUser() {
/>
<AvatarFallback className="rounded-lg">
{userName
.split(' ')
.map((n) => n[0])
.join('')
.toUpperCase()}
? userName
.split(' ')
.map((n) => n[0])
.join('')
.toUpperCase()
: 'T'}
</AvatarFallback>
</Avatar>
<div className="grid flex-1 text-left text-md leading-tight">
@@ -61,10 +66,12 @@ export function NavUser() {
/>
<AvatarFallback className="rounded-lg">
{userName
.split(' ')
.map((n) => n[0])
.join('')
.toUpperCase()}
? userName
.split(' ')
.map((n) => n[0])
.join('')
.toUpperCase()
: 'T'}
</AvatarFallback>
</Avatar>
<div className="grid flex-1 text-left text-md leading-tight">
@@ -75,7 +82,7 @@ export function NavUser() {
<DropdownMenuSeparator />
<DropdownMenu>
<DropdownMenuTrigger asChild>
<SidebarMenuButton className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground">
<SidebarMenuButton className="data-open:bg-sidebar-accent data-open:text-sidebar-accent-foreground">
{theme === 'light' ? (
<Sun className="text-muted-foreground" />
) : theme === 'dark' ? (
@@ -107,13 +114,11 @@ export function NavUser() {
</DropdownMenuContent>
</DropdownMenu>
<DropdownMenuSeparator />
<DropdownMenuItem
onClick={() => {
// TODO logout logic
}}
>
<LogOut />
Logout
<DropdownMenuItem asChild>
<Link to="/logout">
<LogOut />
Logout
</Link>
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>