Add a sticky site footer

Adds a Footer with the brand, quick links (Menu, Basket, Your orders,
Help), and a copyright line, rendered on every page. Body is now a
full-height flex column so the footer sits at the bottom of the
viewport on short pages instead of floating right under the content.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

src/components/ui/Footer.module.scss

@@ -0,0 +1,46 @@
+@use '../../styles/variables' as *;
+
+.footer {
+  margin-top: $space-5;
+  padding: $space-4 $space-3;
+  border-top: 1px solid $color-border;
+  background: $color-surface;
+}
+
+.content {
+  max-width: 640px;
+  margin: 0 auto;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  gap: $space-3;
+}
+
+.brand {
+  text-decoration: none;
+  color: $color-text;
+}
+
+.links {
+  display: flex;
+  flex-wrap: wrap;
+  gap: $space-3;
+
+  a {
+    color: $color-text-muted;
+    text-decoration: none;
+    font-size: 0.9rem;
+
+    &:hover {
+      color: $color-text;
+    }
+  }
+}
+
+.copyright {
+  margin: 0;
+  width: 100%;
+  color: $color-text-muted;
+  font-size: 0.8rem;
+}

src/components/ui/Footer.tsx

@@ -0,0 +1,28 @@
+import { Link } from '@tanstack/react-router'
+
+import { Logo } from '#/components/ui/Logo.tsx'
+
+import styles from './Footer.module.scss'
+
+type FooterProps = {
+  brandName: string
+}
+
+export const Footer = ({ brandName }: FooterProps) => (
+  <footer className={styles.footer}>
+    <div className={styles.content}>
+      <Link to="/" className={styles.brand}>
+        <Logo name={brandName} />
+      </Link>
+      <nav className={styles.links} aria-label="Footer">
+        <Link to="/">Menu</Link>
+        <Link to="/basket">Basket</Link>
+        <Link to="/orders">Your orders</Link>
+        <Link to="/help">Help</Link>
+      </nav>
+      <p className={styles.copyright}>
+        © {new Date().getFullYear()} {brandName}
+      </p>
+    </div>
+  </footer>
+)

src/routes/__root.module.scss

@@ -20,6 +20,11 @@
   border-bottom: 1px solid color-mix(in srgb, $color-border 30%, transparent);
 }
 
+.content {
+  flex: 1 0 auto;
+  min-width: 0;
+}
+
 .brand {
   font-size: 1.1rem;
   font-weight: 700;

src/routes/__root.tsx

@@ -6,6 +6,7 @@ import {
 } from '@tanstack/react-router'
 
 import { BasketLink } from '#/components/basket/BasketLink.tsx'
+import { Footer } from '#/components/ui/Footer.tsx'
 import { Logo } from '#/components/ui/Logo.tsx'
 import { NotFound } from '#/components/ui/NotFound.tsx'
 import BetterAuthHeader from '#/integrations/better-auth/header-user.tsx'
@@ -40,7 +41,8 @@ const RootDocument = ({ children }: { children: React.ReactNode }) => {
               <BetterAuthHeader />
             </div>
           </div>
-          {children}
+          <div className={styles.content}>{children}</div>
+          <Footer brandName={brand.name} />
         </BasketProvider>
         <Scripts />
       </body>

src/styles/globals.scss

@@ -46,6 +46,9 @@ html {
 
 body {
   margin: 0;
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
   font-family:
     system-ui,
     -apple-system,