Fix centering of content

Signed-off-by: Matt Strapp <matt@mattstrapp.net>

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: