aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
Diffstat
-rw-r--r--app/package.json1
-rw-r--r--app/src/lib/svelte/Navigation.svelte30
-rw-r--r--app/src/routes/+layout.svelte9
-rw-r--r--pnpm-lock.yaml55
4 files changed, 63 insertions, 32 deletions
diff --git a/app/package.json b/app/package.json
index bf29956..a0bb1a0 100644
--- a/app/package.json
+++ b/app/package.json
@@ -5,6 +5,7 @@
"@floating-ui/dom": "1.5.3"
},
"devDependencies": {
+ "@iconify/icons-carbon": "1.2.20",
"@iconify/svelte": "3.1.4",
"@skeletonlabs/skeleton": "2.2.0",
"@skeletonlabs/tw-plugin": "0.2.1",
diff --git a/app/src/lib/svelte/Navigation.svelte b/app/src/lib/svelte/Navigation.svelte
index 724f821..9246c28 100644
--- a/app/src/lib/svelte/Navigation.svelte
+++ b/app/src/lib/svelte/Navigation.svelte
@@ -1,6 +1,12 @@
<script lang="ts">
import { page } from '$app/stores';
+
import Icon from '@iconify/svelte';
+ import homeIcon from '@iconify/icons-carbon/home';
+ import logoGithub from '@iconify/icons-carbon/logo-github';
+ import menuIcon from '@iconify/icons-carbon/menu';
+ import pageBreak from '@iconify/icons-carbon/page-break';
+
import { AppRail, AppRailAnchor, getDrawerStore } from '@skeletonlabs/skeleton';
const drawerStore = getDrawerStore();
@@ -8,13 +14,25 @@
function drawerClose(): void {
drawerStore.close();
}
+
+ // Hamburgers
+ export let menu = false;
</script>
<AppRail>
- <svelte:fragment slot="lead"></svelte:fragment>
- <AppRailAnchor href="/" selected={$page.url.pathname === '/'} on:click={drawerClose}>
+ <svelte:fragment slot="lead">
+ {#if menu}
+ <AppRailAnchor on:click={drawerClose} title="Close Menu" value={0}>
+ <svelte:fragment slot="lead">
+ <Icon icon={menuIcon} width="25" />
+ </svelte:fragment>
+ Close Menu
+ </AppRailAnchor>
+ {/if}
+ </svelte:fragment>
+ <AppRailAnchor href="/" selected={$page.url.pathname === '/'} on:click={drawerClose} title="Home">
<svelte:fragment slot="lead">
- <Icon icon="carbon:home" width="35" />
+ <Icon icon={homeIcon} width="35" />
</svelte:fragment>
Home!
</AppRailAnchor>
@@ -22,9 +40,10 @@
href="/truncate"
selected={$page.url.pathname === '/truncate'}
on:click={drawerClose}
+ title="Truncate"
>
<svelte:fragment slot="lead">
- <Icon icon="carbon:page-break" width="35" />
+ <Icon icon={pageBreak} width="35" />
</svelte:fragment>
Truncate!
</AppRailAnchor>
@@ -33,9 +52,10 @@
href="https://github.com/rosstheross/rosstheross.github.io"
rel="noreferrer"
on:click={drawerClose}
+ title=""
>
<svelte:fragment slot="lead">
- <Icon icon="carbon:logo-github" width="35" />
+ <Icon icon={logoGithub} width="35" />
</svelte:fragment>
Source!
</AppRailAnchor>
diff --git a/app/src/routes/+layout.svelte b/app/src/routes/+layout.svelte
index c29de33..c866e8c 100644
--- a/app/src/routes/+layout.svelte
+++ b/app/src/routes/+layout.svelte
@@ -1,6 +1,7 @@
<script lang="ts">
import Navigation from '$lib/svelte/Navigation.svelte';
import Icon from '@iconify/svelte';
+ import menuIcon from '@iconify/icons-carbon/menu';
import {
AppBar,
AppShell,
@@ -62,20 +63,20 @@
</svelte:head>
<Drawer>
- <Navigation />
+ <Navigation menu />
</Drawer>
<Toast position="br" />
<!-- App Shell -->
-<AppShell slotSidebarLeft="w-0 lg:w-64">
+<AppShell slotSidebarLeft="w-0 md:w-20">
<svelte:fragment slot="header">
<!-- App Bar -->
<AppBar>
<svelte:fragment slot="lead">
<div class="flex items-center">
- <button class="lg:hidden btn btn-sm mr-4" on:click={drawerOpen}>
- <Icon icon="carbon:menu" width=25 />
+ <button class="md:hidden btn btn-sm mr-4" on:click={drawerOpen}>
+ <Icon icon={menuIcon} width=25 />
</button>
<strong class="text-xl uppercase">Nothing</strong>
</div>
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 3f4d9e4..1a5ec85 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -12,7 +12,7 @@ importers:
.:
devDependencies:
syncpack:
- specifier: ^11.2.1
+ specifier: 11.2.1
version: 11.2.1
app:
@@ -21,8 +21,11 @@ importers:
specifier: 1.5.3
version: 1.5.3
devDependencies:
+ '@iconify/icons-carbon':
+ specifier: 1.2.20
+ version: 1.2.20
'@iconify/svelte':
- specifier: ^3.1.4
+ specifier: 3.1.4
version: 3.1.4(svelte@4.2.1)
'@skeletonlabs/skeleton':
specifier: 2.2.0
@@ -31,13 +34,13 @@ importers:
specifier: 0.2.1
version: 0.2.1(tailwindcss@3.3.3)
'@sveltejs/adapter-auto':
- specifier: ^2.1.0
+ specifier: 2.1.0
version: 2.1.0(@sveltejs/kit@1.25.1)
'@sveltejs/adapter-static':
- specifier: ^2.0.3
+ specifier: 2.0.3
version: 2.0.3(@sveltejs/kit@1.25.1)
'@sveltejs/kit':
- specifier: ^1.25.1
+ specifier: 1.25.1
version: 1.25.1(svelte@4.2.1)(vite@4.4.9)
'@tailwindcss/forms':
specifier: 0.5.6
@@ -46,70 +49,70 @@ importers:
specifier: 0.5.10
version: 0.5.10(tailwindcss@3.3.3)
'@types/html-minifier-terser':
- specifier: ^7.0.0
+ specifier: 7.0.0
version: 7.0.0
'@types/node':
specifier: 20.7.1
version: 20.7.1
'@types/wicg-file-system-access':
- specifier: ^2020.9.8
+ specifier: 2020.9.8
version: 2020.9.8
'@typescript-eslint/eslint-plugin':
- specifier: ^6.7.3
+ specifier: 6.7.3
version: 6.7.3(@typescript-eslint/parser@6.7.3)(eslint@8.50.0)(typescript@5.2.2)
'@typescript-eslint/parser':
- specifier: ^6.7.3
+ specifier: 6.7.3
version: 6.7.3(eslint@8.50.0)(typescript@5.2.2)
'@vite-pwa/sveltekit':
- specifier: ^0.2.7
+ specifier: 0.2.7
version: 0.2.7(@sveltejs/kit@1.25.1)(vite-plugin-pwa@0.16.5)
autoprefixer:
specifier: 10.4.16
version: 10.4.16(postcss@8.4.30)
crc:
- specifier: ^4.3.2
+ specifier: 4.3.2
version: 4.3.2
eslint:
- specifier: ^8.50.0
+ specifier: 8.50.0
version: 8.50.0
eslint-config-prettier:
- specifier: ^9.0.0
+ specifier: 9.0.0
version: 9.0.0(eslint@8.50.0)
eslint-plugin-svelte:
- specifier: ^2.33.2
+ specifier: 2.33.2
version: 2.33.2(eslint@8.50.0)(svelte@4.2.1)
html-minifier-terser:
- specifier: ^7.2.0
+ specifier: 7.2.0
version: 7.2.0
postcss:
specifier: 8.4.30
version: 8.4.30
prettier:
- specifier: ^3.0.3
+ specifier: 3.0.3
version: 3.0.3
prettier-plugin-svelte:
- specifier: ^3.0.3
+ specifier: 3.0.3
version: 3.0.3(prettier@3.0.3)(svelte@4.2.1)
svelte:
- specifier: ^4.2.1
+ specifier: 4.2.1
version: 4.2.1
svelte-check:
- specifier: ^3.5.2
+ specifier: 3.5.2
version: 3.5.2(@babel/core@7.23.0)(postcss@8.4.30)(svelte@4.2.1)
tailwindcss:
specifier: 3.3.3
version: 3.3.3
tslib:
- specifier: ^2.6.2
+ specifier: 2.6.2
version: 2.6.2
typescript:
- specifier: ^5.2.2
+ specifier: 5.2.2
version: 5.2.2
vite:
- specifier: ^4.4.9
+ specifier: 4.4.9
version: 4.4.9(@types/node@20.7.1)
vite-plugin-pwa:
- specifier: ^0.16.5
+ specifier: 0.16.5
version: 0.16.5(vite@4.4.9)(workbox-build@7.0.0)(workbox-window@7.0.0)
vite-plugin-tailwind-purgecss:
specifier: 0.1.3
@@ -1606,6 +1609,12 @@ packages:
resolution: {integrity: sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA==}
dev: true
+ /@iconify/icons-carbon@1.2.20:
+ resolution: {integrity: sha512-GaBRDebrshFfiRu11ktyBvm/Ez72UXvZUsHG3WPqddokTp3auOT4cLch+2JSEzeVXSGbopzU2Fhpv8vE2I0XCw==}
+ dependencies:
+ '@iconify/types': 2.0.0
+ dev: true
+
/@iconify/svelte@3.1.4(svelte@4.2.1):
resolution: {integrity: sha512-YDwQlN46ka8KPRayDb7TivmkAPizfTXi6BSRNqa1IV0+byA907n8JcgQafA7FD//pW5XCuuAhVx6uRbKTo+CfA==}
peerDependencies:
generated by cgit v1.2.3 (git 2.46.0) at 2024-11-22 09:46:15 +0000