From cde6e74f16ced3fbeb3dc01312f42bcefdeac03e Mon Sep 17 00:00:00 2001 From: Sander Eikemo Andreassen Date: Sun, 17 Nov 2024 21:35:59 +0100 Subject: [PATCH 1/6] feat: add navigation to all pages --- messages/en.json | 1 + messages/no.json | 1 + .../composites/ResponsiveDialog.tsx | 2 +- src/components/layout/Footer.tsx | 7 ++- src/components/layout/Header.tsx | 35 ++++++++--- src/components/layout/LogoLink.tsx | 16 ++--- src/components/layout/header/DarkModeMenu.tsx | 1 - .../layout/header/DesktopNavMenu.tsx | 60 +++++++++++++++++++ src/components/layout/header/LocaleMenu.tsx | 1 - src/components/layout/header/MobileSheet.tsx | 43 +++++++++++-- src/components/layout/header/Nav.tsx | 27 ++------- src/components/layout/header/NavItem.tsx | 20 +++++++ src/components/layout/header/ProfileMenu.tsx | 1 - src/components/layout/header/SecondaryNav.tsx | 43 +++++++++++++ 14 files changed, 209 insertions(+), 49 deletions(-) create mode 100644 src/components/layout/header/DesktopNavMenu.tsx create mode 100644 src/components/layout/header/NavItem.tsx create mode 100644 src/components/layout/header/SecondaryNav.tsx diff --git a/messages/en.json b/messages/en.json index f9b2767..3b5e370 100644 --- a/messages/en.json +++ b/messages/en.json @@ -39,6 +39,7 @@ "storage": "Storage", "about": "About", "shiftSchedule": "Shift Schedule", + "desktopNavMenu": "{open, select, true {Open} other {Close}} navigation menu", "changeLocale": "Change language", "toggleTheme": "Toggle theme", "light": "Light", diff --git a/messages/no.json b/messages/no.json index 8062933..febd673 100644 --- a/messages/no.json +++ b/messages/no.json @@ -39,6 +39,7 @@ "storage": "Lager", "about": "Om oss", "shiftSchedule": "Vaktliste", + "desktopNavMenu": "{open, select, true {Åpne} other {Lukk}} navigasjonsmeny", "changeLocale": "Bytt språk", "toggleTheme": "Bytt tema", "light": "Lys", diff --git a/src/components/composites/ResponsiveDialog.tsx b/src/components/composites/ResponsiveDialog.tsx index 417fe57..5c951b0 100644 --- a/src/components/composites/ResponsiveDialog.tsx +++ b/src/components/composites/ResponsiveDialog.tsx @@ -40,7 +40,7 @@ interface ResponsiveDialogProps extends BaseProps { asChild?: true; } -const desktop = '(min-width: 768px)'; +const desktop = '(min-width: 48rem)'; /** * This uses a drawer on mobile and a dialog on desktop so it is usually the preffered way to use dialogs in the app for a repsonsive experience. diff --git a/src/components/layout/Footer.tsx b/src/components/layout/Footer.tsx index cc7f462..0c8f3b2 100644 --- a/src/components/layout/Footer.tsx +++ b/src/components/layout/Footer.tsx @@ -21,7 +21,12 @@ function Footer() {
- +

{t('openingHours')}: diff --git a/src/components/layout/Header.tsx b/src/components/layout/Header.tsx index 85faf28..a587e49 100644 --- a/src/components/layout/Header.tsx +++ b/src/components/layout/Header.tsx @@ -1,5 +1,6 @@ import { LogoLink } from '@/components/layout/LogoLink'; import { DarkModeMenu } from '@/components/layout/header/DarkModeMenu'; +import { DesktopNavMenu } from '@/components/layout/header/DesktopNavMenu'; import { LocaleMenu } from '@/components/layout/header/LocaleMenu'; import { MobileSheet } from '@/components/layout/header/MobileSheet'; import { Nav } from '@/components/layout/header/Nav'; @@ -8,6 +9,7 @@ import { useTranslations } from 'next-intl'; function Header() { const t = useTranslations('layout'); + return (

@@ -18,20 +20,37 @@ function Header() { news: t('news'), events: t('events'), about: t('about'), + storage: t('storage'), + shiftSchedule: t('shiftSchedule'), + hackerspaceHome: t('hackerspaceHome'), close: useTranslations('ui')('close'), }} /> - -
-
-
+
+
+
void; -}) { - const t = useTranslations('layout'); + t: { + hackerspaceHome: string; + }; +}; + +function LogoLink({ className, onClick, t }: LogoLinkProps) { return ( + + + setOpen(false)} + t={{ + storage: t.storage, + shiftSchedule: t.shiftSchedule, + }} + /> + + + ); +} + +export { DesktopNavMenu }; diff --git a/src/components/layout/header/LocaleMenu.tsx b/src/components/layout/header/LocaleMenu.tsx index 19164e6..198b65d 100644 --- a/src/components/layout/header/LocaleMenu.tsx +++ b/src/components/layout/header/LocaleMenu.tsx @@ -11,7 +11,6 @@ import { localeIcons, routing } from '@/lib/locale'; import { usePathname, useRouter } from '@/lib/locale/navigation'; import { Globe2Icon } from 'lucide-react'; import { useParams } from 'next/navigation'; -import * as React from 'react'; function LocaleMenu({ t }: { t: { changeLocale: string } }) { const router = useRouter(); diff --git a/src/components/layout/header/MobileSheet.tsx b/src/components/layout/header/MobileSheet.tsx index 9bcd6da..0bae4f5 100644 --- a/src/components/layout/header/MobileSheet.tsx +++ b/src/components/layout/header/MobileSheet.tsx @@ -2,7 +2,9 @@ import { LogoLink } from '@/components/layout/LogoLink'; import { Nav } from '@/components/layout/header/Nav'; +import { SecondaryNav } from '@/components/layout/header/SecondaryNav'; import { Button } from '@/components/ui/Button'; +import { Separator } from '@/components/ui/Separator'; import { Sheet, SheetContent, @@ -10,8 +12,9 @@ import { SheetTitle, SheetTrigger, } from '@/components/ui/Sheet'; +import { useMediaQuery } from '@/lib/hooks/useMediaQuery'; import { MenuIcon } from 'lucide-react'; -import * as React from 'react'; +import { useEffect, useState } from 'react'; type MobileSheetProps = { className?: string; @@ -20,12 +23,23 @@ type MobileSheetProps = { news: string; events: string; about: string; + storage: string; + shiftSchedule: string; + hackerspaceHome: string; close: string; }; }; function MobileSheet({ className, t }: MobileSheetProps) { - const [open, setOpen] = React.useState(false); + const [open, setOpen] = useState(false); + const visible = useMediaQuery('(max-width: 48rem)'); + + useEffect(() => { + if (!visible) { + setOpen(false); + } + }, [visible]); + return ( @@ -38,14 +52,19 @@ function MobileSheet({ className, t }: MobileSheetProps) { - + - setOpen(false)} /> + setOpen(false)} + t={{ + hackerspaceHome: t.hackerspaceHome, + }} + />