60 lines
1.7 KiB
TypeScript
60 lines
1.7 KiB
TypeScript
|
import { AnyNode, Attrs, E, Elem } from "ren/node.ts";
|
||
|
|
import { classNames } from "ren/attrs.ts";
|
||
|
|
import { Context, getLangHref, iterLangs, Lang } from "../../context.ts";
|
||
|
|
import { Link, RepoLink } from "../uikit/link.ts";
|
||
|
|
|
||
|
|
export function PageLayout(ctx: Context, children: AnyNode[]): Elem {
|
||
|
|
return E("div", { id: "main" }, [
|
||
|
|
Header(ctx),
|
||
|
|
E("div", classNames("content"), children),
|
||
|
|
Footer(ctx),
|
||
|
|
]);
|
||
|
|
}
|
||
|
|
|
||
|
|
export function Header(ctx: Context): AnyNode {
|
||
|
|
return E("header", classNames("header gap-v-1x5"), [
|
||
|
|
E("div", classNames("content-width"), [HeaderNav(ctx)]),
|
||
|
|
]);
|
||
|
|
}
|
||
|
|
|
||
|
|
export function HeaderNav(ctx: Context): AnyNode {
|
||
|
|
return E("nav", classNames("main-menu"), [
|
||
|
|
Link(ctx.tr.About, navLink("/", ctx)),
|
||
|
|
Link(ctx.tr.Works, navLink("/works", ctx)),
|
||
|
|
]);
|
||
|
|
}
|
||
|
|
|
||
|
|
function navLink(lhref: string, ctx?: Context): Attrs {
|
||
|
|
const attrs: Attrs = { lhref };
|
||
|
|
if (ctx?.locPath === lhref) attrs["aria-current"] = "true";
|
||
|
|
return attrs;
|
||
|
|
}
|
||
|
|
|
||
|
|
export function Footer(ctx: Context): AnyNode {
|
||
|
|
return E("footer", classNames("footer"), [
|
||
|
|
E("div", classNames("content-width row-sta-bet"), [
|
||
|
|
RepoLink(ctx.tr.Source_code, "/pleshevskiy/recipes"),
|
||
|
|
ChangeLang(ctx),
|
||
|
|
]),
|
||
|
|
]);
|
||
|
|
}
|
||
|
|
|
||
|
|
export function ChangeLang(ctx: Context): AnyNode {
|
||
|
|
const dropdownId = "change_langs";
|
||
|
|
return E("div", classNames("dropdown"), [
|
||
|
|
E("input", { id: dropdownId, type: "checkbox" }),
|
||
|
|
E("label", { for: dropdownId }, ctx.lang),
|
||
|
|
E(
|
||
|
|
"ul",
|
||
|
|
[],
|
||
|
|
iterLangs().filter((l) => l !== ctx.lang).map((l) =>
|
||
|
|
ChangeLangBtn(ctx, l)
|
||
|
|
),
|
||
|
|
),
|
||
|
|
]);
|
||
|
|
}
|
||
|
|
|
||
|
|
export function ChangeLangBtn(ctx: Context, lang: Lang): AnyNode {
|
||
|
|
return Link(lang, { "href": getLangHref(lang, ctx.locPath) });
|
||
|
|
}
|