From 60e2b7732403f1d28b032dc67c7d3420903234d6 Mon Sep 17 00:00:00 2001
From: Chneemann <andre-kempf@mailbox.org>
Date: Sun, 16 Aug 2026 19:09:46 +0200
Subject: [PATCH] feat(layout): add mobile legal menu overlay and unify footer
 links

---
 app/(app)/layout.tsx                      |   6 +-
 app/components/layout/Footer.tsx          |  42 ++++---
 app/components/layout/MobileLegalMenu.tsx | 144 ++++++++++++++++++++++
 app/components/layout/Navbar.tsx          |  52 +++++++-
 utils/legal.ts                            |  31 +++++
 5 files changed, 250 insertions(+), 25 deletions(-)
 create mode 100644 app/components/layout/MobileLegalMenu.tsx
 create mode 100644 utils/legal.ts

diff --git a/app/(app)/layout.tsx b/app/(app)/layout.tsx
index 8877fa6..0202145 100644
--- a/app/(app)/layout.tsx
+++ b/app/(app)/layout.tsx
@@ -37,14 +37,16 @@ export default async function AppLayout({
       <div className="hidden md:flex">
         <Sidebar />
       </div>
-      <div className="flex-1 flex flex-col min-w-0 overflow-hidden pb-16 md:pb-0">
+      <div className="flex-1 flex flex-col min-w-0 overflow-hidden pb-4 md:pb-0">
         <Header />
 
         <div className="flex-1 overflow-y-auto flex flex-col">
           <main className="flex-1 p-4 md:p-6 lg:p-8">{children}</main>
         </div>
 
-        <Footer />
+        <div className="hidden md:flex">
+          <Footer />
+        </div>
 
         <div className="md:hidden flex">
           <Navbar />
diff --git a/app/components/layout/Footer.tsx b/app/components/layout/Footer.tsx
index 4ac1d56..939eded 100644
--- a/app/components/layout/Footer.tsx
+++ b/app/components/layout/Footer.tsx
@@ -1,14 +1,15 @@
 /**
- * @file app/components/layout/Footer.tsx
+ * @file components/layout/Footer.tsx
  * @description Client component rendering the site footer with a copyright notice and links to legal pages like Imprint and Privacy Policy.
  */
 
 "use client";
 
 import Link from "next/link";
+import { LEGAL_LINKS, COPYRIGHT_TEXT, ICON_MAP } from "@/utils/legal";
 
 /**
- * Renders the application footer containing dynamic copyright information and legal navigation links.
+ * Renders the site footer containing the dynamic copyright notice and legal compliance links with icons.
  *
  * @returns {JSX.Element} The rendered footer component.
  */
@@ -19,25 +20,30 @@ export default function Footer() {
     <footer className="w-full bg-background text-xs px-3 py-3 border-t border-border">
       <div className="max-w-5xl mx-auto flex flex-col md:flex-row justify-between items-center gap-2">
         {/* Left: Copyright Notice */}
-        <p className="order-1 md:order-1">
-          &copy; {currentYear} André Kempf. All rights reserved.
+        <p className="order-1 md:order-1 text-foreground-muted">
+          {COPYRIGHT_TEXT(currentYear)}
         </p>
 
         {/* Right: Legal & Compliance Links */}
-        <div className="flex gap-4 order-2 md:order-3">
-          <Link
-            href="/imprint"
-            className="hover:text-primary transition-colors"
-          >
-            Imprint
-          </Link>
-          <span>|</span>
-          <Link
-            href="/privacy"
-            className="hover:text-primary transition-colors"
-          >
-            Privacy Policy
-          </Link>
+        <div className="flex items-center gap-4 order-2 md:order-3 text-foreground-muted">
+          {LEGAL_LINKS.map((link, index) => {
+            const IconComponent = ICON_MAP[link.iconName];
+
+            return (
+              <div key={link.href} className="flex items-center gap-4">
+                <Link
+                  href={link.href}
+                  className="group inline-flex items-center gap-1.5 hover:text-primary transition-colors cursor-pointer"
+                >
+                  <IconComponent className="w-3.5 h-3.5 text-foreground-muted group-hover:text-primary transition-colors" />
+                  <span>{link.name}</span>
+                </Link>
+                {index < LEGAL_LINKS.length - 1 && (
+                  <span className="text-foreground-muted">|</span>
+                )}
+              </div>
+            );
+          })}
         </div>
       </div>
     </footer>
diff --git a/app/components/layout/MobileLegalMenu.tsx b/app/components/layout/MobileLegalMenu.tsx
new file mode 100644
index 0000000..9b1fee5
--- /dev/null
+++ b/app/components/layout/MobileLegalMenu.tsx
@@ -0,0 +1,144 @@
+/**
+ * @file components/layout/MobileLegalMenu.tsx
+ * @description Client component providing a mobile toggle menu for accessing legal links and copyright information in a slide-up overlay.
+ */
+
+"use client";
+
+import { useState, useRef, useEffect } from "react";
+import Link from "next/link";
+import { MoreHorizontal, X } from "lucide-react";
+import { LEGAL_LINKS, COPYRIGHT_TEXT, ICON_MAP } from "@/utils/legal";
+
+/**
+ * Renders a mobile menu button and a slide-up modal overlay containing
+ * links to legal documentation and copyright details.
+ *
+ * @returns {JSX.Element} The rendered mobile legal menu component.
+ */
+export default function MobileLegalMenu() {
+  const [isOpen, setIsOpen] = useState(false);
+  const currentYear = new Date().getFullYear();
+  const menuRef = useRef<HTMLDivElement>(null);
+  const buttonRef = useRef<HTMLButtonElement>(null);
+
+  useEffect(() => {
+    if (!isOpen) return;
+
+    /**
+     * Closes the menu overlay when a click or touch event occurs outside the menu or trigger button.
+     *
+     * @param {MouseEvent | TouchEvent} event - The pointer or touch event object.
+     */
+    const handleClickOutside = (event: MouseEvent | TouchEvent) => {
+      const target = event.target as Node;
+      if (
+        menuRef.current &&
+        !menuRef.current.contains(target) &&
+        buttonRef.current &&
+        !buttonRef.current.contains(target)
+      ) {
+        setIsOpen(false);
+      }
+    };
+
+    /**
+     * Closes the menu overlay when the Escape key is pressed.
+     *
+     * @param {KeyboardEvent} event - The keyboard event object.
+     */
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.key === "Escape") {
+        setIsOpen(false);
+      }
+    };
+
+    document.addEventListener("mousedown", handleClickOutside);
+    document.addEventListener("touchstart", handleClickOutside);
+    document.addEventListener("keydown", handleKeyDown);
+
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+      document.removeEventListener("touchstart", handleClickOutside);
+      document.removeEventListener("keydown", handleKeyDown);
+    };
+  }, [isOpen]);
+
+  return (
+    <>
+      {/* "More" Button */}
+      <button
+        ref={buttonRef}
+        onClick={() => setIsOpen(!isOpen)}
+        className={`flex flex-col items-center justify-center gap-1 transition-colors cursor-pointer ${
+          isOpen
+            ? "text-primary font-semibold"
+            : "text-foreground-muted hover:text-foreground"
+        }`}
+        aria-label={isOpen ? "Close menu" : "Open more menu"}
+      >
+        {isOpen ? (
+          <X className="w-5 h-5" />
+        ) : (
+          <MoreHorizontal className="w-5 h-5" />
+        )}
+        <span className="text-xs font-medium">More</span>
+      </button>
+
+      {/* Slide-Up Overlay */}
+      {isOpen && (
+        <>
+          {/* Backdrop Overlay */}
+          <div
+            className="fixed inset-0 bottom-16 z-40 bg-black/40 backdrop-blur-sm animate-in fade-in duration-200 cursor-pointer"
+            onClick={() => setIsOpen(false)}
+          />
+
+          {/* Menü-Card */}
+          <div
+            ref={menuRef}
+            className="fixed bottom-16 left-0 right-0 z-40 bg-background-muted/95 backdrop-blur-xl border-t border-border p-3 rounded-t-2xl shadow-2xl space-y-4 animate-in slide-in-from-bottom duration-200 cursor-default"
+          >
+            {/* Header */}
+            <div className="flex justify-between items-center border-b border-border pb-3">
+              <span className="font-semibold text-xs tracking-wider uppercase text-foreground-muted">
+                Legal & Info
+              </span>
+              <button
+                onClick={() => setIsOpen(false)}
+                className="text-foreground-muted hover:text-foreground p-1 rounded-lg hover:bg-foreground/5 transition-colors cursor-pointer"
+                aria-label="Close menu"
+              >
+                <X className="w-4 h-4" />
+              </button>
+            </div>
+
+            {/* Shared Links */}
+            <div className="flex flex-col gap-1">
+              {LEGAL_LINKS.map((link) => {
+                const IconComponent = ICON_MAP[link.iconName];
+
+                return (
+                  <Link
+                    key={link.href}
+                    href={link.href}
+                    onClick={() => setIsOpen(false)}
+                    className="flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium text-foreground-muted hover:text-foreground hover:bg-foreground/5 transition-colors cursor-pointer"
+                  >
+                    <IconComponent className="w-4 h-4 text-primary" />
+                    <span>{link.name}</span>
+                  </Link>
+                );
+              })}
+            </div>
+
+            {/* Shared Copyright */}
+            <p className="text-[11px] text-foreground-muted text-center pt-3 border-t border-border/60">
+              {COPYRIGHT_TEXT(currentYear)}
+            </p>
+          </div>
+        </>
+      )}
+    </>
+  );
+}
diff --git a/app/components/layout/Navbar.tsx b/app/components/layout/Navbar.tsx
index 92e4842..4fb7784 100644
--- a/app/components/layout/Navbar.tsx
+++ b/app/components/layout/Navbar.tsx
@@ -1,5 +1,5 @@
 /**
- * @file Navbar.tsx
+ * @file components/layout/Navbar.tsx
  * @description Client component providing responsive navigation for desktop and mobile views with active route indicators and trash count.
  */
 
