Mirrors/cobalt
1
0
Fork 0
mirror of https://github.com/wukko/cobalt.git synced 2024-11-15 12:50:01 +00:00
Code Issues Projects Releases Packages Wiki Activity

web: navigation & sidebar

Browse source
This commit is contained in:
wukko 2024-06-14 16:33:01 +06:00
parent fa85a4c75c
commit 38d7add0a9
No known key found for this signature in database
GPG key ID: 3E30B3F26C7B4AA2
14 changed files with 225 additions and 26 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

62
web/package-lock.json generated
View file

@ -8,6 +8,10 @@
"name": "cobalt-web",
"version": "0.0.1",
"license": "CC-BY-NC-SA-4.0",
"dependencies": {
"@fontsource/ibm-plex-mono": "^5.0.13",
"@tabler/icons-svelte": "^3.6.0"
},
"devDependencies": {
"@sveltejs/adapter-auto": "^3.0.0",
"@sveltejs/kit": "^2.0.0",
@ -23,7 +27,6 @@
"version": "2.3.0",
"resolved": "https://registry.npmjs.org/@ampproject/remapping/-/remapping-2.3.0.tgz",
"integrity": "sha512-30iZtAPgz+LTIYoeivqYo853f02jBYSd5uGnGpkFV0M3xOt9aN73erkgYAmZU43x4VfqcnLxW9Kpg3R5LC4YYw==",
"dev": true,
"dependencies": {
"@jridgewell/gen-mapping": "^0.3.5",
"@jridgewell/trace-mapping": "^0.3.24"
@ -400,11 +403,15 @@
"node": ">=12"
}
},
"node_modules/@fontsource/ibm-plex-mono": {
"version": "5.0.13",
"resolved": "https://registry.npmjs.org/@fontsource/ibm-plex-mono/-/ibm-plex-mono-5.0.13.tgz",
"integrity": "sha512-gtlMmvk//2AgDEZDFsoL5z9mgW3ZZg/9SC7pIfDwNKp5DtZpApgqd1Fua3HhPwYRIHrT76IQ1tMTzQKLEGtJGQ=="
},
"node_modules/@jridgewell/gen-mapping": {
"version": "0.3.5",
"resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.5.tgz",
"integrity": "sha512-IzL8ZoEDIBRWEzlCcRhOaCupYyN5gdIK+Q6fbFdPDg6HqX6jpkItn7DFIpW9LQzXG6Df9sA7+OKnq0qlz/GaQg==",
"dev": true,
"dependencies": {
"@jridgewell/set-array": "^1.2.1",
"@jridgewell/sourcemap-codec": "^1.4.10",
@ -418,7 +425,6 @@
"version": "3.1.2",
"resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz",
"integrity": "sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==",
"dev": true,
"engines": {
"node": ">=6.0.0"
}
@ -427,7 +433,6 @@
"version": "1.2.1",
"resolved": "https://registry.npmjs.org/@jridgewell/set-array/-/set-array-1.2.1.tgz",
"integrity": "sha512-R8gLRTZeyp03ymzP/6Lil/28tGeGEzhx1q2k703KGWRAI1VdvPIXdG70VJc2pAMw3NA6JKL5hhFu1sJX0Mnn/A==",
"dev": true,
"engines": {
"node": ">=6.0.0"
}
@ -435,14 +440,12 @@
"node_modules/@jridgewell/sourcemap-codec": {
"version": "1.4.15",
"resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.15.tgz",
"integrity": "sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg==",
"dev": true
"integrity": "sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg=="
},
"node_modules/@jridgewell/trace-mapping": {
"version": "0.3.25",
"resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.25.tgz",
"integrity": "sha512-vNk6aEwybGtawWmy/PzwnGDOjCkLWSD2wqvjGGAgOAwCGWySYXfYoxt00IJkTF+8Lb57DwOb3Aa0o9CApepiYQ==",
"dev": true,
"dependencies": {
"@jridgewell/resolve-uri": "^3.1.0",
"@jridgewell/sourcemap-codec": "^1.4.14"
@ -780,6 +783,30 @@
"vite": "^5.0.0"
}
},
"node_modules/@tabler/icons": {
"version": "3.6.0",
"resolved": "https://registry.npmjs.org/@tabler/icons/-/icons-3.6.0.tgz",
"integrity": "sha512-Zv0Ofc64RCMpZ2F8CvsWAphrSjerx5hEErt/RMmE+W8r4E5l5Lizi+My9KbbZQ4NyAtrtrOX80OY1oROZrRzEA==",
"funding": {
"type": "github",
"url": "https://github.com/sponsors/codecalm"
}
},
"node_modules/@tabler/icons-svelte": {
"version": "3.6.0",
"resolved": "https://registry.npmjs.org/@tabler/icons-svelte/-/icons-svelte-3.6.0.tgz",
"integrity": "sha512-phI61t81MlWhodATjvQQdqw8vTL0srSW6GsHzJmuhIMJGB4rwFzAXB2Ec4Pkz0vWFzVQgkeSE/AsiOLIUKWkxA==",
"dependencies": {
"@tabler/icons": "3.6.0"
},
"funding": {
"type": "github",
"url": "https://github.com/sponsors/codecalm"
},
"peerDependencies": {
"svelte": ">=3 <5"
}
},
"node_modules/@types/cookie": {
"version": "0.6.0",
"resolved": "https://registry.npmjs.org/@types/cookie/-/cookie-0.6.0.tgz",
@ -789,8 +816,7 @@
"node_modules/@types/estree": {
"version": "1.0.5",
"resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.5.tgz",
"integrity": "sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw==",
"dev": true
"integrity": "sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw=="
},
"node_modules/@types/pug": {
"version": "2.0.10",
@ -802,7 +828,6 @@
"version": "8.11.3",
"resolved": "https://registry.npmjs.org/acorn/-/acorn-8.11.3.tgz",
"integrity": "sha512-Y9rRfJG5jcKOE0CLisYbojUjIrIEE7AGMzA/Sm4BslANhbS+cDMpgBdcPT91oJ7OuJ9hYJBx59RjbhxVnrF8Xg==",
"dev": true,
"bin": {
"acorn": "bin/acorn"
},
@ -827,7 +852,6 @@
"version": "5.3.0",
"resolved": "https://registry.npmjs.org/aria-query/-/aria-query-5.3.0.tgz",
"integrity": "sha512-b0P0sZPKtyu8HkeRAfCq0IfURZK+SuwMjY1UXGBU27wpAiTwQAIlq56IbIO+ytk/JjS1fMR14ee5WBBfKi5J6A==",
"dev": true,
"dependencies": {
"dequal": "^2.0.3"
}
@ -836,7 +860,6 @@
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-4.0.0.tgz",
"integrity": "sha512-+60uv1hiVFhHZeO+Lz0RYzsVHy5Wr1ayX0mwda9KPDVLNJgZ1T9Ny7VmFbLDzxsH0D87I86vgj3gFrjTJUYznw==",
"dev": true,
"dependencies": {
"dequal": "^2.0.3"
}
@ -927,7 +950,6 @@
"version": "1.0.4",
"resolved": "https://registry.npmjs.org/code-red/-/code-red-1.0.4.tgz",
"integrity": "sha512-7qJWqItLA8/VPVlKJlFXU+NBlo/qyfs39aJcuMT/2ere32ZqvF5OSxgdM5xOfJJ7O429gg2HM47y8v9P+9wrNw==",
"dev": true,
"dependencies": {
"@jridgewell/sourcemap-codec": "^1.4.15",
"@types/estree": "^1.0.1",
@ -955,7 +977,6 @@
"version": "2.3.1",
"resolved": "https://registry.npmjs.org/css-tree/-/css-tree-2.3.1.tgz",
"integrity": "sha512-6Fv1DV/TYw//QF5IzQdqsNDjx/wc8TrMBZsqjL9eW01tWb7R7k/mq+/VXfJCl7SoD5emsJop9cOByJZfs8hYIw==",
"dev": true,
"dependencies": {
"mdn-data": "2.0.30",
"source-map-js": "^1.0.1"
@ -994,7 +1015,6 @@
"version": "2.0.3",
"resolved": "https://registry.npmjs.org/dequal/-/dequal-2.0.3.tgz",
"integrity": "sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==",
"dev": true,
"engines": {
"node": ">=6"
}
@ -1068,7 +1088,6 @@
"version": "3.0.3",
"resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-3.0.3.tgz",
"integrity": "sha512-7RUKfXgSMMkzt6ZuXmqapOurLGPPfgj6l9uRZ7lRGolvk0y2yocc35LdcxKC5PQZdn2DMqioAQ2NoWcrTKmm6g==",
"dev": true,
"dependencies": {
"@types/estree": "^1.0.0"
}
@ -1270,7 +1289,6 @@
"version": "3.0.2",
"resolved": "https://registry.npmjs.org/is-reference/-/is-reference-3.0.2.tgz",
"integrity": "sha512-v3rht/LgVcsdZa3O2Nqs+NMowLOxeOm7Ay9+/ARQ2F+qEoANRcqrjAZKGN0v8ymUetZGgkp26LTnGT7H0Qo9Pg==",
"dev": true,
"dependencies": {
"@types/estree": "*"
}
@ -1287,14 +1305,12 @@
"node_modules/locate-character": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/locate-character/-/locate-character-3.0.0.tgz",
"integrity": "sha512-SW13ws7BjaeJ6p7Q6CO2nchbYEc3X3J6WrmTTDto7yMPqVSZTUyY5Tjbid+Ab8gLnATtygYtiDIJGQRRn2ZOiA==",
"dev": true
"integrity": "sha512-SW13ws7BjaeJ6p7Q6CO2nchbYEc3X3J6WrmTTDto7yMPqVSZTUyY5Tjbid+Ab8gLnATtygYtiDIJGQRRn2ZOiA=="
},
"node_modules/magic-string": {
"version": "0.30.10",
"resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.10.tgz",
"integrity": "sha512-iIRwTIf0QKV3UAnYK4PU8uiEc4SRh5jX0mwpIwETPpHdhVM4f53RSwS/vXvN1JhGX+Cs7B8qIq3d6AH49O5fAQ==",
"dev": true,
"dependencies": {
"@jridgewell/sourcemap-codec": "^1.4.15"
}
@ -1302,8 +1318,7 @@
"node_modules/mdn-data": {
"version": "2.0.30",
"resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.30.tgz",
"integrity": "sha512-GaqWWShW4kv/G9IEucWScBx9G1/vsFZZJUO+tD26M8J8z3Kw5RDQjaoZe03YAClgeS/SWPOcb4nkFBTEi5DUEA==",
"dev": true
"integrity": "sha512-GaqWWShW4kv/G9IEucWScBx9G1/vsFZZJUO+tD26M8J8z3Kw5RDQjaoZe03YAClgeS/SWPOcb4nkFBTEi5DUEA=="
},
"node_modules/merge2": {
"version": "1.4.1",
@ -1454,7 +1469,6 @@
"version": "3.1.0",
"resolved": "https://registry.npmjs.org/periscopic/-/periscopic-3.1.0.tgz",
"integrity": "sha512-vKiQ8RRtkl9P+r/+oefh25C3fhybptkHKCZSPlcXiJux2tJF55GnEj3BVn4A5gKfq9NWWXXrxkHBwVPUfH0opw==",
"dev": true,
"dependencies": {
"@types/estree": "^1.0.0",
"estree-walker": "^3.0.0",
@ -1692,7 +1706,6 @@
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.0.tgz",
"integrity": "sha512-itJW8lvSA0TXEphiRoawsCksnlf8SyvmFzIhltqAHluXd88pkCd+cXJVHTDwdCr0IzwptSm035IHQktUu1QUMg==",
"dev": true,
"engines": {
"node": ">=0.10.0"
}
@ -1713,7 +1726,6 @@
"version": "4.2.18",
"resolved": "https://registry.npmjs.org/svelte/-/svelte-4.2.18.tgz",
"integrity": "sha512-d0FdzYIiAePqRJEb90WlJDkjUEx42xhivxN8muUBmfZnP+tzUgz12DJ2hRJi8sIHCME7jeK1PTMgKPSfTd8JrA==",
"dev": true,
"dependencies": {
"@ampproject/remapping": "^2.2.1",
"@jridgewell/sourcemap-codec": "^1.4.15",

4
web/package.json
View file

@ -28,5 +28,9 @@
"tslib": "^2.4.1",
"typescript": "^5.0.0",
"vite": "^5.0.3"
},
"dependencies": {
"@fontsource/ibm-plex-mono": "^5.0.13",
"@tabler/icons-svelte": "^3.6.0"
}
}

15
web/src/components/sidebar/CobaltLogo.svelte Normal file
View file

@ -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>

72
web/src/components/sidebar/Sidebar.svelte Normal file
View file

@ -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>

40
web/src/components/sidebar/SidebarTab.svelte Normal file
View file

@ -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>

41
web/src/routes/+layout.svelte Normal file
View file

@ -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>

3
web/src/routes/+page.svelte
View file

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

2
web/src/routes/about/+page.svelte Normal file
View file

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

2
web/src/routes/convert/+page.svelte Normal file
View file

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

2
web/src/routes/crop/+page.svelte Normal file
View file

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

2
web/src/routes/donate/+page.svelte Normal file
View file

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

2
web/src/routes/settings/+page.svelte Normal file
View file

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

2
web/src/routes/trim/+page.svelte Normal file
View file

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

2
web/src/routes/updates/+page.svelte Normal file
View file

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