Fix centering of content

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

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>