@payfit/unity-components
Version:
78 lines (77 loc) • 2.63 kB
JavaScript
import { useRef as e } from "react";
import { uyTv as t } from "@payfit/unity-themes";
import { jsx as n, jsxs as r } from "react/jsx-runtime";
import { useResizeObserver as i } from "usehooks-ts";
//#region src/components/app-layout/AppLayout.tsx
var a = t({
slots: {
body: "uy:min-h-dvh uy:relative uy:flex uy:flex-col uy:pt-(--uy-app-layout-header-sticky-offset)",
header: "uy:fixed uy:top-0 uy:left-0 uy:right-0 uy:z-30",
layoutWrapper: ["uy:flex uy:w-full uy:flex-1 uy:flex-col", "uy:md:flex-row"],
menu: [
"uy:sticky uy:top-(--uy-app-layout-header-sticky-offset) uy:z-20 uy:w-full uy:bg-canvas",
"uy:[&:has([data-mobile-open=true])]:fixed uy:[&:has([data-mobile-open=true])]:inset-x-0 uy:[&:has([data-mobile-open=true])]:bottom-0",
"uy:md:[&:has([data-mobile-open=true])]:sticky uy:md:[&:has([data-mobile-open=true])]:bottom-auto",
"uy:md:h-[calc(100dvh-var(--uy-app-layout-header-sticky-offset))] uy:md:max-w-app-menu uy:md:shrink-0"
],
contentWrapper: ["uy:flex uy:min-w-0 uy:flex-1 uy:flex-col uy:relative", "uy:md:[&:has([data-unity-page])]:pl-0"],
contentHeader: "uy:hidden uy:md:contents",
content: ["uy:flex uy:flex-1 uy:flex-col", "uy:md:[&:has([data-unity-page])]:pr-0 uy:md:[&:has([data-unity-page])]:pt-0"],
footer: "uy:hidden uy:md:block"
},
variants: { withoutContentPadding: {
false: {
content: [
"uy:md:pr-300",
"uy:md:pt-250",
"&:has()"
],
contentWrapper: ["uy:md:pl-100"]
},
true: {
content: [],
contentWrapper: []
}
} }
});
function o({ children: t, menu: o, header: s, contentHeader: c, footer: l, withoutContentPadding: u = !1 }) {
let d = e(null), { height: f = 0 } = i({
ref: d,
box: "border-box"
}), { body: p, header: m, menu: h, layoutWrapper: g, contentWrapper: _, contentHeader: v, content: y, footer: b } = a({ withoutContentPadding: u }), x = { "--uy-app-layout-header-sticky-offset": `${f}px` };
return /* @__PURE__ */ r("div", {
className: p(),
style: x,
children: [s && /* @__PURE__ */ n("div", {
ref: d,
className: m(),
role: "alert",
"aria-live": "assertive",
children: s
}), /* @__PURE__ */ r("div", {
className: g(),
children: [o && /* @__PURE__ */ n("div", {
className: h(),
children: o
}), /* @__PURE__ */ r("div", {
className: _(),
children: [
c && /* @__PURE__ */ n("div", {
className: v(),
children: c
}),
/* @__PURE__ */ n("div", {
className: y(),
children: t
}),
l && /* @__PURE__ */ n("footer", {
className: b(),
children: l
})
]
})]
})]
});
}
//#endregion
export { o as AppLayout };