AppShell

import { AppShell, SideNav } from "mizu-ui";

export function Example() {
  return (
    <AppShell
      mainTag="section"
      mainId="shell-demo-content"
      header={<strong>Workshop</strong>}
      sidebar={
        <SideNav
          currentPath="/components"
          groups={[
            {
              label: "Explore",
              items: [
                { label: "Collection", href: "/components" },
                { label: "Lab", href: "/lab" },
              ],
            },
          ]}
        />
      }
      footer={
        <span className="mizu-field-hint">
          All changes stay on this device.
        </span>
      }
    >
      <h3>Your workspace</h3>
      <p className="mizu-field-hint">
        A shell gives content a place; it does not decide the product for you.
      </p>
    </AppShell>
  );
}