web/settings: move sub navigation into its own component

web/src/components/settings/SettingsCategory.svelte

@@ -38,7 +38,7 @@
         display: flex;
         flex-direction: column;
         gap: var(--padding);
-        padding: calc(var(--settings-padding) / 2);
+        padding: calc(var(--subnav-padding) / 2);
         border-radius: 18px;
         transition: opacity 0.2s;
     }

web/src/components/sidebar/Sidebar.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
     import { t } from "$lib/i18n/translations";
+    import { defaultSettingsPage } from "$lib/subnav";
 
     import CobaltLogo from "$components/sidebar/CobaltLogo.svelte";
     import SidebarTab from "$components/sidebar/SidebarTab.svelte";
@@ -13,8 +14,6 @@
     import IconHeart from "@tabler/icons-svelte/IconHeart.svelte";
     import IconInfoCircle from "@tabler/icons-svelte/IconInfoCircle.svelte";
 
-    import { defaultSettingsPage } from "$lib/settings/defaults";
-
     let screenWidth: number;
     let settingsLink = defaultSettingsPage();
 

web/src/components/subnav/PageNav.svelte

@@ -0,0 +1,230 @@
+<script lang="ts">
+    import { page } from "$app/stores";
+    import { goto } from "$app/navigation";
+    import { browser } from "$app/environment";
+
+    import { t } from "$lib/i18n/translations";
+
+    import IconArrowLeft from "@tabler/icons-svelte/IconArrowLeft.svelte";
+
+    export let pageName: string;
+    export let homeNavPath: string;
+    export let homeDesktopPath: string;
+    export let homeTitle: string;
+    export let pageSubtitle = "";
+
+    let screenWidth: number;
+
+    $: currentPageTitle = $page.url.pathname.split("/").at(-1);
+    $: stringPageTitle =
+        currentPageTitle !== pageName
+            ? ` / ${$t(`${pageName}.page.${currentPageTitle}`)}`
+            : "";
+
+    $: isMobile = screenWidth <= 750;
+    $: isHome = $page.url.pathname === homeNavPath;
+    $: {
+        if (browser && !isMobile && isHome) {
+            goto(homeDesktopPath, { replaceState: true });
+        }
+    }
+</script>
+
+<svelte:head>
+    <title>
+        {homeTitle}{stringPageTitle} ~ {$t("general.cobalt")}
+    </title>
+</svelte:head>
+
+<svelte:window bind:innerWidth={screenWidth} />
+
+<div id="{pageName}-page" class="subnav-page">
+    <div class="subnav-sidebar" class:back-visible={!isHome && isMobile}>
+        <div class="subnav-header">
+            {#if isMobile}
+                {#if !isHome}
+                    <a
+                        class="back-button"
+                        href={homeNavPath}
+                        role="button"
+                        aria-label={$t("a11y.general.back")}
+                    >
+                        <IconArrowLeft />
+                    </a>
+                {/if}
+                <h3
+                    class="subnav-page-title"
+                    aria-level="1"
+                    tabindex="-1"
+                    data-first-focus
+                    data-focus-ring-hidden
+                >
+                    {#if !isHome}
+                        {$t(`${pageName}.page.${currentPageTitle}`)}
+                    {:else}
+                        {homeTitle}
+                    {/if}
+                </h3>
+            {:else}
+                {#if pageSubtitle}
+                    <div class="subtext subnav-subtitle">
+                        {pageSubtitle}
+                    </div>
+                {/if}
+                <h2 class="subnav-page-title" aria-level="1">
+                    {homeTitle}
+                </h2>
+            {/if}
+        </div>
+
+        <nav class="subnav-navigation" class:visible-mobile={isMobile && isHome}>
+            <slot name="navigation"></slot>
+            {#if isMobile && isHome && pageSubtitle}
+                <div class="subtext subnav-subtitle center">
+                    {pageSubtitle}
+                </div>
+            {/if}
+        </nav>
+    </div>
+
+    {#if !isMobile || !isHome}
+        <main
+            id="{pageName}-page-content"
+            class="subnav-page-content"
+            tabindex="-1"
+            data-first-focus
+            data-focus-ring-hidden
+        >
+            <slot name="content"></slot>
+        </main>
+    {/if}
+</div>
+
+<style>
+    .subnav-page {
+        --subnav-nav-width: 250px;
+        --subnav-padding: 30px;
+        --subnav-padding-small: calc(
+            var(--subnav-padding) - var(--padding)
+        );
+        display: grid;
+        width: 100%;
+        grid-template-columns: var(--subnav-nav-width) 1fr;
+        overflow: hidden;
+        padding-left: var(--subnav-padding);
+    }
+
+    .subnav-page-content {
+        display: flex;
+        flex-direction: column;
+        max-width: 600px;
+        padding: calc(var(--subnav-padding) / 2);
+        overflow-y: scroll;
+    }
+
+    .subnav-sidebar,
+    .subnav-navigation {
+        display: flex;
+        flex-direction: column;
+        overflow-y: scroll;
+    }
+
+    .subnav-sidebar {
+        width: var(--subnav-nav-width);
+        padding-top: var(--subnav-padding);
+    }
+
+    .subnav-sidebar.back-visible {
+        overflow: visible;
+    }
+
+    .subnav-sidebar {
+        gap: var(--padding);
+    }
+
+    .subnav-navigation {
+        gap: var(--padding);
+        padding-bottom: var(--padding);
+    }
+
+    .subnav-header {
+        --back-padding: calc(var(--padding) / 2);
+    }
+
+    .subnav-subtitle {
+        padding: 0;
+    }
+
+    .subnav-subtitle.center {
+        text-align: center;
+    }
+
+    .back-button {
+        display: flex;
+        align-items: center;
+        color: var(--secondary);
+        gap: var(--back-padding);
+        padding: var(--back-padding);
+
+        position: absolute;
+        left: var(--back-padding);
+    }
+
+    .back-button:active {
+        background: var(--button-hover-transparent);
+        border-radius: var(--border-radius);
+    }
+
+    .back-button :global(svg) {
+        stroke-width: 1.8px;
+        height: 22px;
+        width: 22px;
+        will-change: transform;
+    }
+
+    @media screen and (max-width: 750px) {
+        .subnav-page {
+            --subnav-nav-width: 100%;
+            display: flex;
+            flex-direction: column;
+            grid-template-columns: 1fr;
+            padding: 0;
+        }
+
+        .subnav-navigation {
+            padding: var(--padding);
+            padding-bottom: calc(var(--padding) * 2);
+            display: none;
+        }
+
+        .subnav-navigation.visible-mobile {
+            display: flex;
+        }
+
+        .subnav-page-content {
+            padding: var(--padding) 0;
+            padding-top: 0;
+            max-width: unset;
+        }
+
+        .subnav-header {
+            display: flex;
+            align-items: center;
+            position: sticky;
+            padding: var(--padding);
+            gap: 4px;
+            justify-content: center;
+        }
+
+        .subnav-sidebar {
+            gap: 0px;
+            padding: 0;
+        }
+
+        .subnav-page-title {
+            text-align: center;
+            letter-spacing: -0.3px;
+            font-size: 16.5px;
+        }
+    }
+</style>

web/src/components/settings/SettingsNavSection.svelte → web/src/components/subnav/PageNavSection.svelte

@@ -1,48 +1,46 @@
 <script lang="ts">
-    import { t } from "$lib/i18n/translations";
-
     export let sectionTitle: string = "";
 </script>
 
-<div id="settings-section">
+<div id="subnav-section">
     {#if sectionTitle}
-        <div id="settings-section-title">
-            {$t(`settings.section.${sectionTitle}`)}
+        <div id="subnav-section-title">
+            {sectionTitle}
         </div>
     {/if}
-    <div id="settings-section-categories">
+    <div id="subnav-section-categories">
         <slot></slot>
     </div>
 </div>
 
 <style>
-    #settings-section,
-    #settings-section-categories {
+    #subnav-section,
+    #subnav-section-categories {
         display: flex;
         flex-direction: column;
     }
 
-    #settings-section {
+    #subnav-section {
         gap: 6px;
         border-radius: var(--border-radius);
         overflow: hidden;
     }
 
-    #settings-section-title {
+    #subnav-section-title {
         font-size: 12.5px;
         font-weight: 500;
         color: var(--gray);
         padding-left: 8px;
     }
 
     @media screen and (max-width: 750px) {
-        #settings-section-categories {
+        #subnav-section-categories {
             background: var(--button);
             border-radius: var(--border-radius);
             box-shadow: var(--button-box-shadow);
         }
 
-        #settings-section-title {
+        #subnav-section-title {
             padding-left: calc(7px * 1.5);
         }
     }