markus/finances
1
0
Fork 0
Code Issues 6 Pull requests Projects Releases 6 Packages 1 Wiki Activity Actions

N-FIN-34: add new navigation variant for mobile devices

Browse source
This commit is contained in:
Markus Thielker 2024-03-16 21:35:13 +01:00
parent 698d416314
commit 36563db77e
No known key found for this signature in database
2 changed files with 108 additions and 43 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

146
src/components/navigation.tsx
View file

@ -2,65 +2,125 @@
import {
NavigationMenu,
navigationMenuIconTriggerStyle,
NavigationMenuItem,
NavigationMenuLink,
NavigationMenuList,
navigationMenuTriggerStyle,
} from '@/components/ui/navigation-menu';
import React from 'react';
import React, { useState } from 'react';
import Link from 'next/link';
import { User } from 'lucide-react';
import { Banknote, Home, Menu, Tag, User, UserSearch } from 'lucide-react';
import { Drawer, DrawerContent, DrawerTrigger } from '@/components/ui/drawer';
import { Button } from '@/components/ui/button';
export default function Navigation() {
const [open, setOpen] = useState(false);
return (
<div className="flex sticky items-center border-b border-border bg-background">
<NavigationMenu>
<NavigationMenuList className="flex w-screen items-center justify-between sm:px-4 py-2">
<div className="inline-flex space-x-2">
<img src={'/logo_white.png'} alt="Finances" className="h-10 w-10 mx-3"/>
<NavigationMenuItem>
<Link href="/" legacyBehavior passHref>
<NavigationMenuLink className={navigationMenuTriggerStyle()}>
Dashboard
</NavigationMenuLink>
<div className="md:hidden">
<Drawer open={open} onOpenChange={open => setOpen(open)}>
<DrawerTrigger asChild>
<Button size="icon" variant="ghost" className="m-2">
<Menu/>
</Button>
</DrawerTrigger>
<DrawerContent>
<div className="flex flex-col space-y-2 w-full rounded-none p-4">
<Link
href="/"
className={navigationMenuIconTriggerStyle()}
onClick={() => setOpen(false)}
passHref>
<Home/>
<span>Dashboard</span>
</Link>
</NavigationMenuItem>
<NavigationMenuItem>
<Link href="/payments" legacyBehavior passHref>
<NavigationMenuLink className={navigationMenuTriggerStyle()}>
Payments
</NavigationMenuLink>
<Link
href="/payments"
className={navigationMenuIconTriggerStyle()}
onClick={() => setOpen(false)}
passHref>
<Banknote/>
<span>Payments</span>
</Link>
</NavigationMenuItem>
<NavigationMenuItem>
<Link href="/entities" legacyBehavior passHref>
<NavigationMenuLink className={navigationMenuTriggerStyle()}>
Entities
</NavigationMenuLink>
<Link
href="/entities"
className={navigationMenuIconTriggerStyle()}
onClick={() => setOpen(false)}
passHref>
<UserSearch/>
<span>Entities</span>
</Link>
</NavigationMenuItem>
<NavigationMenuItem>
<Link href="/categories" legacyBehavior passHref>
<NavigationMenuLink className={navigationMenuTriggerStyle()}>
Categories
</NavigationMenuLink>
<Link
href="/categories"
className={navigationMenuIconTriggerStyle()}
onClick={() => setOpen(false)}
passHref>
<Tag/>
<span>Categories</span>
</Link>
</NavigationMenuItem>
</div>
<NavigationMenuItem>
<Link href="/account" legacyBehavior passHref>
<NavigationMenuLink className={navigationMenuTriggerStyle()}>
<span className="sr-only">Account</span>
<Link
href="/account"
className={navigationMenuIconTriggerStyle()}
onClick={() => setOpen(false)}
passHref>
<User/>
</NavigationMenuLink>
</Link>
</NavigationMenuItem>
</NavigationMenuList>
</NavigationMenu>
<span>Account</span>
</Link>
</div>
</DrawerContent>
</Drawer>
</div>
<div className="hidden md:flex">
<NavigationMenu>
<NavigationMenuList className="flex w-screen items-center justify-between sm:px-4 py-2">
<div className="inline-flex space-x-2">
<img src={'/logo_white.png'} alt="Finances" className="h-10 w-10 mx-3"/>
<NavigationMenuItem>
<Link href="/" legacyBehavior passHref>
<NavigationMenuLink className={navigationMenuTriggerStyle()}>
Dashboard
</NavigationMenuLink>
</Link>
</NavigationMenuItem>
<NavigationMenuItem>
<Link href="/payments" legacyBehavior passHref>
<NavigationMenuLink className={navigationMenuTriggerStyle()}>
Payments
</NavigationMenuLink>
</Link>
</NavigationMenuItem>
<NavigationMenuItem>
<Link href="/entities" legacyBehavior passHref>
<NavigationMenuLink className={navigationMenuTriggerStyle()}>
Entities
</NavigationMenuLink>
</Link>
</NavigationMenuItem>
<NavigationMenuItem>
<Link href="/categories" legacyBehavior passHref>
<NavigationMenuLink className={navigationMenuTriggerStyle()}>
Categories
</NavigationMenuLink>
</Link>
</NavigationMenuItem>
</div>
<NavigationMenuItem>
<Link href="/account" legacyBehavior passHref>
<NavigationMenuLink className={navigationMenuTriggerStyle()}>
<span className="sr-only">Account</span>
<User/>
</NavigationMenuLink>
</Link>
</NavigationMenuItem>
</NavigationMenuList>
</NavigationMenu>
</div>
</div>
);
}

5
src/components/ui/navigation-menu.tsx
View file

@ -44,6 +44,10 @@ const navigationMenuTriggerStyle = cva(
'group inline-flex h-10 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-none disabled:pointer-events-none disabled:opacity-50 data-[active]:bg-accent/50 data-[state=open]:bg-accent/50',
);
const navigationMenuIconTriggerStyle = cva(
'group inline-flex h-10 w-full items-center justify-start rounded-md bg-background px-4 py-2 space-x-4 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-none disabled:pointer-events-none disabled:opacity-50 data-[active]:bg-accent/50 data-[state=open]:bg-accent/50',
);
const NavigationMenuTrigger = React.forwardRef<
React.ElementRef<typeof NavigationMenuPrimitive.Trigger>,
React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Trigger>
@ -117,6 +121,7 @@ NavigationMenuIndicator.displayName =
export {
navigationMenuTriggerStyle,
navigationMenuIconTriggerStyle,
NavigationMenu,
NavigationMenuList,
NavigationMenuItem,