rannes.dev/my-portfolio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

finished bottom nav (for now)
All checks were successful
Vercel Preview Deployment / Deploy-Preview (push) Successful in 1m56s
Details

Browse Source
This commit is contained in:
ChrQR 2024-05-20 23:47:53 +02:00
parent fc4044ecd9
commit 03970bbd95
2 changed files with 26 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
src/lib/BottomNavigation.svelte
View File

@ -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>

8
src/routes/+layout.svelte
View File

@ -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>