material: add AppTopBar

src/material/AppTopBar.css

@@ -0,0 +1,5 @@
+.AppTopBar {
+  & > .toolbar {
+    padding-top: var(--safe-area-inset-top, 0px);
+  }
+}

src/material/AppTopBar.tsx

@@ -0,0 +1,28 @@
+import { AppBar, Toolbar } from "@suid/material";
+import { splitProps, type JSX, type ParentComponent } from "solid-js";
+import "./AppTopBar.css";
+
+const AppTopBar: ParentComponent<{
+  class?: string;
+  style?: JSX.HTMLAttributes<HTMLElement>["style"];
+}> = (oprops) => {
+  const [props, rest] = splitProps(oprops, ["children", "class"]);
+  return (
+    <AppBar
+      class={`AppTopBar ${props.class || ""}`}
+      elevation={1}
+      position="static"
+      {...rest}
+    >
+      <Toolbar
+        variant="dense"
+        class="toolbar"
+        sx={{ paddingTop: "var(--safe-area-inset-top, 0px)" }}
+      >
+        {props.children}
+      </Toolbar>
+    </AppBar>
+  );
+};
+
+export default AppTopBar;