web/about: about page routing & navigation

web/i18n/en/about.json

@@ -0,0 +1,11 @@
+{
+    "page.general": "what's cobalt?",
+    "page.faq": "FAQ",
+
+    "page.community": "community",
+    "page.help": "get support",
+
+    "page.privacy": "privacy policy",
+    "page.terms": "terms and ethics",
+    "page.credits": "thanks & licenses"
+}

web/src/lib/subnav.ts

@@ -10,6 +10,17 @@ const defaultSettingsPage = () => {
     return "/settings/appearance";
 }
 
+const defaultAboutPage = () => {
+    if (browser) {
+        if (window.innerWidth <= 750) {
+            return "/about";
+        }
+    }
+
+    return "/about/general";
+}
+
 export {
     defaultSettingsPage,
+    defaultAboutPage
 }

web/src/routes/about/+layout.svelte

@@ -0,0 +1,90 @@
+<script lang="ts">
+    import { t } from "$lib/i18n/translations";
+    import { defaultAboutPage } from "$lib/subnav";
+
+    import PageNav from "$components/subnav/PageNav.svelte";
+
+    import PageNavTab from "$components/subnav/PageNavTab.svelte";
+    import PageNavSection from "$components/subnav/PageNavSection.svelte";
+
+    import IconComet from "@tabler/icons-svelte/IconComet.svelte";
+    import IconLock from "@tabler/icons-svelte/IconLock.svelte";
+
+    import IconHeartHandshake from "@tabler/icons-svelte/IconHeartHandshake.svelte";
+    import IconChecklist from "@tabler/icons-svelte/IconChecklist.svelte";
+
+    import IconMessages from "@tabler/icons-svelte/IconMessages.svelte";
+    import IconUsersGroup from "@tabler/icons-svelte/IconUsersGroup.svelte";
+    import IconLicense from "@tabler/icons-svelte/IconLicense.svelte";
+</script>
+
+<PageNav
+    pageName="about"
+    homeDesktopPath={defaultAboutPage()}
+    homeNavPath="/about"
+    homeTitle={$t("tabs.about")}
+    contentPadding
+    wideContent
+>
+    <svelte:fragment slot="navigation">
+        <PageNavSection>
+            <PageNavTab
+                tabPath="/about/general"
+                tabTitle={$t("about.page.general")}
+                iconColor="blue"
+            >
+                <IconComet />
+            </PageNavTab>
+            <PageNavTab
+                tabPath="/about/faq"
+                tabTitle={$t("about.page.faq")}
+                iconColor="blue"
+            >
+                <IconMessages />
+            </PageNavTab>
+        </PageNavSection>
+
+        <PageNavSection>
+            <PageNavTab
+                tabPath="/about/community"
+                tabTitle={$t("about.page.community")}
+                iconColor="green"
+            >
+                <IconUsersGroup />
+            </PageNavTab>
+            <PageNavTab
+                tabPath="/about/help"
+                tabTitle={$t("about.page.help")}
+                iconColor="green"
+            >
+                <IconHeartHandshake />
+            </PageNavTab>
+        </PageNavSection>
+
+        <PageNavSection>
+            <PageNavTab
+                tabPath="/about/privacy"
+                tabTitle={$t("about.page.privacy")}
+                iconColor="gray"
+            >
+                <IconLock />
+            </PageNavTab>
+            <PageNavTab
+                tabPath="/about/terms"
+                tabTitle={$t("about.page.terms")}
+                iconColor="gray"
+            >
+                <IconChecklist />
+            </PageNavTab>
+            <PageNavTab
+                tabPath="/about/credits"
+                tabTitle={$t("about.page.credits")}
+                iconColor="gray"
+            >
+                <IconLicense />
+            </PageNavTab>
+        </PageNavSection>
+    </svelte:fragment>
+
+    <slot slot="content"></slot>
+</PageNav>

web/src/routes/about/+page.svelte

@@ -1,13 +1,4 @@
-<script>
-    import { t } from "$lib/i18n/translations";
-
-    import Placeholder from "$components/misc/Placeholder.svelte";
-</script>
-
-<svelte:head>
-    <title>
-        {$t("tabs.about")} ~ {$t("general.cobalt")}
-    </title>
-</svelte:head>
-
-<Placeholder pageName="about" />
+<!--
+    please don't remove this file
+    it's used to display page navigation on mobile, without a blank page it won't work
+-->

web/src/routes/about/community/+page.svelte

@@ -0,0 +1 @@
+<div>community links</div>

web/src/routes/about/credits/+page.svelte

@@ -0,0 +1 @@
+<div>thanks :3</div>

web/src/routes/about/faq/+page.svelte

@@ -0,0 +1 @@
+<div>frequently asked questions</div>

web/src/routes/about/general/+page.svelte

@@ -0,0 +1 @@
+<div>what's cobalt?</div>

web/src/routes/about/help/+page.svelte

@@ -0,0 +1 @@
+<div>support methods</div>

web/src/routes/about/privacy/+page.svelte

@@ -0,0 +1 @@
+<div>privacy policy</div>

web/src/routes/about/terms/+page.svelte

@@ -0,0 +1 @@
+<div>terms and ethics here</div>

web/src/routes/settings/+page.svelte

@@ -1,2 +1,4 @@
-<!-- don't remove this file -->
-<!-- it's used to display navigation on mobile, without a blank page it doesn't work -->
+<!--
+    please don't remove this file
+    it's used to display page navigation on mobile, without a blank page it won't work
+-->