From e496147aa48179cb24562f6eeb3e648c366be96b Mon Sep 17 00:00:00 2001
From: nub31 <oliverlhs@outlook.com>
Date: Tue, 17 Mar 2026 18:20:46 +0100
Subject: [PATCH] Layout

---
 src/App.svelte        |  33 ++++-------
 src/Footer.svelte     |  27 ---------
 src/Layout.svelte     | 133 ++++++++++++++++++++++++++++++++++++++++++
 src/Navigation.svelte | 102 --------------------------------
 4 files changed, 144 insertions(+), 151 deletions(-)
 delete mode 100644 src/Footer.svelte
 create mode 100644 src/Layout.svelte
 delete mode 100644 src/Navigation.svelte

diff --git a/src/App.svelte b/src/App.svelte
index 8a128d5..f40f115 100644
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -1,16 +1,14 @@
 <script lang="ts">
     import Router, { route } from "./lib/components/Router.svelte";
+    import { getTheme } from "./lib/theme.svelte";
+    import Layout from "./Layout.svelte";
     import "./app.css";
 
     import HomePage from "./pages/HomePage.svelte";
-    import ToastProvider from "./lib/components/toast/ToastProvider.svelte";
-    import Navigation from "./Navigation.svelte";
-    import Footer from "./Footer.svelte";
     import TaxiPage from "./pages/TaxiPage.svelte";
     import BusPage from "./pages/BusPage.svelte";
     import ContactPage from "./pages/ContactPage.svelte";
     import AccessibilityPage from "./pages/AccessibilityPage.svelte";
-    import { getTheme } from "./lib/theme.svelte";
 
     route("/", HomePage);
     route("/taxi", TaxiPage);
@@ -23,21 +21,12 @@
     });
 </script>
 
