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

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

<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 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 class="hidden sm:block">
			<DarkMode btnClass="p-0" />
		</NavLi>
	</NavUl>
</Navbar>