@@ -9,7 +9,14 @@ import Link from "next/link";
 import { usePathname } from "next/navigation";
 import { LayoutDashboard, FileText, Trash2, FilePenLine } from "lucide-react";
 import useSWR from "swr";
+import MobileLegalMenu from "./MobileLegalMenu";
 
+/**
+ * Fetcher function for SWR to retrieve JSON data from the API endpoint.
+ *
+ * @param {string} url - The API endpoint URL to fetch.
+ * @returns {Promise<any>} The parsed JSON response data.
+ */
 const fetcher = (url: string) => fetch(url).then((res) => res.json());
 
 /**
@@ -38,7 +45,12 @@ export default function Navbar() {
 
   const trashCount = data?.count || 0;
 
-  // Shared function to render navigation links
+  /**
+   * Shared helper function to render navigation links for the desktop sidebar layout.
+   *
+   * @param {boolean} [isMobile=false] - Flag indicating whether the links are rendered for mobile layout.
+   * @returns {JSX.Element[]} An array of rendered navigation link elements.
+   */
   const renderNavLinks = (isMobile = false) =>
     navItems.map((item) => {
       const Icon = item.icon;
@@ -91,9 +103,39 @@ export default function Navbar() {
         {renderNavLinks(false)}
       </nav>
 
-      {/* Mobile Navigation */}
-      <nav className="md:hidden h-16 border-t border-border backdrop-blur-xl px-6 flex items-center justify-around fixed bottom-0 left-0 right-0 z-50 bg-background-muted">
-        {renderNavLinks(true)}
+      {/* Mobile Bottom Navigation */}
+      <nav className="md:hidden h-16 border-t border-border backdrop-blur-xl px-4 flex items-center justify-around fixed bottom-0 left-0 right-0 z-50 bg-background-muted">
+        {navItems.map((item) => {
+          const Icon = item.icon;
+          const isTrash = item.href === "/trash";
+          const isActive =
+            pathname === item.href ||
+            (item.href !== "/" && pathname.startsWith(item.href));
+
+          return (
+            <Link
+              key={item.href}
+              href={item.href === "/tasks" ? "/tasks?task=new" : item.href}
+              className={`flex flex-col items-center justify-center gap-1 transition-colors ${
+                isActive
+                  ? "text-primary font-semibold"
+                  : "text-foreground-muted hover:text-foreground"
+              }`}
+            >
+              <div className="relative inline-flex items-center">
+                <Icon className="w-5 h-5" />
+                {isTrash && trashCount > 0 && (
+                  <span className="absolute -top-1.5 -right-2 flex h-3.5 w-3.5 items-center justify-center rounded-full bg-destructive text-[9px] font-bold text-white shadow-sm ring-1 ring-background">
+                    {trashCount}
+                  </span>
+                )}
+              </div>
+              <span className="text-xs font-medium">{item.name}</span>
+            </Link>
+          );
+        })}
+
+        <MobileLegalMenu />
       </nav>
     </>
   );
diff --git a/utils/legal.ts b/utils/legal.ts
new file mode 100644
index 0000000..d819cef
--- /dev/null
+++ b/utils/legal.ts
@@ -0,0 +1,31 @@
+/**
+ * @file utils/legal.ts
+ * @description Defines legal navigation configurations, icon mappings, and dynamic copyright text generators.
+ */
+
+import { FileText, ShieldCheck } from "lucide-react";
+
+/**
+ * List of legal navigation links with their corresponding route paths and icon identifiers.
+ */
+export const LEGAL_LINKS = [
+  { name: "Imprint", href: "/imprint", iconName: "FileText" },
+  { name: "Privacy Policy", href: "/privacy", iconName: "ShieldCheck" },
+] as const;
+
+/**
+ * Mapping object linking string identifiers to their respective Lucide icon components.
+ */
+export const ICON_MAP = {
+  FileText: FileText,
+  ShieldCheck: ShieldCheck,
+};
+
+/**
+ * Generates the standardized copyright notice string with the given year.
+ *
+ * @param {number} year - The current target year for the copyright notice.
+ * @returns {string} The formatted copyright text string.
+ */
+export const COPYRIGHT_TEXT = (year: number) =>
+  `© ${year} André Kempf. All rights reserved.`;