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
+52 -13
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,18 +19,20 @@ 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">
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Avatar>
<AvatarImage src={profilePictureUrl} alt={userName + ' profile image'} />
<AvatarImage
src={profilePictureUrl}
alt={userName + ' profile image'}
/>
<AvatarFallback className="rounded-lg">
{userName
? userName
@@ -33,11 +43,40 @@ const Navbar = ({ userName, profilePictureUrl }: NavbarProps) => {
: 'A'}
</AvatarFallback>
</Avatar>
{/* Mobile Menu */}
<div className="md:hidden">
<NavigationSheet />
</div>
</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>
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>
);
};