Added Sidebar drawer for Mobile navigation

davidh167 · Nov 28, 2024 · c67ea3f · c67ea3f
1 parent d57bd5b
commit c67ea3f
Show file tree

Hide file tree

Showing 2 changed files with 59 additions and 4 deletions.
diff --git a/src/lib/Navigation/Navigation.svelte b/src/lib/Navigation/Navigation.svelte
@@ -0,0 +1,19 @@
+<script lang="ts">
+    // import { drawerClose } from '$lib/Drawer/Drawer.svelte';
+    import { getDrawerStore } from "@skeletonlabs/skeleton";
+
+    const drawerStore = getDrawerStore();
+
+    function drawerClose(): void {
+        drawerStore.close();
+    }
+</script>
+
+<nav class="list-nav">
+	<ul>
+		<li><a href="/" on:click={drawerClose}>Homepage</a></li>
+        <li><a href="/about" on:click={drawerClose}>About</a></li>
+        <li><a href="/blog" on:click={drawerClose}>Blog</a></li>
+        <li><a href="/contact" on:click={drawerClose}>Contact</a></li>
+	</ul>
+</nav>
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
@@ -1,5 +1,12 @@
 <script lang="ts">
 
+	import Navigation from '$lib/Navigation/Navigation.svelte';
+	import { initializeStores, Drawer, getDrawerStore } from '@skeletonlabs/skeleton';
+
+	initializeStores();
+	const drawerStore =	 getDrawerStore();
+
+
 	import '../app.postcss';
 	import { AppShell, AppBar } from '@skeletonlabs/skeleton';
 
@@ -26,6 +33,9 @@
 	import { TabGroup, Tab, TabAnchor } from '@skeletonlabs/skeleton';
 	import { page } from '$app/stores';
 
+	function drawerOpen(): void {
+		drawerStore.open({});
+	}
 
 	// This can be false if you're using a fallback (i.e. SPA mode)
 	export const prerender = true;
@@ -56,13 +66,35 @@
 	}
   </style>
 
+
+<Drawer>
+	<hr />
+	<h2 class="p-4">Navigation</h2>
+	<hr />
+	<Navigation />
+</Drawer>
+
 <!-- App Shell -->
-<AppShell>
+<AppShell slotSidebarLeft="bg-surface-500/5 w-56 p-4">
 	<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}>
+						<span>
+							<svg viewBox="0 0 100 80" class="fill-token w-4 h-4">
+								<rect width="100" height="20" />
+								<rect y="30" width="100" height="20" />
+								<rect y="60" width="100" height="20" />
+							</svg>
+						</span>
+					</button>
+					<strong class="text-xl uppercase">Skeleton</strong>
+				</div>
+
+
 				<!-- <h3 class="h3">David Hernandez</h3> -->
 				 <figure >
 					<img src="/logo.png" alt="Logo" />
@@ -75,7 +107,7 @@
 					<strong class="text-xl">Home</strong>
 				</a> -->
 
-				<TabGroup justify="justify-center">
+				<TabGroup justify="justify-center" class="hidden lg:flex">
 					<TabAnchor href="/" selected={$page.url.pathname === '/'}>
 						<!-- <svelte:fragment slot="lead">🏠</svelte:fragment> -->
 						<span>Home</span>
@@ -110,6 +142,10 @@
 	 <!-- Empty at the Moment -->
 	</svelte:fragment>
 
+	<!-- <svelte:fragment slot="sidebarLeft">
+		<Navigation/>
+
+	</svelte:fragment> -->
 
 	<slot />
-</AppShell>
+</AppShell>