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

Add user menu to navbar & update nav design

Browse Source
This commit is contained in:
KartoffelChips
2026-04-19 22:54:30 +02:00
parent 88323ed4fe
commit 41334bbd9b
3 changed files with 63 additions and 81 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/navbar.tsx
+63 -24
View File
@@ -1,8 +1,16 @@
import { Logo } from '@/components/logo';
import { NavMenu } from '@/components/nav-menu';
import { NavigationSheet } from '@/components/navigation-sheet';
import { Avatar, AvatarFallback, AvatarImage } from './ui/avatar';
import { Link } from 'react-router';
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuGroup,
DropdownMenuItem,
DropdownMenuLabel,
DropdownMenuSeparator,
DropdownMenuTrigger,
} from '@/components/ui/dropdown-menu';
import { ChartLine, CircleUserRound, LogOut, Settings } from 'lucide-react';
interface NavbarProps {
userName?: string;
@@ -11,33 +19,64 @@ interface NavbarProps {
const Navbar = ({ userName, profilePictureUrl }: NavbarProps) => {
return (
<nav className="inset-x-4 my-6 mx-auto h-16 max-w-(--breakpoint-xl) rounded-full border bg-background">
<div className="mx-auto flex h-full items-center justify-between px-4">
<nav className="my-6 mx-auto max-w-(--breakpoint-xl) rounded-full bg-background">
<div className="mx-auto flex items-center justify-between px-4">
<Link to="/">
<Logo />
</Link>
{/* Desktop Menu */}
<NavMenu className="hidden md:block" />
<div className="flex items-center gap-3">
<Avatar>
<AvatarImage src={profilePictureUrl} alt={userName + ' profile image'} />
<AvatarFallback className="rounded-lg">
{userName
? userName
.split(' ')
.map((n) => n[0])
.join('')
.toUpperCase()
: 'A'}
</AvatarFallback>
</Avatar>
{/* Mobile Menu */}
<div className="md:hidden">
<NavigationSheet />
</div>
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Avatar>
<AvatarImage
src={profilePictureUrl}
alt={userName + ' profile image'}
/>
<AvatarFallback className="rounded-lg">
{userName
? userName
.split(' ')
.map((n) => n[0])
.join('')
.toUpperCase()
: 'A'}
</AvatarFallback>
</Avatar>
</DropdownMenuTrigger>
<DropdownMenuContent className="w-40" align="end">
<DropdownMenuGroup>
<DropdownMenuLabel>{userName}</DropdownMenuLabel>
<DropdownMenuItem asChild>
<Link to="/account">
<CircleUserRound />
Account
</Link>
</DropdownMenuItem>
<DropdownMenuItem asChild>
<Link to="/analytics">
<ChartLine />
Analytics
</Link>
</DropdownMenuItem>
<DropdownMenuItem asChild>
<Link to="/settings">
<Settings />
Settings
</Link>
</DropdownMenuItem>
</DropdownMenuGroup>
<DropdownMenuSeparator />
<DropdownMenuGroup>
<DropdownMenuItem asChild>
<Link to="/logout">
<LogOut />
Log out
</Link>
</DropdownMenuItem>
</DropdownMenuGroup>
</DropdownMenuContent>
</DropdownMenu>
</div>
</div>
</nav>