<script setup>
import { ref } from "vue";
import { useRouter } from "vue-router";
import {
	Home,
	Community,
	Calendar,
	Hammer,
	MultiplePagesPlus,
	PathArrowSolid,
	Clock,
	HistoricShield,
} from "@iconoir/vue";

const router = useRouter();
const categories = [
	{ name: "Home", icon: Home, url: "/" },
	{ name: "Calendar", icon: Calendar, url: "/calendar" },
	{ name: "Clients", icon: Community, url: "/clients" },
	{ name: "Jobs", icon: Hammer, url: "/jobs" },
	{ name: "Routes", icon: PathArrowSolid, url: "/routes" },
	{ name: "Create", icon: MultiplePagesPlus, url: "/create" },
	{ name: "Time Sheets", icon: Clock, url: "/timesheets" },
	{ name: "Warranties", icon: HistoricShield, url: "/warranties" },
];
const handleCategoryClick = (category) => {
	router.push(category.url);
};
</script>

<template>
	<div id="sidebar" class="sidebar">
		<button
			v-for="category in categories"
			:class="[
				'sidebar-button',
				router.currentRoute.value.path === category.url ? 'active' : '',
			]"
			:key="category.name"
			@click="handleCategoryClick(category)"
		>
			<component :is="category.icon" class="button-icon" /><span class="button-text">{{
				category.name
			}}</span>
		</button>
	</div>
</template>

<style lang="css">
.sidebar-button.active {
	background-color: rgb(25, 60, 53);
	color: white;
}

.sidebar-button:hover {
	background-color: rgb(82, 132, 119);
}

.button-icon {
	justify-self: flex-start;
	margin-left: 5px;
}

.button-text {
	margin-left: auto;
	margin-right: auto;
}

.sidebar-button {
	border-radius: 5px;
	border: none;
	background-color: rgb(69, 112, 101);
	color: white;
	display: flex;
	align-items: center;
}

#sidebar {
	display: flex;
	flex-direction: column;
	width: 150px;
	align-self: flex-start;
	gap: 10px;
	background-color: #f3f3f3;
	padding: 10px;
	border-radius: 5px;
	margin-top: 10px;
}
</style>
