web: navigation & sidebar

web/src/components/sidebar/CobaltLogo.svelte

@@ -0,0 +1,15 @@
+<div id="cobalt-logo">
+    <svg width="24" height="16" viewBox="0 0 24 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path d="M0 15.6363L0 12.8594L9.47552 8.293L0 3.14038L0 0.363525L12.8575 7.4908V9.21862L0 15.6363Z" fill="white"/>
+        <path d="M11.1425 15.6363V12.8594L20.6181 8.293L11.1425 3.14038V0.363525L24 7.4908V9.21862L11.1425 15.6363Z" fill="white"/>
+    </svg>
+</div>
+
+<style>
+    #cobalt-logo {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        padding: calc(var(--sidebar-padding) * 2 - 2px);
+    }
+</style>

web/src/components/sidebar/Sidebar.svelte

@@ -0,0 +1,72 @@
+<script>
+    import CobaltLogo from "./CobaltLogo.svelte";
+    import SidebarTab from "./SidebarTab.svelte";
+
+    import {
+        IconDownload,
+        IconCut,
+        IconCrop,
+        IconTransform,
+        IconSettings,
+        IconComet,
+        IconHeart,
+        IconInfoCircle,
+    } from "@tabler/icons-svelte";
+
+    const iconSize = 21;
+    const iconStroke = 1.2;
+</script>
+
+<nav id="sidebar">
+    <CobaltLogo />
+    <div id="sidebar-tabs">
+        <div id="sidebar-actions" class="sidebar-inner-container">
+            <SidebarTab tabName="save" tabLink="/">
+                <IconDownload size={iconSize} stroke={iconStroke} />
+            </SidebarTab>
+            <SidebarTab tabName="trim" tabLink="/trim">
+                <IconCut size={iconSize} stroke={iconStroke} />
+            </SidebarTab>
+            <SidebarTab tabName="crop" tabLink="/crop">
+                <IconCrop size={iconSize} stroke={iconStroke} />
+            </SidebarTab>
+            <SidebarTab tabName="convert" tabLink="/convert">
+                <IconTransform size={iconSize} stroke={iconStroke} />
+            </SidebarTab>
+            <SidebarTab tabName="settings" tabLink="/settings">
+                <IconSettings size={iconSize} stroke={iconStroke} />
+            </SidebarTab>
+        </div>
+        <div id="sidebar-info" class="sidebar-inner-container">
+            <SidebarTab tabName="updates" tabLink="/updates">
+                <IconComet size={iconSize} stroke={iconStroke} />
+            </SidebarTab>
+            <SidebarTab tabName="donate" tabLink="/donate">
+                <IconHeart size={iconSize} stroke={iconStroke} />
+            </SidebarTab>
+            <SidebarTab tabName="about" tabLink="/about">
+                <IconInfoCircle size={iconSize} stroke={iconStroke} />
+            </SidebarTab>
+        </div>
+    </div>
+</nav>
+
+<style>
+    #sidebar,
+    #sidebar-tabs,
+    .sidebar-inner-container {
+        display: flex;
+        flex-direction: column;
+    }
+    #sidebar {
+        background: black;
+        height: 100vh;
+        position: sticky;
+        width: var(--sidebar-width);
+    }
+    #sidebar-tabs {
+        height: 100%;
+        justify-content: space-between;
+        padding-bottom: var(--sidebar-padding);
+    }
+</style>

web/src/components/sidebar/SidebarTab.svelte

@@ -0,0 +1,40 @@
+<script lang="ts">
+    import { page } from "$app/stores";
+
+    export let tabName: string;
+    export let tabLink: string;
+
+    $: isTabActive = $page.url.pathname === tabLink;
+</script>
+
+<a
+    id="sidebar-tab-{tabName}"
+    class="sidebar-tab"
+    class:active={isTabActive}
+    href={tabLink}
+>
+    <slot></slot>
+    {tabName}
+</a>
+
+<style>
+    .sidebar-tab {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        text-align: center;
+        gap: 5px;
+        padding: var(--sidebar-padding) 5px;
+        color: var(--accent);
+        font-size: var(--sidebar-font-size);
+        opacity: 0.8;
+    }
+    .sidebar-tab.active {
+        color: var(--background);
+        background: var(--accent);
+        opacity: 1;
+    }
+    .sidebar-tab:hover {
+        opacity: 1;
+    }
+</style>

web/src/routes/+layout.svelte

@@ -0,0 +1,41 @@
+<script>
+    import "@fontsource/ibm-plex-mono/400.css";
+    import "@fontsource/ibm-plex-mono/500.css";
+    import Sidebar from "../components/sidebar/Sidebar.svelte";
+</script>
+
+<div id="cobalt">
+    <Sidebar />
+    <div id="content">
+        <slot></slot>
+    </div>
+</div>
+
+<style>
+    :global(:root) {
+        --accent: #ffffff;
+        --background: #000000;
+        --sidebar-width: 80px;
+        --sidebar-font-size: 11px;
+        --sidebar-padding: 12px;
+    }
+    :global(html),
+    :global(body) {
+        font-family: "IBM Plex Mono", "Noto Sans Mono", monospace;
+        margin: 0;
+    }
+    :global(a) {
+        text-decoration: none;
+        text-decoration-line: none;
+    }
+    #cobalt {
+        height: 100vh;
+        display: grid;
+        grid-template-columns: var(--sidebar-width) 1fr;
+        overflow: hidden;
+    }
+    #content {
+        display: flex;
+        overflow: scroll;
+    }
+</style>

web/src/routes/+page.svelte

@@ -1 +1,2 @@
-<h1>hello world</h1>
+<!-- home (save) page -->
+<div>home</div>

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

@@ -0,0 +1,2 @@
+<!-- about page -->
+<div>about</div>

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

@@ -0,0 +1,2 @@
+<!-- convert page -->
+<div>convert</div>

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

@@ -0,0 +1,2 @@
+<!-- crop page -->
+<div>crop</div>

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

@@ -0,0 +1,2 @@
+<!-- donate page -->
+<div>donate</div>

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

@@ -0,0 +1,2 @@
+<!-- settings page -->
+<div>settings</div>

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

@@ -0,0 +1,2 @@
+<!-- trim page -->
+<div>trim</div>

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

@@ -0,0 +1,2 @@
+<!-- updates (changelog) page -->
+<div>updates</div>