custom_ui/frontend/src/components/SideBar.vue

<script setup>
import { ref } from "vue";
import { useRouter } from "vue-router";
import { useModalStore } from "@/stores/modal";
import {
	Home,
	Community,
	Calendar,
	Hammer,
	MultiplePagesPlus,
	PathArrowSolid,
	Clock,
	HistoricShield,
	Developer,
	Neighbourhood,
	Calculator,
	ReceiveDollars,
	NavArrowLeft,
	NavArrowRight,
} from "@iconoir/vue";
import SpeedDial from "primevue/speeddial";

const router = useRouter();
const modalStore = useModalStore();
const isCollapsed = ref(false);

const toggleSidebar = () => {
	isCollapsed.value = !isCollapsed.value;
};

const developmentButtons = ref([
	{
		label: "Error Handling Demo",
		command: () => {
			router.push("/dev/error-handling-demo");
		},
	},
]);

const createButtons = ref([
	{
		label: "Client",
		command: () => {
			router.push("/client?new=true");
		},
	},
	{
		label: "On-Site Meeting",
		command: () => {
			router.push("/schedule-onsite?new=true");
		},
	},
	{
		label: "Estimate",
		command: () => {
			//frappe.new_doc("Estimate");
			router.push("/createEstimate/new");
		},
	},
	{
		label: "Job",
		command: () => {
			//frappe.new_doc("Job");
			modalStore.openModal("createJob");
		},
	},
	{
		label: "Invoice",
		command: () => {
			modalStore.openModal("createInvoice");
		},
	},
	{
		label: "Warranty Claim",
		command: () => {
			modalStore.openModal("createWarranty");
		},
	},
]);

const categories = ref([
	{ name: "Home", icon: Home, url: "/" },
	{ name: "Calendar", icon: Calendar, url: "/calendar" },
	{ name: "Clients", icon: Community, url: "/clients" },
	{ name: "On-Site Meetings", icon: Neighbourhood, url: "/schedule-onsite" },
	{ name: "Estimates", icon: Calculator, url: "/estimates" },
	{ name: "Jobs", icon: Hammer, url: "/jobs" },
	{ name: "Payments/Invoices", icon: ReceiveDollars, url: "/invoices" },
	{ name: "Routes", icon: PathArrowSolid, url: "/routes" },
	{ name: "Time Sheets", icon: Clock, url: "/timesheets" },
	{ name: "Warranties", icon: HistoricShield, url: "/warranties" },
	{
		name: "Create New",
		icon: MultiplePagesPlus,
		buttons: createButtons,
	},
	// { name: "Development", icon: Developer, buttons: developmentButtons },
]);
const handleCategoryClick = (category) => {
	router.push(category.url);
};
</script>

<template>
	<div id="sidebar" class="sidebar" :class="{ collapsed: isCollapsed }">
		<!-- Toggle Button -->
		<button
			class="sidebar-toggle"
			@click="toggleSidebar"
			:title="isCollapsed ? 'Expand sidebar' : 'Collapse sidebar'"
		>
			<component :is="isCollapsed ? NavArrowRight : NavArrowLeft" class="toggle-icon" />
		</button>

		<template v-for="category in categories">
			<template v-if="category.url">
				<button
					:class="[
						'sidebar-button',
						router.currentRoute.value.path === category.url ? 'active' : '',
					]"
					:key="category.name"
					@click="handleCategoryClick(category)"
					:title="isCollapsed ? category.name : ''"
				>
					<component :is="category.icon" class="button-icon" />
					<span class="button-text" v-if="!isCollapsed">{{ category.name }}</span>
				</button>
			</template>
			<template v-else>
				<SpeedDial
					:model="category.buttons"
					direction="down"
					type="linear"
					radius="50"
					v-if="!isCollapsed"
				>
					<template #button="{ toggleCallback }">
						<button
							class="sidebar-button"
							@click="toggleCallback"
							:key="category.name"
						>
							<component :is="category.icon" class="button-icon" />
							<span class="button-text">{{ category.name }}</span>
						</button>
					</template>
					<template #item="{ item, toggleCallback }">
						<button class="create-item" @click="toggleCallback" :key="item.label">
							<span class="p-menuitem-text">{{ item.label }}</span>
						</button>
					</template>
				</SpeedDial>
				<button v-else class="sidebar-button" :key="category.name" :title="category.name">
					<component :is="category.icon" class="button-icon" />
				</button>
			</template>
		</template>
	</div>
