diff options
Diffstat (limited to '')
-rw-r--r-- | app/package.json | 1 | ||||
-rw-r--r-- | app/src/lib/svelte/Navigation.svelte | 30 | ||||
-rw-r--r-- | app/src/routes/+layout.svelte | 9 | ||||
-rw-r--r-- | pnpm-lock.yaml | 55 |
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: |