pnpm dlx shadcn@latest add @whereui/page-shell

import { PageShell } from "@/components/ui/page-shell"<PageShell sidebar={<nav>…</nav>} header={<div>…</div>}>  เนื้อหาหน้า</PageShell>

import * as React from "react"import { cn } from "cn"// โครงแอป: จอกว้างมี sidebar ซ้ายพื้นเข้ม + แถบบน · มือถือมีแถบบน + bottom-nav// ความสูงเต็มจอแล้วให้ main เลื่อนภายใน — จำกัดความสูงตอนฝังในเอกสารด้วย className เช่น "h-96"function PageShell({  className,  sidebar,  header,  bottomNav,  children,  ...props}: React.ComponentProps<"div"> & {  /** เนื้อหา sidebar จอกว้าง (ซ่อนอัตโนมัติบนมือถือ) */  sidebar?: React.ReactNode  /** เนื้อหาแถบบน */  header?: React.ReactNode  /** โดยทั่วไปคือ <BottomNav> สำหรับมือถือ */  bottomNav?: React.ReactNode}) {  return (    <div      data-slot="page-shell"      className={cn("flex h-dvh w-full overflow-hidden bg-background", className)}      {...props}    >      {sidebar ? (        <aside          data-slot="page-shell-sidebar"          className="hidden w-60 shrink-0 flex-col overflow-y-auto border-r border-sidebar-border bg-sidebar text-sidebar-foreground md:flex"        >          {sidebar}        </aside>      ) : null}      <div        data-slot="page-shell-body"        className="flex min-w-0 flex-1 flex-col"      >        {header ? (          <header            data-slot="page-shell-header"            className="shrink-0 border-b bg-card"          >            {header}          </header>        ) : null}        <main          data-slot="page-shell-main"          className={cn(            "min-h-0 flex-1 overflow-y-auto px-4 py-6 sm:px-6",            bottomNav ? "pb-28 md:pb-6" : null          )}        >          {children}        </main>      </div>      {bottomNav}    </div>  )}export { PageShell }