<script>
	import { page } from '$app/stores';
	import {
		BottomNav,
		BottomNavItem,
		BottomNavHeader,
		BottomNavHeaderItem,
		Tooltip,
		Skeleton,
		ImagePlaceholder
	} from 'flowbite-svelte';
	import {
		HomeSolid,
		BookmarkSolid,
		PlusOutline,
		SearchOutline,
		AdjustmentsVerticalOutline
	} from 'flowbite-svelte-icons';
	let activeBtn = 'home';
	function handleNavItemClick(btnName) {
		activeBtn = btnName;
	}

	$: isHidden = activeBtn === 'projects';
</script>

<p>{isHidden}</p>
<BottomNav position="absolute" navType="group" classInner="grid-cols-5">
	<BottomNavHeader hidden slot="header">
		<BottomNavHeaderItem itemName="New" />
		<BottomNavHeaderItem itemName="Popular" active={true} />
		<BottomNavHeaderItem itemName="Following" />
	</BottomNavHeader>
	<BottomNavItem on:click={() => handleNavItemClick('home')} btnName="home" id="group-home">
		<HomeSolid
			class="w-6 h-6 mb-1 text-gray-500 dark:text-gray-400 group-hover:text-primary-600 dark:group-hover:text-primary-500"
		/>
		<Tooltip arrow={false}>Home</Tooltip>
	</BottomNavItem>
	<BottomNavItem on:click={() => handleNavItemClick('whoami')} btnName="whoami" id="group-whoami">
		<BookmarkSolid
			class="w-6 h-6 mb-1 text-gray-500 dark:text-gray-400 group-hover:text-primary-600 dark:group-hover:text-primary-500"
		/>
		<Tooltip arrow={false}>whoami</Tooltip>
	</BottomNavItem>
	<BottomNavItem
		on:click={() => handleNavItemClick('projects')}
		btnName="projects"
		id="group-projects"
	>
		<PlusOutline
			class="w-6 h-6 mb-1 text-gray-500 dark:text-gray-400 group-hover:text-primary-600 dark:group-hover:text-primary-500"
		/>
		<Tooltip arrow={false}>projects</Tooltip>
	</BottomNavItem>
	<BottomNavItem
		on:click={() => handleNavItemClick('contact')}
		btnName="contact"
		id="group-contact"
	>
		<SearchOutline
			class="w-6 h-6 mb-1 text-gray-500 dark:text-gray-400 group-hover:text-primary-600 dark:group-hover:text-primary-500"
		/>
		<Tooltip arrow={false}>contact</Tooltip>
	</BottomNavItem>
</BottomNav>
