memorium/components/layouts/main.tsx

import { ComponentChildren } from "preact";

export type Props = {
  children: ComponentChildren;
  title?: string;
  name?: string;
  url: URL;
  description?: string;
};

export const MainLayout = ({ children, url }: Props) => {
  const menu = [
    {
      name: "🏡 Home",
      link: "/",
    },
    {
      name: "🍽️ Recipes",
      link: "/recipes",
    },
    {
      name: "🍿 Movies",
      link: "/movies",
    },
    {
      name: "📝 Articles",
      link: "/articles",
    },
  ];

  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>
  );
};