Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

N-FIN-34: navigation becomes drawer on small screens #37

Merged
merged 3 commits into from
Mar 16, 2024
Merged

N-FIN-34: navigation becomes drawer on small screens #37

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
698d416
N-FIN-34: add required shadcn/ui components
MarkusThielker Mar 16, 2024
36563db
N-FIN-34: add new navigation variant for mobile devices
MarkusThielker Mar 16, 2024
7ebc05c
N-FIN-34: add space between title and dashboard scope selection
MarkusThielker Mar 16, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
13 changes: 13 additions & 0 deletions package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,6 +50,7 @@
"swr": "^2.2.5",
"tailwind-merge": "^2.2.1",
"tailwindcss-animate": "^1.0.7",
"vaul": "^0.9.0",
"zod": "^3.22.4"
},
"devDependencies": {
Expand Down
2 changes: 1 addition & 1 deletion src/components/dashboardPageClientComponents.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,7 +49,7 @@ export default function DashboardPageClientContent(
return (
<div className={className}>
<div className="flex flex-col space-y-4">
<div className="flex items-center justify-between w-full">
<div className="flex items-center justify-between w-full space-x-8">

<p className="text-3xl font-semibold">Dashboard</p>

Expand Down
140 changes: 100 additions & 40 deletions src/components/navigation.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
<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>
<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="/categories" legacyBehavior passHref>
<Link href="/account" legacyBehavior passHref>
<NavigationMenuLink className={navigationMenuTriggerStyle()}>
Categories
<span className="sr-only">Account</span>
<User/>
</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>
</NavigationMenuList>
</NavigationMenu>
</div>
</div>
);
}
118 changes: 118 additions & 0 deletions src/components/ui/drawer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,118 @@
'use client';

import * as React from 'react';
import { Drawer as DrawerPrimitive } from 'vaul';

import { cn } from '@/lib/utils';

const Drawer = ({
shouldScaleBackground = true,
...props
}: React.ComponentProps<typeof DrawerPrimitive.Root>) => (
<DrawerPrimitive.Root
shouldScaleBackground={shouldScaleBackground}
{...props}
/>
);
Drawer.displayName = 'Drawer';

const DrawerTrigger = DrawerPrimitive.Trigger;

const DrawerPortal = DrawerPrimitive.Portal;

const DrawerClose = DrawerPrimitive.Close;

const DrawerOverlay = React.forwardRef<
React.ElementRef<typeof DrawerPrimitive.Overlay>,
React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Overlay>
>(({className, ...props}, ref) => (
<DrawerPrimitive.Overlay
ref={ref}
className={cn('fixed inset-0 z-50 bg-black/80', className)}
{...props}
/>
));
DrawerOverlay.displayName = DrawerPrimitive.Overlay.displayName;

const DrawerContent = React.forwardRef<
React.ElementRef<typeof DrawerPrimitive.Content>,
React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Content>
>(({className, children, ...props}, ref) => (
<DrawerPortal>
<DrawerOverlay/>
<DrawerPrimitive.Content
ref={ref}
className={cn(
'fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-[10px] border bg-background',
className,
)}
{...props}
>
<div className="mx-auto mt-4 h-2 w-[100px] rounded-full bg-muted"/>
{children}
</DrawerPrimitive.Content>
</DrawerPortal>
));
DrawerContent.displayName = 'DrawerContent';

const DrawerHeader = ({
className,
...props
}: React.HTMLAttributes<HTMLDivElement>) => (
<div
className={cn('grid gap-1.5 p-4 text-center sm:text-left', className)}
{...props}
/>
);
DrawerHeader.displayName = 'DrawerHeader';

const DrawerFooter = ({
className,
...props
}: React.HTMLAttributes<HTMLDivElement>) => (
<div
className={cn('mt-auto flex flex-col gap-2 p-4', className)}
{...props}
/>
);
DrawerFooter.displayName = 'DrawerFooter';

const DrawerTitle = React.forwardRef<
React.ElementRef<typeof DrawerPrimitive.Title>,
React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Title>
>(({className, ...props}, ref) => (
<DrawerPrimitive.Title
ref={ref}
className={cn(
'text-lg font-semibold leading-none tracking-tight',
className,
)}
{...props}
/>
));
DrawerTitle.displayName = DrawerPrimitive.Title.displayName;

const DrawerDescription = React.forwardRef<
React.ElementRef<typeof DrawerPrimitive.Description>,
React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Description>
>(({className, ...props}, ref) => (
<DrawerPrimitive.Description
ref={ref}
className={cn('text-sm text-muted-foreground', className)}
{...props}
/>
));
DrawerDescription.displayName = DrawerPrimitive.Description.displayName;

export {
Drawer,
DrawerPortal,
DrawerOverlay,
DrawerTrigger,
DrawerClose,
DrawerContent,
DrawerHeader,
DrawerFooter,
DrawerTitle,
DrawerDescription,
};
5 changes: 5 additions & 0 deletions src/components/ui/navigation-menu.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down Expand Up @@ -117,6 +121,7 @@ NavigationMenuIndicator.displayName =

export {
navigationMenuTriggerStyle,
navigationMenuIconTriggerStyle,
NavigationMenu,
NavigationMenuList,
NavigationMenuItem,
Expand Down