feat: sidebar redimensionnable — drag handle entre sidebar et contenu
Some checks failed
CI / Lint, Unit Tests & Build (push) Successful in 6m15s
CI / Deploy production (on server) (push) Failing after 1s

- 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:
Antigravity
2026-07-11 17:43:09 +00:00
parent f97c5e8ec4
commit ea326a10b4
3 changed files with 105 additions and 4 deletions

View File

@@ -7,6 +7,7 @@ import { detectUserLanguage, parseAcceptLanguage } from "@/lib/i18n/detect-user-
import { loadTranslations } from "@/lib/i18n/load-translations";
import { getAISettings } from "@/app/actions/ai-settings";
import { AIChatLayoutBridge } from "@/components/ai-chat-layout-bridge";
import { SidebarResizeClient } from "@/components/sidebar-resize-client";
export default async function MainLayout({
@@ -36,8 +37,8 @@ export default async function MainLayout({
initialAiProcessingConsent={aiSettings?.aiProcessingConsent === true}
>
{/* No top-bar header — sidebar-only navigation (architectural-grid design) */}
<div className="flex h-screen overflow-hidden bg-memento-desk dark:bg-background">
<Suspense fallback={<div className="hidden w-80 md:w-[26rem] 2xl:w-[30rem] shrink-0 md:block h-full self-stretch" />}>
<SidebarResizeClient>
<Suspense fallback={<div className="hidden w-80 shrink-0 md:block h-full self-stretch" />}>
<Sidebar user={session?.user} />
</Suspense>
@@ -47,9 +48,9 @@ export default async function MainLayout({
</a>
{children}
</main>
</SidebarResizeClient>
{showAIAssistant && <AIChatLayoutBridge />}
</div>
{showAIAssistant && <AIChatLayoutBridge />}
</ProvidersWrapper>
);
}