nabil_oh/portfolio
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Fix navbar

Browse source
This commit is contained in:
Nabil Ould Hamou 2024-02-16 00:46:24 +01:00
parent 13b89ca86a
commit 9b6643a7a2
2 changed files with 32 additions and 25 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
src/lib/Routes.ts
View file

@ -1,12 +1,12 @@
const routes = [ const routes = [
{ {
href: '/', href: '/',
name: 'Home', name: 'Home'
}, },
{ {
href: '/projects', href: '/projects',
name: 'Projects', name: 'Projects'
}, }
]; ];
export default routes; export default routes;

39
src/lib/components/Navbar.svelte
View file

@ -1,19 +1,26 @@
<script lang="ts"> <script lang="ts">
import routes from '$lib/Routes' import routes from '$lib/Routes';
import LightSwitch from "@/components/LightSwitch.svelte"; import LightSwitch from '@/components/LightSwitch.svelte';
import HamburgerMenu from "@/components/HamburgerMenu.svelte"; import HamburgerMenu from '@/components/HamburgerMenu.svelte';
export let path: string; export let path: string;
</script> </script>
<div class='h-14 w-full top-0 left-0 sticky flex justify-center items-center bg-background'> <div class="h-14 w-full top-0 left-0 sticky flex justify-center items-center bg-background">
<div class='pt-4 w-4/5 flex justify-between items-center'> <div class="pt-4 w-4/5 flex justify-between items-center">
<a href="/" class="font-bold">nbiloh.me</a> <a href="/" class="font-bold">nbiloh.me</a>
<div class='hidden sm:visible sm:flex items-center justify-between sm:gap-x-8 gap-x-4 font-medium text-lg text-muted-foreground'> <div
{#each routes as route} class="hidden sm:visible sm:flex items-center justify-between sm:gap-x-8 gap-x-4 font-medium text-lg text-muted-foreground"
<a class={`cursor-pointer ${path === route.href ? 'text-foreground' : 'hover:text-foreground'}`} href={route.href}>{route.name}</a> >
{/each} {#each routes as route}
</div> <a
<HamburgerMenu path={path} /> class={`cursor-pointer ${
<LightSwitch /> path == route.href ? 'text-foreground' : 'hover:text-foreground'
</div> }`}
</div> href={route.href}>{route.name}</a
>
{/each}
</div>
<HamburgerMenu {path} />
<LightSwitch />
</div>
</div>