kuba/strona-czynna
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Navbar styles

Browse Source
This commit is contained in:
Kuba Orlik 2025-03-03 18:46:09 +01:00
parent 79552da372
commit 0ba9de1b09
2 changed files with 27 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
src/back/routes/common/navbar.ts
View File

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

20
src/main.css
View File

@ -26,8 +26,19 @@ body {
align-items: center; align-items: center;
} }
nav a:not(:visited) { nav {
color: var(--primary-accent-color); 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 { .form-input__wrapper--control-type__photo {
@ -48,8 +59,7 @@ a {
color: var(--color-brand-link-fg); color: var(--color-brand-link-fg);
} }
.sealious-list__actions { .sealious-list__actions {
display: flex; display: flex;
gap: 16px; gap: 16px;
} }