finished bottom nav (for now)
All checks were successful
Vercel Preview Deployment / Deploy-Preview (push) Successful in 1m56s
All checks were successful
Vercel Preview Deployment / Deploy-Preview (push) Successful in 1m56s
This commit is contained in:
parent
fc4044ecd9
commit
03970bbd95
@ -1,48 +1,51 @@
|
|||||||
<script>
|
<script>
|
||||||
import { page } from '$app/stores';
|
import { BottomNav, BottomNavItem, Button, ButtonGroup } from 'flowbite-svelte';
|
||||||
import { BottomNav, BottomNavItem } from 'flowbite-svelte';
|
|
||||||
import {
|
import {
|
||||||
HomeSolid,
|
HomeSolid,
|
||||||
ProfileCardOutline,
|
ProfileCardOutline,
|
||||||
ImageOutline,
|
ImageOutline,
|
||||||
MobilePhoneOutline
|
MobilePhoneOutline
|
||||||
} from 'flowbite-svelte-icons';
|
} from 'flowbite-svelte-icons';
|
||||||
|
import { writable } from 'svelte/store';
|
||||||
|
|
||||||
|
let activeBtn = writable('');
|
||||||
|
|
||||||
let activeBtn = 'home';
|
|
||||||
function handleNavItemClick(btnName) {
|
function handleNavItemClick(btnName) {
|
||||||
activeBtn = btnName;
|
activeBtn.set(btnName);
|
||||||
}
|
}
|
||||||
|
|
||||||
$: isHidden = activeBtn === 'projects';
|
|
||||||
</script>
|
</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
|
<BottomNav
|
||||||
position="sticky"
|
position="fixed"
|
||||||
classInner="grid-cols-4"
|
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
|
<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"
|
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>
|
||||||
<BottomNavItem btnName="whoami" href="/about">
|
<BottomNavItem btnName="whoami" href="/about" on:click={() => handleNavItemClick('whoami')}>
|
||||||
<ProfileCardOutline
|
<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"
|
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>
|
||||||
<BottomNavItem btnName="projects">
|
<BottomNavItem btnName="projects" on:click={() => handleNavItemClick('projects')}>
|
||||||
<ImageOutline
|
<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"
|
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>
|
||||||
<BottomNavItem btnName="contact" href="/contact">
|
<BottomNavItem btnName="contact" href="/contact" on:click={() => handleNavItemClick('contact')}>
|
||||||
<MobilePhoneOutline
|
<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"
|
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>
|
</BottomNavItem>
|
||||||
</BottomNav>
|
</BottomNav>
|
||||||
|
@ -3,6 +3,12 @@
|
|||||||
import CloudflareAnalytics from '$lib/CloudflareAnalytics.svelte';
|
import CloudflareAnalytics from '$lib/CloudflareAnalytics.svelte';
|
||||||
import BottomNavigation from '../lib/BottomNavigation.svelte';
|
import BottomNavigation from '../lib/BottomNavigation.svelte';
|
||||||
import TopNav from '../lib/TopNav.svelte';
|
import TopNav from '../lib/TopNav.svelte';
|
||||||
|
|
||||||
|
let activeBtn = 'home';
|
||||||
|
function handleNavItemClick(btnName) {
|
||||||
|
activeBtn = btnName;
|
||||||
|
}
|
||||||
|
$: activeBtn = activeBtn === 'projects';
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<CloudflareAnalytics />
|
<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">
|
<div class="px-2 sm:px-0 mx-auto max-w-xs sm:max-w-md md:max-w-3xl text-center">
|
||||||
<slot />
|
<slot />
|
||||||
</div>
|
</div>
|
||||||
|
<BottomNavigation />
|
||||||
<footer class="">
|
<footer class="">
|
||||||
<div class="hidden md:block text-sm text-stone-400 mt-12 text-center">
|
<div class="hidden md:block text-sm text-stone-400 mt-12 text-center">
|
||||||
<p>built by christian rannes 2024</p>
|
<p>built by christian rannes 2024</p>
|
||||||
</div>
|
</div>
|
||||||
<BottomNavigation />
|
|
||||||
</footer>
|
</footer>
|
||||||
|
Loading…
Reference in New Issue
Block a user