aboutsummaryrefslogtreecommitdiffstats
path: root/app
diff options
context:
space:
mode:
authorMatt Strapp <matt@mattstrapp.net>2023-09-29 08:37:22 -0500
committerMatt Strapp <matt@mattstrapp.net>2023-09-29 08:40:37 -0500
commit23dc35ec496849b7f4603c77d5f66a4d0a0fb802 (patch)
treea20e159cdfd6ff8c707de2b51afbc91a4160e9e3 /app
parentPin dependencies (diff)
downloadtrinkets-23dc35ec496849b7f4603c77d5f66a4d0a0fb802.tar
trinkets-23dc35ec496849b7f4603c77d5f66a4d0a0fb802.tar.gz
trinkets-23dc35ec496849b7f4603c77d5f66a4d0a0fb802.tar.bz2
trinkets-23dc35ec496849b7f4603c77d5f66a4d0a0fb802.tar.lz
trinkets-23dc35ec496849b7f4603c77d5f66a4d0a0fb802.tar.xz
trinkets-23dc35ec496849b7f4603c77d5f66a4d0a0fb802.tar.zst
trinkets-23dc35ec496849b7f4603c77d5f66a4d0a0fb802.zip
Fix centering of content
Signed-off-by: Matt Strapp <matt@mattstrapp.net>
Diffstat (limited to 'app')
-rw-r--r--app/package.json1
-rw-r--r--app/src/lib/svelte/Navigation.svelte30
-rw-r--r--app/src/routes/+layout.svelte9
3 files changed, 31 insertions, 9 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>