feat: sidebar redimensionnable — drag handle entre sidebar et contenu
- 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.
This commit is contained in:
19
memento-note/components/sidebar-resize-client.tsx
Normal file
19
memento-note/components/sidebar-resize-client.tsx
Normal file
@@ -0,0 +1,19 @@
|
||||
'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>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user