@stanfordspezi/spezi-web-design-system
Version:
Stanford Biodesign Digital Health Spezi Web Design System
175 lines (174 loc) • 5.58 kB
JavaScript
import { jsx as e, jsxs as i, Fragment as p } from "react/jsx-runtime";
import { c as a } from "./index-2NvaPZWc.mjs";
import { B as h } from "./Button-nH76KtOO.mjs";
import { createContext as u, useContext as x } from "react";
import { u as f } from "./useOpenState-D7bIra9A.mjs";
import b from "./menu-DgnbM8qh.mjs";
import { useSpeziContext as v } from "./SpeziProvider.js";
import { T as N } from "./Tooltip-Rs8aEg_1.mjs";
import { A as y } from "./Avatar-B8qd3jSh.mjs";
const c = u({
shrinkable: !0
}), D = ({
title: t,
actions: r,
children: s,
aside: d,
mobile: n,
shrinkable: o = !0
}) => {
const l = f();
return /* @__PURE__ */ e(c.Provider, { value: { shrinkable: o }, children: /* @__PURE__ */ i(
"div",
{
"data-slot": "dashboard-layout",
className: a(
"text-foreground [--headerHeight:72px] **:[box-sizing:border-box] lg:[--headerHeight:86px]",
o ? "[--asideWidth:86px] xl:[--asideWidth:240px]" : "[--asideWidth:240px]"
),
children: [
/* @__PURE__ */ i(
"header",
{
className: a(
"border-b-border-layout flex h-(--headerHeight) items-center gap-4 border-x-0 border-t-0 border-b border-solid px-4 py-1 lg:ml-(--asideWidth) xl:px-8",
!t && !r && "lg:hidden"
),
children: [
t,
/* @__PURE__ */ i("div", { className: "ml-auto gap-4", children: [
r,
/* @__PURE__ */ e(
h,
{
onClick: l.toggle,
"aria-label": `${l.isOpen ? "Close" : "Open"} menu`,
className: "ml-4 lg:hidden",
children: /* @__PURE__ */ e(b, {})
}
)
] })
]
}
),
/* @__PURE__ */ e(
"aside",
{
className: a(
"border-r-border-layout bg-surface fixed top-0 left-0 hidden h-screen w-(--asideWidth) flex-col items-center border-y-0 border-r border-l-0 border-solid py-4 lg:flex",
o ? "xl:px-3" : "lg:px-3"
),
children: d
}
),
/* @__PURE__ */ i(
"nav",
{
className: a(
"bg-surface fixed top-[calc(var(--headerHeight)+1px)] right-0 left-0 flex h-[calc(100vh-var(--headerHeight)-1px)] w-screen flex-col overflow-y-auto transition duration-300 lg:hidden",
l.isOpen ? "z-10 translate-x-0" : "pointer-events-none -translate-x-24 opacity-0"
),
hidden: !l.isOpen,
"data-testid": "mobileMenu",
children: [
r && /* @__PURE__ */ e("div", { className: "p-4", children: r }),
n
]
}
),
/* @__PURE__ */ e("div", { className: "flex min-h-[calc(100vh-var(--headerHeight))] flex-col px-4 pt-6 pb-12 md:px-12 md:pt-10 md:pb-16 lg:ml-(--asideWidth)", children: s })
]
}
) });
}, P = ({
href: t,
icon: r,
isActive: s,
label: d,
isHighlighted: n,
children: o
}) => {
const { shrinkable: l } = x(c), {
router: { Link: g }
} = v(), m = /* @__PURE__ */ e(p, { children: /* @__PURE__ */ i(
g,
{
href: t,
"data-slot": "menu-item",
className: a(
"focus-ring relative flex items-center gap-3 rounded-lg p-2 font-medium no-underline transition",
s ? "bg-accent/50 text-primary hover:opacity-60" : "text-foreground/60 hover:bg-accent hover:text-foreground",
l ? "xl:w-full xl:self-start" : "lg:w-full lg:self-start"
),
children: [
r,
/* @__PURE__ */ e("span", { className: a("grow", l && "lg:hidden xl:block"), children: d }),
o,
n && /* @__PURE__ */ e(
"i",
{
"aria-hidden": !0,
className: a(
"bg-destructive size-2.5 rounded-full",
l && "lg:absolute lg:top-1 lg:right-1 lg:size-1.5 xl:static xl:size-2.5"
)
}
)
]
}
) });
return l ? /* @__PURE__ */ e(
N,
{
tooltip: d,
sideOffset: 8,
side: "right",
className: "hidden lg:block xl:hidden",
children: m
},
t
) : m;
}, A = ({ title: t, subTitle: r, icon: s }) => /* @__PURE__ */ i("div", { "data-slot": "page-title", className: "flex items-center gap-2 lg:gap-4", children: [
s && /* @__PURE__ */ e(
"div",
{
className: "flex-center bg-muted rounded-lg p-2 [&_svg]:size-5 lg:[&_svg]:size-6",
"aria-hidden": !0,
children: s
}
),
/* @__PURE__ */ i("div", { className: "flex flex-col", children: [
t && /* @__PURE__ */ e("h1", { className: "font-medium lg:text-xl", children: t }),
r && /* @__PURE__ */ e("h2", { className: "text-xs lg:text-sm", children: r })
] })
] }), B = ({ name: t, img: r, ...s }) => {
const { shrinkable: d } = x(c);
return /* @__PURE__ */ i(
h,
{
"data-slot": "user-menu-item",
variant: "ghost",
className: a(
"mt-auto mb-2 p-2! transition",
d ? "xl:mb-0 xl:w-full xl:justify-start xl:self-start" : "lg:mb-0 lg:w-full lg:justify-start lg:self-start"
),
...s,
children: [
/* @__PURE__ */ e(y, { size: "sm", name: t, src: r }),
/* @__PURE__ */ e(
"span",
{
className: a("truncate text-sm", d && "lg:hidden xl:block"),
children: t
}
)
]
}
);
};
export {
D,
P as M,
A as P,
B as U
};