omahgerd/src/routes/+layout.svelte
2023-08-08 17:38:47 -04:00

34 lines
1 KiB
Svelte

<script>
import '../app.css';
import { DarkMode } from 'flowbite-svelte';
import { Navbar, NavBrand, NavLi, NavUl, NavHamburger } from 'flowbite-svelte';
let darkmodebtn =
'text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 rounded-lg text-lg p-2.5 fixed right-4 top-2 z-50';
</script>
<DarkMode btnClass={darkmodebtn} />
<div class="container mx-auto">
<Navbar let:hidden let:toggle>
<NavBrand href="/">
<img
src="/images/witch-hat.svg"
class="mr-2 h-6 sm:h-9"
alt="omahgerd Logo"
/>
<span class="self-center whitespace-nowrap text-xl font-semibold dark:text-white">
omahgerd
</span>
</NavBrand>
<NavHamburger on:click={toggle} />
<NavUl {hidden}>
<NavLi href="/" active={true}>Home</NavLi>
<NavLi href="/about">About</NavLi>
<NavLi href="/services">Services</NavLi>
<NavLi href="/pricing">Pricing</NavLi>
<NavLi href="/contact">Contact</NavLi>
</NavUl>
</Navbar>
<slot />
</div>