initial commit

src/material/Scaffold.tsx

@@ -0,0 +1,58 @@
+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;
+}
+
+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"};
+
+      height: 100%;
+      width: 100%;
+    }
+
+    .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);
+    }
+  `;
+  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>
+    </>
+  );
+};
+
+export default Scaffold;