43 lines
1.0 KiB
TypeScript
43 lines
1.0 KiB
TypeScript
import { ComponentChildren } from "preact";
|
|
import { menu } from "@lib/menus.ts";
|
|
|
|
export type Props = {
|
|
children: ComponentChildren;
|
|
title?: string;
|
|
name?: string;
|
|
url: URL;
|
|
description?: string;
|
|
};
|
|
|
|
export const MainLayout = ({ children, url }: Props) => {
|
|
return (
|
|
<div
|
|
class="md:grid mx-auto"
|
|
style={{ gridTemplateColumns: "200px 1fr", maxWidth: "1024px" }}
|
|
>
|
|
<aside class="p-4 hidden md:block">
|
|
<nav class="min-h-fit rounded-3xl p-3 grid gap-3 fixed t-0">
|
|
{menu.map((m) => {
|
|
return (
|
|
<a
|
|
href={m.link}
|
|
class={`block ${
|
|
m.link === url.pathname ? "bg-white text-black" : "text-white"
|
|
} p-3 text-xl w-full rounded-2xl`}
|
|
>
|
|
{m.name}
|
|
</a>
|
|
);
|
|
})}
|
|
</nav>
|
|
</aside>
|
|
<main
|
|
class="py-5"
|
|
style={{ fontFamily: "Work Sans" }}
|
|
>
|
|
{children}
|
|
</main>
|
|
</div>
|
|
);
|
|
};
|