From 36563db77ee9e422ed00f90adb12c20afbcceeb5 Mon Sep 17 00:00:00 2001
From: Markus Thielker <mail.markus.thielker@gmail.com>
Date: Sat, 16 Mar 2024 21:35:13 +0100
Subject: [PATCH] N-FIN-34: add new navigation variant for mobile devices
---
src/components/navigation.tsx | 146 ++++++++++++++++++--------
src/components/ui/navigation-menu.tsx | 5 +
2 files changed, 108 insertions(+), 43 deletions(-)
diff --git a/src/components/navigation.tsx b/src/components/navigation.tsx
index c744453..f004745 100644
--- a/src/components/navigation.tsx
+++ b/src/components/navigation.tsx
@@ -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>
);
}
diff --git a/src/components/ui/navigation-menu.tsx b/src/components/ui/navigation-menu.tsx
index 800788d..71f001a 100644
--- a/src/components/ui/navigation-menu.tsx
+++ b/src/components/ui/navigation-menu.tsx
@@ -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,