@stanfordspezi/spezi-web-design-system
Version:
Stanford Biodesign Digital Health Spezi Web Design System
2 lines (1 loc) • 3.73 kB
JavaScript
"use strict";const e=require("react/jsx-runtime"),l=require("./index-DwV9MiDB.js"),u=require("./Button-CoJ-cT_W.js"),o=require("react"),g=require("./useOpenState-E2H2jSZj.js"),m=require("./menu-oII1WXJR.js"),p=require("./SpeziProvider.cjs"),f=require("./Tooltip-C5HSImRj.js"),b=require("./Avatar-DKv0AvhS.js"),c=o.createContext({shrinkable:!0}),v=({title:t,actions:s,children:a,aside:i,mobile:d,shrinkable:n=!0})=>{const r=g.useOpenState();return e.jsx(c.Provider,{value:{shrinkable:n},children:e.jsxs("div",{"data-slot":"dashboard-layout",className:l.cn("text-foreground [--headerHeight:72px] **:[box-sizing:border-box] lg:[--headerHeight:86px]",n?"[--asideWidth:86px] xl:[--asideWidth:240px]":"[--asideWidth:240px]"),children:[e.jsxs("header",{className:l.cn("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&&!s&&"lg:hidden"),children:[t,e.jsxs("div",{className:"ml-auto gap-4",children:[s,e.jsx(u.Button,{onClick:r.toggle,"aria-label":`${r.isOpen?"Close":"Open"} menu`,className:"ml-4 lg:hidden",children:e.jsx(m.default,{})})]})]}),e.jsx("aside",{className:l.cn("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",n?"xl:px-3":"lg:px-3"),children:i}),e.jsxs("nav",{className:l.cn("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",r.isOpen?"z-10 translate-x-0":"pointer-events-none -translate-x-24 opacity-0"),hidden:!r.isOpen,"data-testid":"mobileMenu",children:[s&&e.jsx("div",{className:"p-4",children:s}),d]}),e.jsx("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})]})})},j=({href:t,icon:s,isActive:a,label:i,isHighlighted:d,children:n})=>{const{shrinkable:r}=o.useContext(c),{router:{Link:h}}=p.useSpeziContext(),x=e.jsx(e.Fragment,{children:e.jsxs(h,{href:t,"data-slot":"menu-item",className:l.cn("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",r?"xl:w-full xl:self-start":"lg:w-full lg:self-start"),children:[s,e.jsx("span",{className:l.cn("grow",r&&"lg:hidden xl:block"),children:i}),n,d&&e.jsx("i",{"aria-hidden":!0,className:l.cn("bg-destructive size-2.5 rounded-full",r&&"lg:absolute lg:top-1 lg:right-1 lg:size-1.5 xl:static xl:size-2.5")})]})});return r?e.jsx(f.Tooltip,{tooltip:i,sideOffset:8,side:"right",className:"hidden lg:block xl:hidden",children:x},t):x},N=({title:t,subTitle:s,icon:a})=>e.jsxs("div",{"data-slot":"page-title",className:"flex items-center gap-2 lg:gap-4",children:[a&&e.jsx("div",{className:"flex-center bg-muted rounded-lg p-2 [&_svg]:size-5 lg:[&_svg]:size-6","aria-hidden":!0,children:a}),e.jsxs("div",{className:"flex flex-col",children:[t&&e.jsx("h1",{className:"font-medium lg:text-xl",children:t}),s&&e.jsx("h2",{className:"text-xs lg:text-sm",children:s})]})]}),y=({name:t,img:s,...a})=>{const{shrinkable:i}=o.useContext(c);return e.jsxs(u.Button,{"data-slot":"user-menu-item",variant:"ghost",className:l.cn("mt-auto mb-2 p-2! transition",i?"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:[e.jsx(b.Avatar,{size:"sm",name:t,src:s}),e.jsx("span",{className:l.cn("truncate text-sm",i&&"lg:hidden xl:block"),children:t})]})};exports.DashboardLayout=v;exports.MenuItem=j;exports.PageTitle=N;exports.UserMenuItem=y;