Custom Layout

Example code

---
/* src/layout/custom-layout.astro */
import { SarkaraLayout, type SarkaraLayoutProps } from "@cieloazul310/astro-sarkara";
import { css } from "styled-system/css";
import { siteMetadata, menu } from "../data";

interface Props extends SarkaraLayoutProps {
  // additional props
}
const { ...props } = Astro.props;
---
<SarkaraLayout siteMetadata={siteMetadata} menu={menu} {...props}>
  <header slot="header" class={css({ /* ... */ })}>
    <!-- custom header replace default header -->
  </header>

  <header slot="jumbotron" class={css({ /* ... */ })}>
    <!-- custom header replace default jumbotron -->
  </header>

  <div>
    <!-- main contents -->
  </div>

  <div slot="sidebar" class={css({ /* ... */ })}>
    <!-- custom header replace default header -->
  </div>

  <!-- Fragment with slot means hide layout component -->
  <Fragment slot="footer" />

</SarkaraLayout>