-<div class="flex min-h-screen flex-col bg-primary-200 text-contrast-900">
-    <Navigation>
-        <main class="grow px-4 pb-16 pt-8">
-            <div class="mx-auto max-w-7xl">
-                <Router>
-                    {#snippet notfound()}
-                        <h1>Not found</h1>
-                        <p>Sorry, the page you are looking for does not exist.</p>
-                        <p>Return to <a href="/">home</a>.</p>
-                    {/snippet}
-                </Router>
-            </div>
-        </main>
-
-        <Footer />
-    </Navigation>
-</div>
-<ToastProvider />
+<Layout>
+    <Router>
+        {#snippet notfound()}
+            <h1>Not found</h1>
+            <p>Sorry, the page you are looking for does not exist.</p>
+            <p>Return to <a href="/">home</a>.</p>
+        {/snippet}
+    </Router>
+</Layout>
diff --git a/src/Footer.svelte b/src/Footer.svelte
deleted file mode 100644
index e85c978..0000000
--- a/src/Footer.svelte
+++ /dev/null
@@ -1,27 +0,0 @@
-<script lang="ts">
-    import Link from "./lib/components/link/Link.svelte";
-    import { Routes } from "./lib/routes";
-</script>
-
-<footer
-    class="flex flex-col items-center border-t-2 border-contrast-900 bg-contrast-900 px-2 py-8 text-primary-200 dark:border-primary-300 dark:bg-primary-100 dark:text-contrast-900"
->
-    <div class="grid grid-cols-1 md:grid-cols-3 gap-8 text-center md:text-lg">
-        {#each Routes.footerRoutes as section}
-            <ul>
-                <li>
-                    <h6 class="font-semibold">{section.text}</h6>
-                </li>
-                {#each section.routes as route}
-                    <li>
-                        <Link target={route.target} href={route.url}>
-                            {route.text}
-                        </Link>
-                    </li>
-                {/each}
-            </ul>
-        {/each}
-    </div>
-    <div class="mt-8 text-center font-semibold">Org nr: 816 230 942</div>
-    <div class="mt-2 text-center font-semibold">© 2026 minibusservice.no - All Rights Reserved.</div>
-</footer>
diff --git a/src/Layout.svelte b/src/Layout.svelte
new file mode 100644
index 0000000..09b7724
--- /dev/null
+++ b/src/Layout.svelte
@@ -0,0 +1,133 @@
+<script lang="ts">
+    import Logo from "./lib/components/icons/logo/Logo.svelte";
+    import sunIcon from "./assets/icons/sun.svg";
+    import moonIcon from "./assets/icons/moon.svg";
+    import { slide } from "svelte/transition";
+    import Toggle from "./lib/components/Toggle.svelte";
+    import { Routes } from "./lib/routes";
+    import { isCurrentPath } from "./lib/components/Router.svelte";
+    import { getTheme, toggleTheme } from "./lib/theme.svelte";
+    import ToastProvider from "./lib/components/toast/ToastProvider.svelte";
+    import Link from "./lib/components/link/Link.svelte";
+
+    let sidebarOpen = $state(false);
+
+    let { children } = $props();
+</script>
+
+<div class="flex min-h-screen flex-col bg-primary-200 text-contrast-900">
+    <header class="sticky top-0 z-20 flex h-16 justify-center border-b-2 border-contrast-100 bg-primary-100 shadow-lg">
+        <div class="flex w-full max-w-7xl flex-row items-center justify-between p-4">
+            <a class="h-full grow" href="/">
+                <Logo />
+            </a>
+            <ul class="hidden flex-row justify-end gap-10 font-medium uppercase md:text-lg lg:flex">
+                {#each Routes.topbarRoutes as route}
+                    <li>
+                        <a class:border-b-2={isCurrentPath(route.url)} class="border-b-0 border-accent transition-colors hover:text-accent" href={route.url} target={route.target}>
+                            {route.text}
+                        </a>
+                    </li>
+                {/each}
+            </ul>
+            <div class="ml-12 flex aspect-square h-full items-center justify-center p-1">
+                <button
+                    class="hamburger-icon relative inline-block h-full w-full cursor-pointer text-contrast-100"
+                    aria-label="open sidebar"
+                    class:open={sidebarOpen}
+                    onclick={() => (sidebarOpen = !sidebarOpen)}
+                >
+                    <div class="line absolute top-0 h-0.5 w-full origin-top-left rounded-full bg-contrast-900 transition-all"></div>
+                    <div class="line middle absolute top-1/2 h-0.5 w-full -translate-y-1/2 rounded-full bg-contrast-900 transition-all delay-100"></div>
+                    <div class="line absolute bottom-0 h-0.5 w-full origin-bottom-left rounded-full bg-contrast-900 transition-all"></div>
+                </button>
+            </div>
+        </div>
+        {#if sidebarOpen}
+            <aside>
+                <nav
+                    transition:slide={{ axis: "x" }}
+                    class="fixed bottom-14 right-0 top-16 z-10 flex max-w-full flex-col overflow-auto border-l-2 border-contrast-100 bg-primary-100 px-4 py-8 shadow-lg sm:bottom-0"
+                >
+                    <ul class="flex grow flex-col gap-2 pr-20 text-lg font-medium lg:text-xl">
+                        {#each Routes.sidebarRoutes as route}
+                            <li>
+                                <a
+                                    class:border-b-2={isCurrentPath(route.url)}
+                                    class="border-b-0 border-accent transition-colors hover:text-accent"
+                                    href={route.url}
+                                    target={route.target}
+                                >
+                                    {route.text}
+                                </a>
+                            </li>
+                        {/each}
+                    </ul>
+                    <div class="flex w-fit flex-col items-center gap-3">
+                        <Toggle invertColor={true} checked={getTheme() == "dark"} leftIcon={sunIcon} rightIcon={moonIcon} on:change={toggleTheme} />
+                    </div>
+                </nav>
+            </aside>
+        {/if}
+    </header>
+
+    <main class="grow px-4 pb-16 pt-8">
+        <div class="mx-auto max-w-7xl">
+            {@render children()}
+        </div>
+    </main>
+
+    <footer
+        class="flex flex-col items-center border-t-2 border-contrast-900 bg-contrast-900 px-2 py-8 text-primary-200 dark:border-primary-300 dark:bg-primary-100 dark:text-contrast-900"
+    >
+        <div class="grid grid-cols-1 md:grid-cols-3 gap-8 text-center md:text-lg">
+            {#each Routes.footerRoutes as section}
+                <ul>
+                    <li>
+                        <h6 class="font-semibold">{section.text}</h6>
+                    </li>
+                    {#each section.routes as route}
+                        <li>
+                            <Link target={route.target} href={route.url}>
+                                {route.text}
+                            </Link>
+                        </li>
+                    {/each}
+                </ul>
+            {/each}
+        </div>
+        <div class="mt-8 text-center font-semibold">Org nr: 816 230 942</div>
+        <div class="mt-2 text-center font-semibold">© 2026 minibusservice.no - All Rights Reserved.</div>
+    </footer>
+
+    <!-- Mobile navigation -->
+    <nav class="sticky bottom-0 z-10 flex h-14 flex-row items-center justify-around border-t-2 border-contrast-100 bg-primary-100 px-2 text-xs shadow-t-lg sm:hidden">
+        {#each Routes.topbarRoutes as route}
+            <a
+                href={route.url}
+                target={route.target}
+                class={`flex flex-col items-center decoration-accent transition-opacity ${isCurrentPath(route.url) ? "underline opacity-100" : "opacity-50"}`}
+            >
+                <img src={route.icon} alt={route.text} class="h-6 dark:invert" />
+                <span> {route.text} </span>
+            </a>
+        {/each}
+    </nav>
+</div>
+
+<ToastProvider />
+
+<style>
+    .hamburger-icon.open .line:first-child {
+        transform: rotate(45deg) translateX(15%);
+    }
+
+    .hamburger-icon.open .line:last-child {
+        transform: rotate(-45deg) translateX(15%);
+    }
+
+    .hamburger-icon.open .line.middle {
+        width: 0;
+        transition: transform 0.1s;
+    }
+</style>
diff --git a/src/Navigation.svelte b/src/Navigation.svelte
deleted file mode 100644
index 0dd5904..0000000
--- a/src/Navigation.svelte
+++ /dev/null
@@ -1,102 +0,0 @@
-<script lang="ts">
-    import Logo from "./lib/components/icons/logo/Logo.svelte";
-    import sunIcon from "./assets/icons/sun.svg";
-    import moonIcon from "./assets/icons/moon.svg";
-    import { slide } from "svelte/transition";
-    import Toggle from "./lib/components/Toggle.svelte";
-    import { Routes } from "./lib/routes";
-    import { isCurrentPath } from "./lib/components/Router.svelte";
-    import { getTheme, toggleTheme } from "./lib/theme.svelte";
-
-    let sidebarOpen = false;
-
-    function toggleMenuOpen() {
-        sidebarOpen = !sidebarOpen;
-    }
-</script>
-
-<header class="sticky top-0 z-20 flex h-16 justify-center border-b-2 border-contrast-100 bg-primary-100 shadow-lg">
-    <div class="flex w-full max-w-7xl flex-row items-center justify-between p-4">
-        <a class="h-full grow" href="/">
-            <Logo />
-        </a>
-        <ul class="hidden flex-row justify-end gap-10 font-medium uppercase md:text-lg lg:flex">
-            {#each Routes.topbarRoutes as route}
-                <li>
-                    <a class:border-b-2={isCurrentPath(route.url)} class="border-b-0 border-accent transition-colors hover:text-accent" href={route.url} target={route.target}>
-                        {route.text}
-                    </a>
-                </li>
-            {/each}
-        </ul>
-        <div class="ml-12 flex aspect-square h-full items-center justify-center p-1">
-            <button
-                class="hamburger-icon relative inline-block h-full w-full cursor-pointer text-contrast-100"
-                aria-label="open sidebar"
-                class:open={sidebarOpen}
-                on:click={toggleMenuOpen}
-            >
-                <div class="line absolute top-0 h-0.5 w-full origin-top-left rounded-full bg-contrast-900 transition-all"></div>
-                <div class="line middle absolute top-1/2 h-0.5 w-full -translate-y-1/2 rounded-full bg-contrast-900 transition-all delay-100"></div>
-                <div class="line absolute bottom-0 h-0.5 w-full origin-bottom-left rounded-full bg-contrast-900 transition-all"></div>
-            </button>
-        </div>
-    </div>
-    {#if sidebarOpen}
-        <aside>
-            <nav
-                transition:slide={{ axis: "x" }}
-                class="fixed bottom-14 right-0 top-16 z-10 flex max-w-full flex-col overflow-auto border-l-2 border-contrast-100 bg-primary-100 px-4 py-8 shadow-lg sm:bottom-0"
-            >
-                <ul class="flex grow flex-col gap-2 pr-20 text-lg font-medium lg:text-xl">
-                    {#each Routes.sidebarRoutes as route}
-                        <li>
-                            <a
-                                class:border-b-2={isCurrentPath(route.url)}
-                                class="border-b-0 border-accent transition-colors hover:text-accent"
-                                href={route.url}
-                                target={route.target}
-                            >
-                                {route.text}
-                            </a>
-                        </li>
-                    {/each}
-                </ul>
-                <div class="flex w-fit flex-col items-center gap-3">
-                    <Toggle invertColor={true} checked={getTheme() == "dark"} leftIcon={sunIcon} rightIcon={moonIcon} on:change={toggleTheme} />
-                </div>
-            </nav>
-        </aside>
-    {/if}
-</header>
-
-<slot />
-
-<!-- Mobile navigation -->
-<nav class="sticky bottom-0 z-10 flex h-14 flex-row items-center justify-around border-t-2 border-contrast-100 bg-primary-100 px-2 text-xs shadow-t-lg sm:hidden">
-    {#each Routes.topbarRoutes as route}
-        <a
-            href={route.url}
-            target={route.target}
-            class={`flex flex-col items-center decoration-accent transition-opacity ${isCurrentPath(route.url) ? "underline opacity-100" : "opacity-50"}`}
-        >
-            <img src={route.icon} alt={route.text} class="h-6 dark:invert" />
-            <span> {route.text} </span>
-        </a>
-    {/each}
-</nav>
-
-<style>
-    .hamburger-icon.open .line:first-child {
-        transform: rotate(45deg) translateX(15%);
-    }
-
-    .hamburger-icon.open .line:last-child {
-        transform: rotate(-45deg) translateX(15%);
-    }
-
-    .hamburger-icon.open .line.middle {
-        width: 0;
-        transition: transform 0.1s;
-    }
-</style>