tutu/src/material/Scaffold.tsx

import { createElementSize } from "@solid-primitives/resize-observer";
import {
  Show,
  createRenderEffect,
  createSignal,
  onCleanup,
  type JSX,
  type ParentComponent,
} from "solid-js";
import { css } from "solid-styled";

interface ScaffoldProps {
  topbar?: JSX.Element;
  fab?: JSX.Element;
  bottom?: JSX.Element;
}

const Scaffold: ParentComponent<ScaffoldProps> = (props) => {
  const [topbarElement, setTopbarElement] = createSignal<HTMLElement>();

  const topbarSize = createElementSize(topbarElement);

  css`
    .scaffold-content {
      --scaffold-topbar-height: ${(topbarSize.height?.toString() ?? 0) + "px"};
    }

    .topbar {
      position: sticky;
      top: 0px;
      z-index: var(--tutu-zidx-nav, auto);
    }

    .fab-dock {
      position: fixed;
      bottom: 40px;
      right: 40px;
      z-index: var(--tutu-zidx-nav, auto);
    }

    .bottom-dock {
      position: sticky;
      bottom: 0;
      left: 0;
      right: 0;
      z-index: var(--tutu-zidx-nav, auto);
      padding-bottom: var(--safe-area-inset-bottom, 0);

    }
  `;
  return (
    <>
      <Show when={props.topbar}>
        <div class="topbar" ref={setTopbarElement}>
          {props.topbar}
        </div>
      </Show>
      <Show when={props.fab}>
        <div class="fab-dock">{props.fab}</div>
      </Show>
      <div class="scaffold-content">{props.children}</div>
      <Show when={props.bottom}>
        <div class="bottom-dock">{props.bottom}</div>
      </Show>
    </>
  );
};

export default Scaffold;