packages/layout/src/layout.astro

---
import { container, vstack } from "@cieloazul310/sarkara-css/patterns";
import {
  css,
  sva,
  type RecipeVariantProps,
} from "@cieloazul310/sarkara-css/css";
import { PaperLink, Divider } from "@cieloazul310/astro-sarkara-components";
import {
  defineMenu,
  withBaseUrl,
  type Menu,
} from "@cieloazul310/astro-sarkara-utils";

import Seo, { type Props as SeoProps } from "./seo.astro";
import Header from "./header.astro";
import Drawer from "./drawer.astro";
import Footer from "./footer.astro";
import Jumbotron from "./jumbotron.astro";
import Fab from "./fab.astro";
import MenuList from "./menu.astro";

const defaultMenu = defineMenu([
  { title: "Top", href: "/" },
  {
    title: "Link",
    items: [
      { title: "Astro", href: "https://astro.build/" },
      { title: "Panda CSS", href: "https://panda-css.com/" },
      {
        title: "GitHub Repo",
        href: "https://github.com/cieloazul310/astro-sarkara",
      },
    ],
  },
]);

const layoutStyle = sva({
  slots: ["sidebar", "fab"],
  base: {
    sidebar: {
      width: "sidebarWidth",
      flexShrink: 0,
      px: 2,
      pb: 8,
    },
    fab: {
      position: "fixed",
      bottom: 4,
      right: 4,
      zIndex: "fab",
    },
  },
  variants: {
    variant: {
      default: {
        sidebar: { display: { base: "none", md: "block" } },
        fab: { display: { base: "block", md: "none" } },
      },
      fullWidth: {
        sidebar: { display: "none" },
        fab: { display: "block" },
      },
    },
  },
  defaultVariants: {
    variant: "default",
  },
});

export type Props = SeoProps &
  RecipeVariantProps<typeof layoutStyle> & {
    menu?: Menu;
    htmlLang?: string;
    disableSidebarSticky?: boolean;
  };

const {
  siteMetadata,
  title,
  description,
  image,
  variant = "default",
  htmlLang = "ja",
  menu = defaultMenu,
  disableSidebarSticky = false,
  siteType = "website",
  twitterCardType = "summary",
} = Astro.props;

const { sidebar, fab } = layoutStyle({ variant });
const sidebarStickyStyle = css({
  position: "sticky",
  top: "calc(token(sizes.headerHeight) + token(spacing.4))",
  maxHeight: "calc(100vh - token(sizes.headerHeight))",
  overflowY: "auto",
});
const contentTitle =
  title && title !== siteMetadata.title
    ? `${title} - ${siteMetadata.title}`
    : siteMetadata.title;
const favicon = {
  type:
    !siteMetadata.favicon ||
    siteMetadata.favicon?.split(".").slice(-1)[0] === "svg"
      ? "image/svg+xml"
      : null,
  href: withBaseUrl(siteMetadata.favicon ?? "/favicon.svg"),
};
---

<!doctype html>
<html lang={htmlLang}>
  <head>
    <slot name="top-of-head" />
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width" />
    <link rel="icon" type={favicon.type} href={favicon.href} />
    <meta name="generator" content={Astro.generator} />
    <title>{contentTitle}</title>
    <slot name="seo">
      <Seo
        siteMetadata={siteMetadata}
        title={title}
        description={description}
        image={image}
        siteType={siteType}
        twitterCardType={twitterCardType}
      >
        <slot name="meta" />
      </Seo>
    </slot>
    <slot name="bottom-of-head" />
  </head>
  <body>
    <slot name="top-of-body" />
    <slot name="header">
      <Header siteTitle={siteMetadata.title} />
    </slot>
    <main>
      <article>
        <slot name="jumbotron">
          <Jumbotron title={title || siteMetadata.title}>
            <slot name="jumbotron-header" slot="jumbotron-header" />
            <slot name="jumbotron-footer" slot="jumbotron-footer" />
          </Jumbotron>
        </slot>
        <div
          class={container({
            maxWidth: "contentMaxWidth",
            display: "flex",
            px: 2,
            py: 4,
          })}
        >
          <div
            class={vstack({
              flexGrow: 1,
              gap: "md",
              px: [0, 2],
              alignItems: "stretch",
              maxWidth: "100%",
              minWidth: 0,
            })}
          >
            <slot name="top-of-main" />
            <slot />
            <div class={css({ hideFrom: "md" })}>
              <MenuList menu={menu} />
            </div>
            <PaperLink className={css({ hideBelow: "md" })} href="/">
              Top
            </PaperLink>
            <slot name="bottom-of-main" />
          </div>
          <div
            class:list={[
              sidebar,
              { [sidebarStickyStyle]: !disableSidebarSticky },
            ]}
          >
            <div
              class={vstack({
                gap: "md",
                alignItems: "stretch",
              })}
            >
              <slot name="sidebar">
                <slot name="sidebar-top" />
                {Astro.slots.has("sidebar-top") && <Divider />}
                <MenuList menu={menu} />
                {Astro.slots.has("sidebar-bottom") && <Divider />}
                <slot name="sidebar-bottom" />
              </slot>
            </div>
          </div>
        </div>
      </article>
    </main>
    <slot name="footer">
      <Footer siteTitle={siteMetadata.title} />
    </slot>
    <div class={fab}>
      <slot name="fab">
        <Fab />
      </slot>
    </div>
    <slot name="drawer">
      <Drawer siteTitle={siteMetadata.title}>
        <slot name="drawer-top" slot="drawer-top" />
        <MenuList menu={menu} />
        <slot name="drawer-bottom" slot="drawer-bottom" />
      </Drawer>
    </slot>
    <script>
      import "./scripts/toggleColorMode.ts";
    </script>
    <script is:inline>
      const theme = (() => {
        if (typeof localStorage === "undefined") return "light";

        const localStorageItem = localStorage.getItem("astro-color-mode");
        if (
          localStorageItem &&
          (localStorageItem === "light" || localStorageItem === "dark")
        ) {
          return localStorageItem;
        }
        if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
          return "dark";
        }
        return "light";
      })();

      document.documentElement?.setAttribute("data-color-mode", theme);

      window.localStorage.setItem("astro-color-mode", theme);
    </script>
    <slot name="bottom-of-body" />
  </body>
</html>