Add img_format=png to imager URLs and extend navbar color picker with 10 new colors

src/components/navbar-color-picker.tsx

@@ -7,17 +7,27 @@ const COLORS = [
 	{ name: "Zwart", value: "#0f172a", text: "#f8fafc" },
 	{ name: "Donker", value: "#1e293b", text: "#f8fafc" },
 	{ name: "Grijs", value: "#f1f5f9", text: "#1e293b" },
+	{ name: "Zilvergrijs", value: "#94a3b8", text: "#1e293b" },
+	{ name: "Leisteen", value: "#475569", text: "#f8fafc" },
+	{ name: "Bruin", value: "#92400e", text: "#f8fafc" },
+	{ name: "Koper", value: "#b45309", text: "#f8fafc" },
 	{ name: "Amber", value: "#f59e0b", text: "#1e293b" },
 	{ name: "Goud", value: "#eab308", text: "#1e293b" },
 	{ name: "Oranje", value: "#ea580c", text: "#ffffff" },
 	{ name: "Rood", value: "#ef4444", text: "#ffffff" },
+	{ name: "Bordeaux", value: "#991b1b", text: "#f8fafc" },
 	{ name: "Roze", value: "#ec4899", text: "#ffffff" },
+	{ name: "Fuchsia", value: "#d946ef", text: "#ffffff" },
 	{ name: "Paars", value: "#8b5cf6", text: "#ffffff" },
+	{ name: "Violet", value: "#6d28d9", text: "#f8fafc" },
 	{ name: "Indigo", value: "#6366f1", text: "#ffffff" },
 	{ name: "Blauw", value: "#3b82f6", text: "#ffffff" },
+	{ name: "Koningsblauw", value: "#1d4ed8", text: "#ffffff" },
 	{ name: "Cyaan", value: "#06b6d4", text: "#ffffff" },
+	{ name: "Mint", value: "#14b8a6", text: "#ffffff" },
 	{ name: "Groen", value: "#22c55e", text: "#1e293b" },
 	{ name: "Olijf", value: "#84cc16", text: "#1e293b" },
+	{ name: "Limoen", value: "#65a30d", text: "#ffffff" },
 ];
 
 export function NavbarColorPicker() {
@@ -97,14 +107,14 @@ export function NavbarColorPicker() {
 			</button>
 
 			{mounted && open && (
-				<div className="dropdown-menu absolute right-0 top-full mt-0.5 min-w-[180px] sm:min-w-[200px] rounded-xl z-50 py-3 px-2">
+				<div className="dropdown-menu absolute right-0 top-full mt-0.5 min-w-[240px] sm:min-w-[280px] rounded-xl z-50 py-3 px-2">
 					<div
 						className="text-xs font-semibold uppercase tracking-wider mb-2 px-2"
 						style={{ color: "var(--color-text-muted)" }}
 					>
 						Navbar kleur
 					</div>
-					<div className="grid grid-cols-3 sm:grid-cols-5 gap-1.5">
+					<div className="grid grid-cols-5 gap-1.5">
 						{COLORS.map((c, i) => (
 							<button
 								key={c.name}