frontend/BaseLayout: make it easier to edit the BaseLayout without redefining everything

src/assets/views/layouts/BaseLayout.svelte

@@ -1,9 +1,7 @@
 <script lang="ts">
-    import {locals} from "../../ts/stores.js";
-    import {hasRoute, route} from "../../../common/Routing.js";
     import FlashMessages from "../components/FlashMessages.svelte";
-    import NavMenuItem from "../components/NavMenuItem.svelte";
+    import BaseFooter from "./base/BaseFooter.svelte";
-    import NavMenu from "../components/NavMenu.svelte";
+    import BaseHeader from "./base/BaseHeader.svelte";
 
     export let title: string;
     export let h1: string = title;
@@ -15,57 +13,11 @@
     @import "../../scss/vars";
     @import "../../scss/helpers";
 
-    header {
-		@if $headerContainer {
-			@include container;
-		}
-
-		display: flex;
-		flex-direction: row;
-		justify-content: space-between;
-		align-items: center;
-        margin-bottom: 16px;
-		padding: 0;
-
-		height: $headerHeight;
-
-        @include medium-le {
-            z-index: 1;
-			position: sticky;
-			top: 0;
-			flex-direction: row-reverse;
-
-			@include surface(3);
-        }
-
-		.logo {
-			display: flex;
-			flex-direction: row;
-			align-items: center;
-
-			padding: 0 8px;
-			font-size: 24px;
-
-			img {
-				flex-shrink: 0;
-				width: initial;
-				height: calc(#{$headerHeight} - 16px);
-				margin-right: 8px;
-				padding: 8px;
-			}
-		}
-    }
-
     main {
         @include container;
         flex-grow: 1;
     }
 
-    footer {
-        padding: 8px;
-        text-align: center;
-    }
-
 	.flash-messages {
         @include container;
     }
@@ -91,23 +43,7 @@
     <link rel="stylesheet" href="/css/layout.css">
 </svelte:head>
 
-<header>
+<BaseHeader/>
-    <a href="/" class="logo"><img src="/img/logo.svg" alt="{$locals.app.name} logo"> {$locals.app.name}</a>
-    <NavMenu>
-        {#if hasRoute('auth')}
-            {#if $locals.user}
-                {#if $locals.user.is_admin}
-                    <NavMenuItem href={route('backend')} icon="settings" text="Backend"/>
-                {/if}
-
-                <NavMenuItem href={route('account')} icon="user" text={$locals.user.name || 'Account'}/>
-                <NavMenuItem href={route('logout')} icon="log-out" text="Logout" action/>
-            {:else}
-                <NavMenuItem href={route('auth')} icon="log-in" text="Log in / Register"/>
-            {/if}
-        {/if}
-    </NavMenu>
-</header>
 
 <div class="flash-messages">
     <FlashMessages/>
@@ -125,4 +61,4 @@
     <slot/>
 </main>
 
-<footer>{$locals.app.name} v{$locals.app_version} - all rights reserved.</footer>
+<BaseFooter/>

src/assets/views/layouts/base/BaseFooter.svelte

@@ -0,0 +1,12 @@
+<script>
+    import {locals} from "../../../ts/stores.js";
+</script>
+
+<style>
+    footer {
+        padding: 8px;
+        text-align: center;
+    }
+</style>
+
+<footer>{$locals.app.name} v{$locals.app_version} - all rights reserved.</footer>

src/assets/views/layouts/base/BaseHeader.svelte

@@ -0,0 +1,43 @@
+<script>
+    import BaseHeaderLogo from "./BaseHeaderLogo.svelte";
+    import NavMenu from "../../components/NavMenu.svelte";
+    import BaseNavMenuLinks from "./BaseNavMenuLinks.svelte";
+    import BaseNavMenuAuth from "./BaseNavMenuAuth.svelte";
+</script>
+
+<style lang="scss">
+	@import "../../../scss/vars";
+	@import "../../../scss/helpers";
+
+    header {
+        @if $headerContainer {
+            @include container;
+        }
+
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+        align-items: center;
+        margin-bottom: 16px;
+        padding: 0;
+
+        height: $headerHeight;
+
+		@include medium-le {
+			z-index: 1;
+			position: sticky;
+			top: 0;
+			flex-direction: row-reverse;
+
+			@include surface(3);
+		}
+    }
+</style>
+
+<header>
+    <BaseHeaderLogo/>
+    <NavMenu>
+        <BaseNavMenuLinks/>
+        <BaseNavMenuAuth/>
+    </NavMenu>
+</header>

src/assets/views/layouts/base/BaseHeaderLogo.svelte

@@ -0,0 +1,26 @@
+<script>
+    import {locals} from "../../../ts/stores.js";
+</script>
+
+<style lang="scss">
+	@import "../../../scss/vars";
+
+    .logo {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+
+        padding: 0 8px;
+        font-size: 24px;
+
+        img {
+            flex-shrink: 0;
+            width: initial;
+            height: calc(#{$headerHeight} - 16px);
+            margin-right: 8px;
+            padding: 8px;
+        }
+    }
+</style>
+
+<a href="/" class="logo"><img src="/img/logo.svg" alt="{$locals.app.name} logo"> {$locals.app.name}</a>

src/assets/views/layouts/base/BaseNavMenuAuth.svelte

@@ -0,0 +1,18 @@
+<script>
+    import {locals} from "../../../ts/stores.js";
+    import NavMenuItem from "../../components/NavMenuItem.svelte";
+    import {hasRoute, route} from "../../../../common/Routing";
+</script>
+
+{#if hasRoute('auth')}
+    {#if $locals.user}
+        {#if $locals.user.is_admin}
+            <NavMenuItem href={route('backend')} icon="settings" text="Backend"/>
+        {/if}
+
+        <NavMenuItem href={route('account')} icon="user" text={$locals.user.name || 'Account'}/>
+        <NavMenuItem href={route('logout')} icon="log-out" text="Logout" action/>
+    {:else}
+        <NavMenuItem href={route('auth')} icon="log-in" text="Log in / Register"/>
+    {/if}
+{/if}