56 lines
1.2 KiB
TypeScript
56 lines
1.2 KiB
TypeScript
|
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"};
|
||
|
|
}
|
||
|
|
|
||
|
|
.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;
|