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

64
src/components/navigation.tsx
View file

@ -2,19 +2,78 @@
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">
<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>
<Link
href="/payments"
className={navigationMenuIconTriggerStyle()}
onClick={() => setOpen(false)}
passHref>
<Banknote/>
<span>Payments</span>
</Link>
<Link
href="/entities"
className={navigationMenuIconTriggerStyle()}
onClick={() => setOpen(false)}
passHref>
<UserSearch/>
<span>Entities</span>
</Link>
<Link
href="/categories"
className={navigationMenuIconTriggerStyle()}
onClick={() => setOpen(false)}
passHref>
<Tag/>
<span>Categories</span>
</Link>
<Link
href="/account"
className={navigationMenuIconTriggerStyle()}
onClick={() => setOpen(false)}
passHref>
<User/>
<span>Account</span>
</Link>
</div>
</DrawerContent>
</Drawer>
</div>
<div className="hidden md:flex">
<NavigationMenu> <NavigationMenu>
<NavigationMenuList className="flex w-screen items-center justify-between sm:px-4 py-2"> <NavigationMenuList className="flex w-screen items-center justify-between sm:px-4 py-2">
<div className="inline-flex space-x-2"> <div className="inline-flex space-x-2">
@ -62,5 +121,6 @@ export default function Navigation() {
</NavigationMenuList> </NavigationMenuList>
</NavigationMenu> </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,