build

frontend/src/components/SideBar.vue

@@ -1,15 +1,86 @@
 <script setup>
 import { ref } from "vue";
-const isOpen = ref(true);
-const selectedItem = ref("home");
+import { useRouter } from "vue-router";
+import {
+	Community,
+	Calendar,
+	Hammer,
+	MultiplePagesPlus,
+	PathArrowSolid,
+	Clock,
+	HistoricShield,
+} from "@iconoir/vue";
 
-const onDisclosure = () => {
-	isOpen = !isOpen;
+const router = useRouter();
+const categories = [
+	{ 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 class="snw-side-bar">
-		<button @click="onDisclosure">{{ isOpen ? "Close" : "Open" }}</button>
+	<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;
+}
+</style>