Add foldable split-pane layout

This commit is contained in:
2026-08-06 23:28:42 -07:00
parent b540f01759
commit 1ef491f39a
2 changed files with 44 additions and 5 deletions

View File

@@ -3246,11 +3246,11 @@ export default function App() {
return (
<div className="app-grid-surface app-safe-frame h-full">
<div className="flex h-full w-full overflow-hidden bg-transparent md:gap-2">
<div className="workspace-shell flex h-full w-full overflow-hidden bg-transparent md:gap-2">
{isMobileSidebarOpen ? (
<button
type="button"
className="fixed inset-0 z-30 bg-black/70 backdrop-blur-sm md:hidden"
className="workspace-sidebar-backdrop fixed inset-0 z-30 bg-black/70 backdrop-blur-sm md:hidden"
onClick={() => setIsMobileSidebarOpen(false)}
aria-label="Close sidebar"
/>
@@ -3258,7 +3258,7 @@ export default function App() {
<aside
className={cn(
"glass-panel fixed inset-y-0 left-0 z-40 flex w-[86vw] max-w-80 shrink-0 flex-col border-r border-violet-300/18 transition-transform md:static md:z-auto md:w-80 md:max-w-none md:rounded-2xl md:border",
"workspace-sidebar glass-panel fixed inset-y-0 left-0 z-40 flex w-[86vw] max-w-80 shrink-0 flex-col border-r border-violet-300/18 transition-transform md:static md:z-auto md:w-80 md:max-w-none md:rounded-2xl md:border",
isMobileSidebarOpen ? "translate-x-0" : "-translate-x-full md:translate-x-0"
)}
>
@@ -3401,7 +3401,7 @@ export default function App() {
</aside>
<main
className="glass-panel relative flex min-w-0 flex-1 touch-pan-y flex-col overflow-hidden border-violet-300/18 md:touch-auto md:rounded-2xl md:border"
className="workspace-content glass-panel relative flex min-w-0 flex-1 touch-pan-y flex-col overflow-hidden border-violet-300/18 md:touch-auto md:rounded-2xl md:border"
onTouchStart={handleMobileWorkspaceTouchStart}
onTouchMove={handleMobileWorkspaceTouchMove}
onTouchEnd={handleMobileWorkspaceTouchEnd}
@@ -3413,7 +3413,7 @@ export default function App() {
type="button"
size="icon"
variant="ghost"
className="-ml-1 h-8 w-8 md:hidden"
className="workspace-sidebar-trigger -ml-1 h-8 w-8 md:hidden"
onClick={() => setIsMobileSidebarOpen(true)}
aria-label="Open sidebar"
>