2023-09-08 13:33:29 +02:00
|
|
|
import { LayoutProps } from "$fresh/server.ts";
|
|
|
|
|
import { resources } from "@lib/resources.ts";
|
|
|
|
|
import { CSS, KATEX_CSS } from "https://deno.land/x/gfm@0.2.5/mod.ts";
|
2023-10-13 16:09:50 +02:00
|
|
|
import { Head, Partial } from "$fresh/runtime.ts";
|
2023-09-08 13:33:29 +02:00
|
|
|
import { Emoji } from "@components/Emoji.tsx";
|
|
|
|
|
|
2023-10-16 01:40:10 +02:00
|
|
|
export default function MyLayout({ Component }: LayoutProps) {
|
2023-09-08 13:33:29 +02:00
|
|
|
return (
|
|
|
|
|
<div
|
|
|
|
|
class="md:grid mx-auto"
|
|
|
|
|
style={{ gridTemplateColumns: "200px 1fr", maxWidth: "1024px" }}
|
|
|
|
|
>
|
|
|
|
|
<Head>
|
|
|
|
|
<style>{CSS}</style>
|
|
|
|
|
<style>{KATEX_CSS}</style>
|
|
|
|
|
</Head>
|
2023-10-13 16:09:50 +02:00
|
|
|
<aside class="p-4 hidden md:block" f-client-nav>
|
2023-09-08 13:33:29 +02:00
|
|
|
<nav class="min-h-fit rounded-3xl p-3 grid gap-3 fixed t-0">
|
|
|
|
|
{Object.values(resources).map((m) => {
|
|
|
|
|
return (
|
|
|
|
|
<a
|
|
|
|
|
href={m.link}
|
2023-10-16 01:40:10 +02:00
|
|
|
class={`flex items-center gap-2 text-white [data-current]:bg-white [data-current]:text-black p-3 text-xl w-full rounded-2xl`}
|
2023-09-08 13:33:29 +02:00
|
|
|
>
|
|
|
|
|
{<Emoji class="w-6 h-6" name={m.emoji} />} {m.name}
|
|
|
|
|
</a>
|
|
|
|
|
);
|
|
|
|
|
})}
|
|
|
|
|
</nav>
|
|
|
|
|
</aside>
|
|
|
|
|
<main
|
|
|
|
|
class="py-5"
|
|
|
|
|
style={{ fontFamily: "Work Sans" }}
|
|
|
|
|
>
|
2023-10-13 16:09:50 +02:00
|
|
|
<Partial name="content">
|
|
|
|
|
<Component />
|
|
|
|
|
</Partial>
|
2023-09-08 13:33:29 +02:00
|
|
|
</main>
|
|
|
|
|
</div>
|
|
|
|
|
);
|
|
|
|
|
}
|
