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

8
src/routes/+layout.svelte
View File

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