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>