<script>
	import {
		Navbar,
		NavBrand,
		NavLi,
		NavUl,
		NavHamburger,
		Dropdown,
		DropdownItem,
		DarkMode
	} from 'flowbite-svelte';
	import { ChevronDownOutline } from 'flowbite-svelte-icons';
	import '../app.css';
	import CloudflareAnalytics from '$lib/CloudflareAnalytics.svelte';
	import logo from '$lib/logo.png';
	import { page } from '$app/stores';
	import BottomNavigation from '../lib/BottomNavigation.svelte';

	$: activeUrl = $page.url.pathname;
</script>

<CloudflareAnalytics />
<Navbar class="bg-transparent">
	<NavBrand href="/">
		<img src={logo} class="me-3 h-6 sm:h-9" alt="Flowbite Logo" />
		<span class="self-center whitespace-nowrap text-xl font-semibold dark:text-stone-200"
			>rannes.dev</span
		>
	</NavBrand>
	<div class="flex">
		<DarkMode btnClass="block sm:hidden" />
	</div>
	<NavUl class="md:flex-row" {activeUrl}>
		<NavLi href="/">home</NavLi>
		<NavLi href="/about">whoami</NavLi>
		<NavLi class="cursor-pointer">
			projects<ChevronDownOutline class="w-6 h-6  text-primary-800 dark:text-stone-200 inline" />
		</NavLi>
		<Dropdown
			{activeUrl}
			activeClass="font-bold text-primary-800 dark:text-stone-200"
			class="w-44 z-20"
		>
			<DropdownItem href="/projects/svelte">svelte</DropdownItem>
			<DropdownItem href="/projects/nextjs">nextjs</DropdownItem>
			<DropdownItem href="/projects/homelab">homelab</DropdownItem>
		</Dropdown>
		<NavLi href="/contact">contact</NavLi>
		<NavLi class="hidden sm:block">
			<DarkMode btnClass="p-0" />
		</NavLi>
	</NavUl>
</Navbar>
<div class="px-2 sm:px-0 mx-auto max-w-xs sm:max-w-md md:max-w-3xl text-center">
	<slot />
</div>
<footer>
	<div class="text-sm text-stone-400 mt-12 text-center">
		<p>built by christian rannes 2024</p>
	</div>
</footer>
<BottomNavigation />
