43 lines
1.1 KiB
Svelte
43 lines
1.1 KiB
Svelte
<script>
|
|
import { page } from '$app/stores';
|
|
|
|
import Icon from '@iconify/svelte';
|
|
|
|
function isActive(path) {
|
|
return $page.route.id == path ? 'is-active' : '';
|
|
}
|
|
|
|
let navbarIsActive = false;
|
|
</script>
|
|
|
|
<nav class="navbar mb-5">
|
|
<div class="navbar-brand">
|
|
<a class="navbar-item" href="/"><img src="/lure-text-white.svg" alt="LURE Logo" /></a>
|
|
<button
|
|
class="navbar-burger {navbarIsActive ? 'is-active' : ''}"
|
|
aria-label="menu"
|
|
on:click={() => {
|
|
navbarIsActive = !navbarIsActive;
|
|
}}
|
|
>
|
|
<span aria-hidden="true" />
|
|
<span aria-hidden="true" />
|
|
<span aria-hidden="true" />
|
|
</button>
|
|
</div>
|
|
|
|
<div id="main-navbar" class="navbar-menu {navbarIsActive ? 'is-active' : ''}">
|
|
<div class="navbar-end">
|
|
<a class="navbar-item {isActive('/')}" href="/">
|
|
<Icon icon="material-symbols:house" inline="true" /> Home
|
|
</a>
|
|
<a class="navbar-item {isActive('/pkgs')}" href="/pkgs">
|
|
<Icon icon="mdi:package-variant-closed" inline="true" /> Packages
|
|
</a>
|
|
<a class="navbar-item {isActive('/about')}" href="/about">
|
|
<Icon icon="mdi:question-mark-circle" inline="true" /> About
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</nav>
|