markus/finances
1
0
Fork 0
mirror of https://codeberg.org/MarkusThielker/finances.git synced 2025-04-18 16:41:18 +00:00
Code Issues Projects Releases Packages 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 { import {
NavigationMenu, NavigationMenu,
navigationMenuIconTriggerStyle,
NavigationMenuItem, NavigationMenuItem,
NavigationMenuLink, NavigationMenuLink,
NavigationMenuList, NavigationMenuList,
navigationMenuTriggerStyle, navigationMenuTriggerStyle,
} from '@/components/ui/navigation-menu'; } from '@/components/ui/navigation-menu';
import React from 'react'; import React, { useState } from 'react';
import Link from 'next/link'; 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() { export default function Navigation() {
const [open, setOpen] = useState(false);
return ( return (
<div className="flex sticky items-center border-b border-border bg-background"> <div className="flex sticky items-center border-b border-border bg-background">
<NavigationMenu> <div className="md:hidden">
<NavigationMenuList className="flex w-screen items-center justify-between sm:px-4 py-2"> <Drawer open={open} onOpenChange={open => setOpen(open)}>
<div className="inline-flex space-x-2"> <DrawerTrigger asChild>
<Button size="icon" variant="ghost" className="m-2">
<img src={'/logo_white.png'} alt="Finances" className="h-10 w-10 mx-3"/> <Menu/>
</Button>
<NavigationMenuItem> </DrawerTrigger>
<Link href="/" legacyBehavior passHref> <DrawerContent>
<NavigationMenuLink className={navigationMenuTriggerStyle()}> <div className="flex flex-col space-y-2 w-full rounded-none p-4">
Dashboard <Link
</NavigationMenuLink> href="/"
className={navigationMenuIconTriggerStyle()}
onClick={() => setOpen(false)}
passHref>
<Home/>
<span>Dashboard</span>
</Link> </Link>
</NavigationMenuItem> <Link
<NavigationMenuItem> href="/payments"
<Link href="/payments" legacyBehavior passHref> className={navigationMenuIconTriggerStyle()}
<NavigationMenuLink className={navigationMenuTriggerStyle()}> onClick={() => setOpen(false)}
Payments passHref>
</NavigationMenuLink> <Banknote/>
<span>Payments</span>
</Link> </Link>
</NavigationMenuItem> <Link
<NavigationMenuItem> href="/entities"
<Link href="/entities" legacyBehavior passHref> className={navigationMenuIconTriggerStyle()}
<NavigationMenuLink className={navigationMenuTriggerStyle()}> onClick={() => setOpen(false)}
Entities passHref>
</NavigationMenuLink> <UserSearch/>
<span>Entities</span>
</Link> </Link>
</NavigationMenuItem> <Link
<NavigationMenuItem> href="/categories"
<Link href="/categories" legacyBehavior passHref> className={navigationMenuIconTriggerStyle()}
<NavigationMenuLink className={navigationMenuTriggerStyle()}> onClick={() => setOpen(false)}
Categories passHref>
</NavigationMenuLink> <Tag/>
<span>Categories</span>
</Link> </Link>
</NavigationMenuItem> <Link
</div> href="/account"
className={navigationMenuIconTriggerStyle()}
<NavigationMenuItem> onClick={() => setOpen(false)}
<Link href="/account" legacyBehavior passHref> passHref>
<NavigationMenuLink className={navigationMenuTriggerStyle()}>
<span className="sr-only">Account</span>
<User/> <User/>
</NavigationMenuLink> <span>Account</span>
</Link> </Link>
</NavigationMenuItem> </div>
</NavigationMenuList> </DrawerContent>
</NavigationMenu> </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> </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', '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< const NavigationMenuTrigger = React.forwardRef<
React.ElementRef<typeof NavigationMenuPrimitive.Trigger>, React.ElementRef<typeof NavigationMenuPrimitive.Trigger>,
React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Trigger> React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Trigger>
@ -117,6 +121,7 @@ NavigationMenuIndicator.displayName =
export { export {
navigationMenuTriggerStyle, navigationMenuTriggerStyle,
navigationMenuIconTriggerStyle,
NavigationMenu, NavigationMenu,
NavigationMenuList, NavigationMenuList,
NavigationMenuItem, NavigationMenuItem,