Rubicon/tutu
1
0
Fork 0
Code Issues 18 Pull requests 1 Projects 1 Activity Actions

AppTopBar: automatically switch toolbar variant
All checks were successful
/ depoly (push) Successful in 1m21s
Details

Browse source
This commit is contained in:
thislight 2024-11-26 15:30:39 +08:00
parent bece50643f
commit b2d8c1bb2e
No known key found for this signature in database
GPG key ID: FCFE5192241CCD4E
1 changed files with 4 additions and 1 deletions
Download patch file Download diff file Expand all files Collapse all files

5
src/material/AppTopBar.tsx
View file

@ -1,12 +1,15 @@
import { AppBar, Toolbar } from "@suid/material";
import { splitProps, type JSX, type ParentComponent } from "solid-js";
import "./AppTopBar.css";
import { useWindowSize } from "@solid-primitives/resize-observer";
const AppTopBar: ParentComponent<{
class?: string;
style?: JSX.HTMLAttributes<HTMLElement>["style"];
}> = (oprops) => {
const [props, rest] = splitProps(oprops, ["children", "class"]);
const windowSize = useWindowSize();
return (
<AppBar
class={`AppTopBar ${props.class || ""}`}
@ -15,7 +18,7 @@ const AppTopBar: ParentComponent<{
{...rest}
>
<Toolbar
variant="dense"
variant={windowSize.width > windowSize.height ? "dense" : "regular"}
class="toolbar"
sx={{ paddingTop: "var(--safe-area-inset-top, 0px)" }}
>