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/nav-menu.tsx
-31
View File
@@ -1,31 +0,0 @@
import type { ComponentProps } from 'react';
import {
NavigationMenu,
NavigationMenuItem,
NavigationMenuLink,
NavigationMenuList,
navigationMenuTriggerStyle,
} from '@/components/ui/navigation-menu';
import { Link } from 'react-router';
export const NavMenu = (props: ComponentProps<typeof NavigationMenu>) => (
<NavigationMenu {...props}>
<NavigationMenuList className="space-x-0 data-[orientation=vertical]:flex-col data-[orientation=vertical]:items-start data-[orientation=vertical]:justify-start">
<NavigationMenuItem>
<NavigationMenuLink asChild className={navigationMenuTriggerStyle()}>
<Link to="/">Home</Link>
</NavigationMenuLink>
</NavigationMenuItem>
<NavigationMenuItem>
<NavigationMenuLink asChild className={navigationMenuTriggerStyle()}>
<Link to="/analytics">Analytics</Link>
</NavigationMenuLink>
</NavigationMenuItem>
<NavigationMenuItem>
<NavigationMenuLink asChild className={navigationMenuTriggerStyle()}>
<Link to="/settings">Settings</Link>
</NavigationMenuLink>
</NavigationMenuItem>
</NavigationMenuList>
</NavigationMenu>
);
frontend/src/components/navbar.tsx
+63 -24
View File
@@ -1,8 +1,16 @@
import { Logo } from '@/components/logo'; 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 { Avatar, AvatarFallback, AvatarImage } from './ui/avatar';
import { Link } from 'react-router'; 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 { interface NavbarProps {
userName?: string; userName?: string;
@@ -11,33 +19,64 @@ interface NavbarProps {
const Navbar = ({ userName, profilePictureUrl }: NavbarProps) => { const Navbar = ({ userName, profilePictureUrl }: NavbarProps) => {
return ( return (
<nav className="inset-x-4 my-6 mx-auto h-16 max-w-(--breakpoint-xl) rounded-full border bg-background"> <nav className="my-6 mx-auto max-w-(--breakpoint-xl) rounded-full bg-background">
<div className="mx-auto flex h-full items-center justify-between px-4"> <div className="mx-auto flex items-center justify-between px-4">
<Link to="/"> <Link to="/">
<Logo /> <Logo />
</Link> </Link>
{/* Desktop Menu */}
<NavMenu className="hidden md:block" />
<div className="flex items-center gap-3"> <div className="flex items-center gap-3">
<Avatar> <DropdownMenu>
<AvatarImage src={profilePictureUrl} alt={userName + ' profile image'} /> <DropdownMenuTrigger asChild>
<AvatarFallback className="rounded-lg"> <Avatar>
{userName <AvatarImage
? userName src={profilePictureUrl}
.split(' ') alt={userName + ' profile image'}
.map((n) => n[0]) />
.join('') <AvatarFallback className="rounded-lg">
.toUpperCase() {userName
: 'A'} ? userName
</AvatarFallback> .split(' ')
</Avatar> .map((n) => n[0])
.join('')
{/* Mobile Menu */} .toUpperCase()
<div className="md:hidden"> : 'A'}
<NavigationSheet /> </AvatarFallback>
</div> </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>
</div> </div>
</nav> </nav>
frontend/src/components/navigation-sheet.tsx
-26
View File
@@ -1,26 +0,0 @@
import { VisuallyHidden } from '@radix-ui/react-visually-hidden';
import { Menu } from 'lucide-react';
import { Button } from '@/components/ui/button';
import { Sheet, SheetContent, SheetTitle, SheetTrigger } from '@/components/ui/sheet';
import { Logo } from '@/components/logo';
import { NavMenu } from '@/components/nav-menu';
export const NavigationSheet = () => {
return (
<Sheet>
<VisuallyHidden>
<SheetTitle>Navigation Menu</SheetTitle>
</VisuallyHidden>
<SheetTrigger asChild>
<Button className="rounded-full" size="icon" variant="outline">
<Menu />
</Button>
</SheetTrigger>
<SheetContent className="px-6 py-3">
<Logo />
<NavMenu className="mt-6 [&>div]:h-full" orientation="vertical" />
</SheetContent>
</Sheet>
);
};