89 lines
1.8 KiB
Vue
89 lines
1.8 KiB
Vue
<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>
|