update sidebar

frontend/src/components/SideBar.vue

@@ -15,11 +15,18 @@ import {
 	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([
 	{
@@ -95,7 +102,16 @@ const handleCategoryClick = (category) => {
 </script>
 
 <template>
-	<div id="sidebar" class="sidebar">
+	<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
@@ -105,25 +121,28 @@ const handleCategoryClick = (category) => {
 					]"
 					:key="category.name"
 					@click="handleCategoryClick(category)"
+					:title="isCollapsed ? category.name : ''"
 				>
-					<component :is="category.icon" class="button-icon" /><span
+					<component :is="category.icon" class="button-icon" />
-						class="button-text"
+					<span class="button-text" v-if="!isCollapsed">{{ category.name }}</span>
-						>{{ category.name }}</span
-					>
 				</button>
 			</template>
 			<template v-else>
-				<SpeedDial :model="category.buttons" direction="down" type="linear" radius="50">
+				<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
+							<component :is="category.icon" class="button-icon" />
-								class="button-text"
+							<span class="button-text">{{ category.name }}</span>
-								>{{ category.name }}</span
-							>
 						</button>
 					</template>
 					<template #item="{ item, toggleCallback }">
@@ -132,6 +151,9 @@ const handleCategoryClick = (category) => {
 						</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>
@@ -139,20 +161,31 @@ const handleCategoryClick = (category) => {
 
 <style lang="css">
 .sidebar-button.active {
-	background-color: rgb(25, 60, 53);
+	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: rgb(82, 132, 119);
+	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: 8px;
+	margin-left: 10px;
-	margin-right: 8px;
+	margin-right: 10px;
+	opacity: 0.9;
+}
+
+.sidebar-button.active .button-icon,
+.sidebar-button:hover .button-icon {
+	opacity: 1;
 }
 
 .create-item {
@@ -160,74 +193,182 @@ const handleCategoryClick = (category) => {
 	background-color: transparent;
 	width: 100%;
 	text-align: left;
-	padding: 5px 10px;
+	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: center;
+	text-align: left;
-	font-size: clamp(0.6rem, 2vw, 0.9rem);
+	font-size: 0.875rem;
 	white-space: nowrap;
-	padding-right: 8px;
+	overflow: hidden;
-	line-height: 1.2;
+	text-overflow: ellipsis;
+	padding-right: 10px;
+	line-height: 1.3;
 	font-weight: 500;
-	letter-spacing: -0.02em;
+	letter-spacing: -0.01em;
 }
 
 .sidebar-button {
-	border-radius: 5px;
+	border-radius: 6px;
-	border: none;
+	border: 1px solid transparent;
-	background-color: rgb(69, 112, 101);
+	background-color: var(--surface-card);
-	color: white;
+	color: var(--text-color);
 	display: flex;
 	width: 100%;
 	align-items: center;
-	min-height: 44px;
+	min-height: 40px;
-	height: 44px;
+	height: 40px;
-	padding: 8px 0;
+	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: 180px;
+	width: 170px;
-	min-width: 180px;
+	min-width: 170px;
 	align-self: flex-start;
-	gap: 10px;
+	gap: 5px;
-	background-color: #f3f3f3;
+	background-color: var(--surface-ground);
 	padding: 10px;
-	border-radius: 5px;
+	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: 160px;
+		width: 140px;
-		min-width: 160px;
+		min-width: 140px;
+		padding: 6px;
+		gap: 3px;
 	}
 
 	.button-text {
-		font-size: clamp(0.55rem, 1.8vw, 0.8rem);
+		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: 140px;
+		width: 120px;
-		min-width: 140px;
+		min-width: 120px;
+		padding: 5px;
+		gap: 2px;
 	}
 
 	.sidebar-button {
-		min-height: 40px;
+		min-height: 34px;
-		height: 40px;
+		height: 34px;
 	}
 
 	.button-text {
-		font-size: clamp(0.5rem, 1.5vw, 0.7rem);
+		font-size: 0.75rem;
+	}
+
+	.button-icon {
+		width: 14px;
+		height: 14px;
+		margin-left: 6px;
+		margin-right: 6px;
 	}
 }
 </style>