From bd7ba934f481200a54c63a3a4b12fec911beb4a4 Mon Sep 17 00:00:00 2001 From: Michael Brusegard <56915010+michaelbrusegard@users.noreply.github.com> Date: Fri, 19 Jan 2024 11:47:41 +0100 Subject: [PATCH] fix: fix layout when opening modals, keyboard navigation and worked on footer --- README.md | 6 +++ messages/en.json | 3 +- messages/no.json | 3 +- src/app/[locale]/layout.tsx | 8 ++-- src/components/layout/Footer.tsx | 55 ++++++++++++++++++++-- src/components/layout/Header.tsx | 2 +- src/components/layout/LogoLink.tsx | 31 ++++++++---- src/components/layout/MobileSheet.tsx | 13 +++-- src/components/layout/Nav.tsx | 48 ++++++++++--------- src/components/providers/RootProviders.tsx | 6 +-- src/components/ui/Button.tsx | 7 ++- 11 files changed, 131 insertions(+), 51 deletions(-) diff --git a/README.md b/README.md index 87b7dea..ac8341c 100644 --- a/README.md +++ b/README.md @@ -9,6 +9,12 @@ Here is a list of documentation to help you get started: - [Lucide](https://lucide.dev/icons/) - Icons library - [Next-intl](https://next-intl-docs.vercel.app/) - Internationalization library +## Quirks to keep in mind + +- When you want to link to a new internal page use the `` component from `@/lib/navigation` instead of the normal anchortag ``. This will ensure that the page is loaded with the correct locale. If you want to link to external resources or other media, use the built-in `` component from Next.js. Remember to add `prefetch={false}` to the `` component if the page is not visited often. + +## Developmen` + First, install dependencies: ```bash diff --git a/messages/en.json b/messages/en.json index 2e34956..b90a833 100644 --- a/messages/en.json +++ b/messages/en.json @@ -13,6 +13,7 @@ "dark": "Dark", "system": "System", "profile": "Profile", - "signIn": "Sign in" + "signIn": "Sign in", + "links": "Links" } } diff --git a/messages/no.json b/messages/no.json index 98fb420..416417f 100644 --- a/messages/no.json +++ b/messages/no.json @@ -13,6 +13,7 @@ "dark": "Mørk", "system": "System", "profile": "Profil", - "signIn": "Logg inn" + "signIn": "Logg inn", + "links": "Lenker" } } diff --git a/src/app/[locale]/layout.tsx b/src/app/[locale]/layout.tsx index 095affa..c8d4ca5 100644 --- a/src/app/[locale]/layout.tsx +++ b/src/app/[locale]/layout.tsx @@ -78,14 +78,16 @@ export default function Localelayout({ children, params: { locale } }: Props) { unstable_setRequestLocale(locale); return ( - + -
{children}
+
+ {children} +
diff --git a/src/components/layout/Footer.tsx b/src/components/layout/Footer.tsx index d52a602..65ec06a 100644 --- a/src/components/layout/Footer.tsx +++ b/src/components/layout/Footer.tsx @@ -1,11 +1,58 @@ -import { useTranslations } from "next-intl"; +import { useTranslations } from 'next-intl'; +import ExternalLink from 'next/link'; + +import { Link } from '@/lib/navigation'; + +import { LogoLink } from '@/components/layout/LogoLink'; +import { Button } from '@/components/ui/Button'; function Footer() { - const t = useTranslations("layout"); + const t = useTranslations('layout'); const year = new Date().getFullYear(); return ( -