Navbar styles

src/back/routes/common/navbar.ts

@@ -1,5 +1,6 @@
 import type { BaseContext } from "koa";
-import type { FlatTemplatable } from "tempstream";
+import { button } from "src/back/elements/button.js";
+import { tempstream, type FlatTemplatable } from "tempstream";
 
 export async function default_navbar(ctx: BaseContext): Promise<FlatTemplatable> {
 	const { items: navbar_items } = await ctx.$app.collections["navbar-links"]
@@ -11,14 +12,19 @@ export async function default_navbar(ctx: BaseContext): Promise<FlatTemplatable>
 	}));
 
 	const linksHTML = linkData
-		.map((link) =>
-			link.url === new URL(ctx.url, "https://a.com").pathname // checking if it's the current path we're looking at
-				? `<li class="active"><span>${link.text}</span></li>`
-				: /* HTML */ `<li><a href="${link.url}">${link.text}</a></li>`
+		.map(
+			(link) => /* HTML */ tempstream`<li>
+				${button({
+					text: link.text || "",
+					href: link.url || "",
+					variant: "accent1",
+					disabled: link.url == new URL(ctx.url, "https://a.com").pathname, // checking if it's the current path we're looking at
+				})}
+			</li>`
 		)
 		.join("\n");
 
-	return /* HTML */ ` <nav>
+	return /* HTML */ `<nav>
 		<a href="/" class="nav-logo">
 			<img
 				src="/assets/logo"

src/main.css

@@ -26,8 +26,19 @@ body {
 	align-items: center;
 }
 
-nav a:not(:visited) {
-	color: var(--primary-accent-color);
+nav {
+	display: flex;
+	flex-flow: row wrap;
+	justify-content: space-between;
+	ul {
+		display: flex;
+		gap: 8px;
+		padding-left: 0px;
+
+		li {
+			list-style: none;
+		}
+	}
 }
 
 .form-input__wrapper--control-type__photo {
@@ -48,8 +59,7 @@ a {
 	color: var(--color-brand-link-fg);
 }
 
-
 .sealious-list__actions {
-    display: flex;
-    gap: 16px;
+	display: flex;
+	gap: 16px;
 }