Add foldable split-pane layout
This commit is contained in:
@@ -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"
|
||||
>
|
||||
|
||||
Reference in New Issue
Block a user