fix: fix layout when opening modals, keyboard navigation and worked o…

…n footer
hackerspace-ntnu · Jan 19, 2024 · bd7ba93 · bd7ba93
1 parent d5e497d
commit bd7ba93
Show file tree

Hide file tree

Showing 11 changed files with 131 additions and 51 deletions.
diff --git 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 `<Link>` component from `@/lib/navigation` instead of the normal anchortag `<a>`. 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 `<Link>` component from Next.js. Remember to add `prefetch={false}` to the `<Link>` component if the page is not visited often.
+
+## Developmen`
+
 First, install dependencies:
 
 ```bash

diff --git 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
@@ -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
@@ -78,14 +78,16 @@ export default function Localelayout({ children, params: { locale } }: Props) {
   unstable_setRequestLocale(locale);
   return (
     <html
-      className={cx(inter.variable, montserrat.variable)}
+      className={cx('h-full w-full', inter.variable, montserrat.variable)}
       lang={locale}
       dir='ltr'
       suppressHydrationWarning
     >
-      <body className='min-h-screen scroll-smooth bg-background font-inter text-foreground antialiased scrollbar-thin scrollbar-track-background scrollbar-thumb-primary/40 scrollbar-corner-background scrollbar-thumb-rounded-lg hover:scrollbar-thumb-primary/80'>
+      <body className='h-full w-full bg-background font-inter text-foreground antialiased'>
         <RootProviders params={{ locale: locale }}>
-          <div className='flex flex-col'>{children}</div>
+          <div className='fixed bottom-0 top-0 flex h-full w-full flex-col overflow-y-scroll scroll-smooth scrollbar-thin scrollbar-track-background scrollbar-thumb-primary/40 scrollbar-corner-background scrollbar-thumb-rounded-lg hover:scrollbar-thumb-primary/80'>
+            {children}
+          </div>
         </RootProviders>
       </body>
     </html>

diff --git 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 (
-    <footer className="bg-secondary-50 dark:bg-secondary-900 z-10 flex w-full justify-center px-11 py-10 md:px-16 lg:px-24">
-      <div className="text-foreground w-full max-w-screen-2xl text-base"></div>
+    <footer className='z-10 flex w-full justify-center border-b border-border/40 bg-background/95 px-11 py-10 md:px-16 lg:px-24'>
+      <div className='w-full max-w-screen-2xl text-sm'>
+        <div className='xs:grid-cols-2 grid grid-cols-1 gap-x-4 gap-y-12 sm:grid-cols-3 lg:grid-cols-4'>
+          <div>
+            <LogoLink className='justify-start' />
+            <p className='ml-2 leading-tight'>
+              <Button asChild variant='link' size='none'>
+                <ExternalLink
+                  href='https://use.mazemap.com/#v=1&zlevel=2&center=10.404406,63.415418&zoom=18&sharepoitype=poi&sharepoi=1000391296&campusid=1'
+                  prefetch={false}
+                >
+                  Realfagbygget, A-blokka
+                </ExternalLink>
+              </Button>
+              <br />
+              Høgskoleringen 5<br />
+              7034 Trondheim
+            </p>
+          </div>
+          <div>
+            <h4>{t('links')}</h4>
+            <nav>
+              <ul>
+                <li>
+                  <Button asChild variant='nav' size='none'>
+                    <Link href='/news'>{t('news')}</Link>
+                  </Button>
+                </li>
+                <li>
+                  <Button asChild variant='nav' size='none'>
+                    <Link href='/events'>{t('events')}</Link>
+                  </Button>
+                </li>
+                <li>
+                  <Button asChild variant='nav' size='none'>
+                    <Link href='/about'>{t('about')}</Link>
+                  </Button>
+                </li>
+              </ul>
+            </nav>
+          </div>
+        </div>
+      </div>
     </footer>
   );
 }

diff --git a/src/components/layout/Header.tsx b/src/components/layout/Header.tsx
@@ -13,7 +13,7 @@ function Header() {
     <header className='sticky top-0 z-10 flex w-full justify-center border-b border-border/40 bg-background/95 px-4 backdrop-blur supports-[backdrop-filter]:bg-background/60 sm:px-11 md:px-16 lg:px-24'>
       <div className='flex h-14 w-full max-w-screen-2xl items-center justify-between'>
         <MobileSheet
-          className='block md:hidden'
+          className='flex md:hidden'
           news={t('news')}
           events={t('events')}
           about={t('about')}

diff --git a/src/components/layout/LogoLink.tsx b/src/components/layout/LogoLink.tsx
@@ -1,22 +1,33 @@
 import { useTranslations } from 'next-intl';
 
 import { Link } from '@/lib/navigation';
+import { cx } from '@/lib/utils';
 
 import { Logo } from '@/components/assets/Logo';
+import { Button } from '@/components/ui/Button';
 
-function LogoLink() {
+function LogoLink({
+  className,
+  onClick,
+}: {
+  className?: string;
+  onClick?: () => void;
+}) {
   const t = useTranslations('layout');
   return (
-    <Link
-      className='flex items-center space-x-2'
-      href='/'
-      aria-label={t('home')}
+    <Button
+      className={cx('flex items-center space-x-2', className)}
+      asChild
+      variant='none'
+      size='none'
     >
-      <Logo className='h-6 w-6 md:h-8 md:w-8 lg:h-10 lg:w-10' />
-      <span className='text-md font-montserrat font-bold md:text-lg lg:text-2xl'>
-        HACKERSPACE
-      </span>
-    </Link>
+      <Link href='/' aria-label={t('home')} onClick={onClick}>
+        <Logo className='h-6 w-6 md:h-8 md:w-8 lg:h-10 lg:w-10' />
+        <span className='text-md font-montserrat font-bold md:text-lg lg:text-2xl'>
+          HACKERSPACE
+        </span>
+      </Link>
+    </Button>
   );
 }
 

diff --git a/src/components/layout/MobileSheet.tsx b/src/components/layout/MobileSheet.tsx
@@ -1,11 +1,12 @@
 'use client';
 
-import { MenuSquare } from 'lucide-react';
+import { Menu } from 'lucide-react';
 
 import * as React from 'react';
 
 import { LogoLink } from '@/components/layout/LogoLink';
 import { Nav } from '@/components/layout/Nav';
+import { Button } from '@/components/ui/Button';
 import {
   Sheet,
   SheetContent,
@@ -25,13 +26,15 @@ function MobileSheet({ className, news, events, about }: MobileSheetProps) {
   const [open, setOpen] = React.useState(false);
   return (
     <Sheet open={open} onOpenChange={setOpen}>
-      <SheetTrigger className={className}>
-        <MenuSquare className='h-5 w-5' />
+      <SheetTrigger asChild>
+        <Button className={className} variant='ghost' size='icon'>
+          <Menu className='h-5 w-5' />
+        </Button>
       </SheetTrigger>
       <SheetContent side='left'>
         <SheetHeader>
-          <SheetTitle>
-            <LogoLink />
+          <SheetTitle className='flex'>
+            <LogoLink onClick={() => setOpen(false)} />
           </SheetTitle>
         </SheetHeader>
         <Nav

diff --git a/src/components/layout/Nav.tsx b/src/components/layout/Nav.tsx
@@ -1,5 +1,7 @@
 import { Link } from '@/lib/navigation';
 
+import { Button } from '@/components/ui/Button';
+
 type NavProps = {
   className?: string;
   onClick?: () => void;
@@ -10,28 +12,30 @@ type NavProps = {
 
 function Nav({ className, onClick, news, events, about }: NavProps) {
   return (
-    <nav className={className}>
-      <Link
-        className='text-foreground/60 transition-colors hover:text-foreground/80'
-        href='/news'
-        onClick={onClick}
-      >
-        {news}
-      </Link>
-      <Link
-        className='text-foreground/60 transition-colors hover:text-foreground/80'
-        href='/events'
-        onClick={onClick}
-      >
-        {events}
-      </Link>
-      <Link
-        className='text-foreground/60 transition-colors hover:text-foreground/80'
-        href='/about'
-        onClick={onClick}
-      >
-        {about}
-      </Link>
+    <nav className='flex items-center'>
+      <ul className={className}>
+        <li>
+          <Button asChild variant='nav' size='none'>
+            <Link href='/news' onClick={onClick}>
+              {news}
+            </Link>
+          </Button>
+        </li>
+        <li>
+          <Button asChild variant='nav' size='none'>
+            <Link href='/events' onClick={onClick}>
+              {events}
+            </Link>
+          </Button>
+        </li>
+        <li>
+          <Button asChild variant='nav' size='none'>
+            <Link href='/about' onClick={onClick}>
+              {about}
+            </Link>
+          </Button>
+        </li>
+      </ul>
     </nav>
   );
 }

diff --git a/src/components/providers/RootProviders.tsx b/src/components/providers/RootProviders.tsx
@@ -1,7 +1,7 @@
-import { type ReactNode } from "react";
+import { type ReactNode } from 'react';
 
-import { IntlErrorProvider } from "@/components/providers/IntlErrorProvider";
-import { ThemeProvider } from "@/components/providers/ThemeProvider";
+import { IntlErrorProvider } from '@/components/providers/IntlErrorProvider';
+import { ThemeProvider } from '@/components/providers/ThemeProvider';
 
 type Props = {
   children: ReactNode;

diff --git a/src/components/ui/Button.tsx b/src/components/ui/Button.tsx
@@ -1,7 +1,9 @@
-import { type VariantProps, cva } from '@/lib/utils';
 import { Slot } from '@radix-ui/react-slot';
+
 import * as React from 'react';
 
+import { type VariantProps, cva } from '@/lib/utils';
+
 const buttonVariants = cva({
   base: 'inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
   variants: {
@@ -14,12 +16,15 @@ const buttonVariants = cva({
       secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80',
       ghost: 'hover:bg-accent hover:text-accent-foreground',
       link: 'text-primary underline-offset-4 hover:underline',
+      nav: 'font-normal text-foreground/60 transition-colors hover:text-foreground/80',
+      none: '',
     },
     size: {
       default: 'h-10 px-4 py-2',
       sm: 'h-9 rounded-md px-3',
       lg: 'h-11 rounded-md px-8',
       icon: 'h-10 w-10',
+      none: '',
     },
   },
   defaultVariants: {