</template>

<style lang="css">
.sidebar-button.active {
	background-color: var(--primary-color);
	color: white;
	border-left: 3px solid var(--primary-600);
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12);
}

.sidebar-button:hover {
	background-color: var(--surface-hover);
	color: var(--primary-color);
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
	transform: translateX(2px);
}

.button-icon {
	flex-shrink: 0;
	width: 20px;
	height: 20px;
	margin-left: 10px;
	margin-right: 10px;
	opacity: 0.9;
}

.sidebar-button.active .button-icon,
.sidebar-button:hover .button-icon {
	opacity: 1;
}

.create-item {
	border: none;
	background-color: transparent;
	width: 100%;
	text-align: left;
	padding: 8px 12px;
	cursor: pointer;
	font-size: 0.85rem;
	color: var(--text-color);
	transition: background-color 0.2s ease;
}

.create-item:hover {
	background-color: var(--surface-hover);
}

.button-text {
	flex: 1;
	text-align: left;
	font-size: 0.875rem;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	padding-right: 10px;
	line-height: 1.3;
	font-weight: 500;
	letter-spacing: -0.01em;
}

.sidebar-button {
	border-radius: 6px;
	border: 1px solid transparent;
	background-color: var(--surface-card);
	color: var(--text-color);
	display: flex;
	width: 100%;
	align-items: center;
	min-height: 40px;
	height: 40px;
	padding: 0;
	box-sizing: border-box;
	cursor: pointer;
	transition: all 0.2s ease;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.sidebar-button:active {
	transform: scale(0.97);
}

#sidebar {
	display: flex;
	flex-direction: column;
	width: 170px;
	min-width: 170px;
	align-self: flex-start;
	gap: 5px;
	background-color: var(--surface-ground);
	padding: 10px;
	border-radius: 8px;
	margin-top: 10px;
	position: relative;
	border: 1px solid var(--surface-border);
	transition: all 0.3s ease;
}

#sidebar.collapsed {
	width: 56px;
	min-width: 56px;
}

.sidebar-toggle {
	position: absolute;
	top: 8px;
	right: -12px;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	border: 2px solid var(--primary-color);
	background-color: var(--surface-0);
	color: var(--primary-color);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	z-index: 10;
	transition: all 0.2s ease;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

.sidebar-toggle:hover {
	background-color: var(--primary-color);
	color: white;
	transform: scale(1.15);
	box-shadow: 0 3px 8px rgba(0, 0, 0, 0.25);
}

.toggle-icon {
	width: 16px;
	height: 16px;
}

.collapsed .button-text {
	display: none;
}

.collapsed .sidebar-button {
	justify-content: center;
	padding: 0;
}

.collapsed .button-icon {
	margin: 0;
}

/* SpeedDial customization */
:deep(.p-speeddial) {
	position: relative;
}

:deep(.p-speeddial-list) {
	background-color: var(--surface-card);
	border-radius: 6px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
	border: 1px solid var(--surface-border);
	padding: 4px;
	margin-top: 2px;
}

:deep(.p-speeddial-item) {
	margin: 2px 0;
}

/* Responsive adjustments for smaller screens */
@media (max-width: 768px) {
	#sidebar {
		width: 140px;
		min-width: 140px;
		padding: 6px;
		gap: 3px;
	}

	.button-text {
		font-size: 0.8rem;
	}

	.sidebar-button {
		min-height: 36px;
		height: 36px;
	}

	.button-icon {
		width: 16px;
		height: 16px;
		margin-left: 8px;
		margin-right: 8px;
	}
}

@media (max-width: 480px) {
	#sidebar {
		width: 120px;
		min-width: 120px;
		padding: 5px;
		gap: 2px;
	}

	.sidebar-button {
		min-height: 34px;
		height: 34px;
	}

	.button-text {
		font-size: 0.75rem;
	}

	.button-icon {
		width: 14px;
		height: 14px;
		margin-left: 6px;
		margin-right: 6px;
	}
}
</style>