big updates

frontend/src/components/SideBar.vue

@@ -12,6 +12,9 @@ import {
 	Clock,
 	HistoricShield,
 	Developer,
+	Neighbourhood,
+	Calculator,
+	ReceiveDollars,
 } from "@iconoir/vue";
 import SpeedDial from "primevue/speeddial";
 
@@ -37,7 +40,7 @@ const createButtons = ref([
 	{
 		label: "On-Site Meeting",
 		command: () => {
-			router.push("/onsitemeetings/new");
+			router.push("/schedule-onsite?new=true");
 		},
 	},
 	{
@@ -72,7 +75,10 @@ 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" },
@@ -81,7 +87,7 @@ const categories = ref([
 		icon: MultiplePagesPlus,
 		buttons: createButtons,
 	},
-	{ name: "Development", icon: Developer, buttons: developmentButtons },
+	// { name: "Development", icon: Developer, buttons: developmentButtons },
 ]);
 const handleCategoryClick = (category) => {
 	router.push(category.url);
@@ -142,8 +148,11 @@ const handleCategoryClick = (category) => {
 }
 
 .button-icon {
-	justify-self: flex-start;
-	margin-left: 5px;
+	flex-shrink: 0;
+	width: 20px;
+	height: 20px;
+	margin-left: 8px;
+	margin-right: 8px;
 }
 
 .create-item {
@@ -156,8 +165,14 @@ const handleCategoryClick = (category) => {
 }
 
 .button-text {
-	margin-left: auto;
-	margin-right: auto;
+	flex: 1;
+	text-align: center;
+	font-size: clamp(0.6rem, 2vw, 0.9rem);
+	white-space: nowrap;
+	padding-right: 8px;
+	line-height: 1.2;
+	font-weight: 500;
+	letter-spacing: -0.02em;
 }
 
 .sidebar-button {
@@ -168,12 +183,17 @@ const handleCategoryClick = (category) => {
 	display: flex;
 	width: 100%;
 	align-items: center;
+	min-height: 44px;
+	height: 44px;
+	padding: 8px 0;
+	box-sizing: border-box;
 }
 
 #sidebar {
 	display: flex;
 	flex-direction: column;
-	width: 150px;
+	width: 180px;
+	min-width: 180px;
 	align-self: flex-start;
 	gap: 10px;
 	background-color: #f3f3f3;
@@ -182,4 +202,32 @@ const handleCategoryClick = (category) => {
 	margin-top: 10px;
 	position: relative;
 }
+
+/* Responsive adjustments for smaller screens */
+@media (max-width: 768px) {
+	#sidebar {
+		width: 160px;
+		min-width: 160px;
+	}
+
+	.button-text {
+		font-size: clamp(0.55rem, 1.8vw, 0.8rem);
+	}
+}
+
+@media (max-width: 480px) {
+	#sidebar {
+		width: 140px;
+		min-width: 140px;
+	}
+
+	.sidebar-button {
+		min-height: 40px;
+		height: 40px;
+	}
+
+	.button-text {
+		font-size: clamp(0.5rem, 1.5vw, 0.7rem);
+	}
+}
 </style>