@stanfordspezi/spezi-web-design-system
Version:
Stanford Biodesign Digital Health Spezi Web Design System
182 lines (181 loc) • 5.87 kB
JavaScript
import { jsx as e, jsxs as i, Fragment as p } from "react/jsx-runtime";
import { c as s } from "./index-2NvaPZWc.mjs";
import { B as m } from "./Button-CvQ4tVYH.mjs";
import { u } from "./useOpenState-DNVB5td7.mjs";
import { c as f } from "./createLucideIcon-C8GTh_Qx.mjs";
import { createContext as b, useContext as h } from "react";
import { u as v } from "./SpeziProvider-DjiaU6qz.mjs";
import { d as y } from "./Tooltip-DfoAfOck.mjs";
import { A as N } from "./Avatar-DxOBr45T.mjs";
/**
* @license lucide-react v0.488.0 - ISC
*
* This source code is licensed under the ISC license.
* See the LICENSE file in the root directory of this source tree.
*/
const k = [
["line", { x1: "4", x2: "20", y1: "12", y2: "12", key: "1e0a9i" }],
["line", { x1: "4", x2: "20", y1: "6", y2: "6", key: "1owob3" }],
["line", { x1: "4", x2: "20", y1: "18", y2: "18", key: "yk5zj1" }]
], z = f("menu", k), c = b({
shrinkable: !0
}), I = ({
title: t,
actions: r,
children: a,
aside: d,
mobile: n,
shrinkable: o = !0
}) => {
const l = u();
return /* @__PURE__ */ e(c.Provider, { value: { shrinkable: o }, children: /* @__PURE__ */ i(
"div",
{
className: s(
"text-foreground [--headerHeight:72px] **:[box-sizing:border-box] lg:[--headerHeight:86px]",
o ? "[--asideWidth:86px] xl:[--asideWidth:240px]" : "[--asideWidth:240px]"
),
children: [
/* @__PURE__ */ i(
"header",
{
className: s(
"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(
m,
{
onClick: l.toggle,
"aria-label": `${l.isOpen ? "Close" : "Open"} menu`,
className: "ml-4 lg:hidden",
children: /* @__PURE__ */ e(z, {})
}
)
] })
]
}
),
/* @__PURE__ */ e(
"aside",
{
className: s(
"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: s(
"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: a })
]
}
) });
}, L = ({
href: t,
icon: r,
isActive: a,
label: d,
isHighlighted: n,
children: o
}) => {
const { shrinkable: l } = h(c), {
router: { Link: g }
} = v(), x = /* @__PURE__ */ e(p, { children: /* @__PURE__ */ i(
g,
{
href: t,
className: s(
"focus-ring relative flex items-center gap-3 rounded-lg p-2 font-medium no-underline transition",
a ? "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: s("grow", l && "lg:hidden xl:block"), children: d }),
o,
n && /* @__PURE__ */ e(
"i",
{
"aria-hidden": !0,
className: s(
"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(
y,
{
tooltip: d,
sideOffset: 8,
side: "right",
className: "hidden lg:block xl:hidden",
children: x
},
t
) : x;
}, P = ({ title: t, subTitle: r, icon: a }) => /* @__PURE__ */ i("div", { className: "flex items-center gap-2 lg:gap-4", children: [
a && /* @__PURE__ */ e(
"div",
{
className: "flex-center bg-muted rounded-lg p-2 [&_svg]:size-5 lg:[&_svg]:size-6",
"aria-hidden": !0,
children: a
}
),
/* @__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 })
] })
] }), A = ({ name: t, img: r, ...a }) => {
const { shrinkable: d } = h(c);
return /* @__PURE__ */ i(
m,
{
variant: "ghost",
className: s(
"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"
),
...a,
children: [
/* @__PURE__ */ e(N, { size: "sm", name: t, src: r }),
/* @__PURE__ */ e(
"span",
{
className: s("truncate text-sm", d && "lg:hidden xl:block"),
children: t
}
)
]
}
);
};
export {
I as D,
L as M,
P,
A as U
};