ea326a10b4
- sidebar-resize.tsx: hook useSidebarResize (localStorage persistence, 280-560px) - sidebar-resize-client.tsx: wrapper layout qui applique la largeur - layout.tsx: remplace div statique par SidebarResizeClient - Resize handle: barre 1px→3px au hover, brand-accent pendant drag - pointer events (pas mouse) pour support tactile - cursor: col-resize + userSelect:none pendant le drag L'utilisateur peut maintenant réduire ou élargir la zone de carnet en glissant la barre entre le sidebar et le contenu principal.
20 lines
689 B
TypeScript
20 lines
689 B
TypeScript
'use client'
|
|
|
|
import { type ReactNode } from 'react'
|
|
import { useSidebarResize, SidebarResizeHandle } from '@/components/sidebar-resize'
|
|
|
|
export function SidebarResizeClient({ children }: { children: ReactNode }) {
|
|
const { width, isDragging, onPointerDown } = useSidebarResize()
|
|
|
|
return (
|
|
<div className="flex h-screen overflow-hidden bg-memento-desk dark:bg-background">
|
|
<div className="contents" style={{ ['--sidebar-width' as string]: `${width}px` }}>
|
|
<div className="flex h-full" style={{ width: `${width}px` }}>
|
|
{children}
|
|
</div>
|
|
</div>
|
|
<SidebarResizeHandle onPointerDown={onPointerDown} isDragging={isDragging} />
|
|
</div>
|
|
)
|
|
}
|