From 03970bbd95771176dcefd8ec951797e6877ca9fa Mon Sep 17 00:00:00 2001
From: ChrQR <christian@rannes.com>
Date: Mon, 20 May 2024 23:47:53 +0200
Subject: [PATCH] finished bottom nav (for now)

---
 src/lib/BottomNavigation.svelte | 35 ++++++++++++++++++---------------
 src/routes/+layout.svelte       |  8 +++++++-
 2 files changed, 26 insertions(+), 17 deletions(-)

diff --git a/src/lib/BottomNavigation.svelte b/src/lib/BottomNavigation.svelte
index 8a87d58..1dd29e1 100644
--- a/src/lib/BottomNavigation.svelte
+++ b/src/lib/BottomNavigation.svelte
@@ -1,48 +1,51 @@
 <script>
-	import { page } from '$app/stores';
-	import { BottomNav, BottomNavItem } from 'flowbite-svelte';
+	import { BottomNav, BottomNavItem, Button, ButtonGroup } from 'flowbite-svelte';
 	import {
 		HomeSolid,
 		ProfileCardOutline,
 		ImageOutline,
 		MobilePhoneOutline
 	} from 'flowbite-svelte-icons';
+	import { writable } from 'svelte/store';
+
+	let activeBtn = writable('');
 
-	let activeBtn = 'home';
 	function handleNavItemClick(btnName) {
-		activeBtn = btnName;
+		activeBtn.set(btnName);
 	}
-
-	$: isHidden = activeBtn === 'projects';
 </script>
 
+{#if $activeBtn === 'projects'}
+	<ButtonGroup class="fixed md:hidden bottom-20 flex justify-center w-full">
+		<Button href="/projects/svelte" outline class="flex-col backdrop-blur ">Svelte</Button>
+		<Button href="/projects/nextjs" outline class="flex-col backdrop-blur">Next.js</Button>
+		<Button href="/projects/homelab" outline class="flex-col backdrop-blur">Homelab</Button>
+	</ButtonGroup>
+{/if}
+
 <BottomNav
-	position="sticky"
+	position="fixed"
 	classInner="grid-cols-4"
-	outerClass="md:hidden w-full z-50 border-gray-200 dark:bg-slate-900 dark:border-gray-600 bottom-0"
+	outerClass="md:hidden w-full z-50 border-gray-200 dark:bg-slate-900 dark:border-gray-600"
 >
-	<BottomNavItem btnName="home" href="/">
+	<BottomNavItem btnName="home" href="/" on:click={() => handleNavItemClick('home')}>
 		<HomeSolid
 			class="w-6 h-6 mb-1 text-gray-500 dark:text-gray-400 group-hover:text-primary-600 dark:group-hover:text-primary-500"
-			on:click={() => handleNavItemClick('home')}
 		/>
 	</BottomNavItem>
-	<BottomNavItem btnName="whoami" href="/about">
+	<BottomNavItem btnName="whoami" href="/about" on:click={() => handleNavItemClick('whoami')}>
 		<ProfileCardOutline
 			class="w-6 h-6 mb-1 text-gray-500 dark:text-gray-400 group-hover:text-primary-600 dark:group-hover:text-primary-500"
-			on:click={() => handleNavItemClick('whoami')}
 		/>
 	</BottomNavItem>
-	<BottomNavItem btnName="projects">
+	<BottomNavItem btnName="projects" on:click={() => handleNavItemClick('projects')}>
 		<ImageOutline
 			class="w-6 h-6 mb-1 text-gray-500 dark:text-gray-400 group-hover:text-primary-600 dark:group-hover:text-primary-500"
-			on:click={() => handleNavItemClick('projects')}
 		/>
 	</BottomNavItem>
-	<BottomNavItem btnName="contact" href="/contact">
+	<BottomNavItem btnName="contact" href="/contact" on:click={() => handleNavItemClick('contact')}>
 		<MobilePhoneOutline
 			class="w-6 h-6 mb-1 text-gray-500 dark:text-gray-400 group-hover:text-primary-600 dark:group-hover:text-primary-500"
-			on:click={() => handleNavItemClick('contact')}
 		/>
 	</BottomNavItem>
 </BottomNav>
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index d994125..98becb2 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -3,6 +3,12 @@
 	import CloudflareAnalytics from '$lib/CloudflareAnalytics.svelte';
 	import BottomNavigation from '../lib/BottomNavigation.svelte';
 	import TopNav from '../lib/TopNav.svelte';
+
+	let activeBtn = 'home';
+	function handleNavItemClick(btnName) {
+		activeBtn = btnName;
+	}
+	$: activeBtn = activeBtn === 'projects';
 </script>
 
 <CloudflareAnalytics />
@@ -10,9 +16,9 @@
 <div class="px-2 sm:px-0 mx-auto max-w-xs sm:max-w-md md:max-w-3xl text-center">
 	<slot />
 </div>
+<BottomNavigation />
 <footer class="">
 	<div class="hidden md:block text-sm text-stone-400 mt-12 text-center">
 		<p>built by christian rannes 2024</p>
 	</div>
-	<BottomNavigation />
 </footer>