From 1b79fc33a57fd2e50ba64b92c709559e277cc13f Mon Sep 17 00:00:00 2001
From: Melvin PETIT <melvin.petit31@gmail.com>
Date: Fri, 19 Jun 2026 14:43:41 +0200
Subject: [PATCH 1/4] feat(layout): float the sidebar over the main content

Pin the sidebar with fixed positioning and a shadow so it overlays the
main page instead of reserving a column in the flex row.
---
 src/components/layout/Sidebar.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/layout/Sidebar.tsx b/src/components/layout/Sidebar.tsx
index 3088ae3..62357fb 100644
--- a/src/components/layout/Sidebar.tsx
+++ b/src/components/layout/Sidebar.tsx
@@ -33,7 +33,7 @@ export function Sidebar({ companyName, userEmail, openAlerts }: SidebarProps) {
   const pathname = usePathname()
 
   return (
-    <aside className="flex h-screen w-60 shrink-0 flex-col border-r border-sidebar-border bg-sidebar">
+    <aside className="fixed inset-y-0 left-0 z-40 flex h-screen w-60 flex-col border-r border-sidebar-border bg-sidebar shadow-xl">
       <div className="flex h-12 items-center border-b border-sidebar-border px-4">
         <span className="text-sm font-semibold text-sidebar-foreground">DataShield</span>
       </div>

From 03aed3d7f7c40026aff838bb43dc1eafdfea0404 Mon Sep 17 00:00:00 2001
From: Melvin PETIT <melvin.petit31@gmail.com>
Date: Fri, 19 Jun 2026 14:46:51 +0200
Subject: [PATCH 2/4] feat(layout): toggle the floating sidebar open/closed

Add a sidebar context with open state, a close button in the sidebar
header, and an open button in the topbar (shown when collapsed). The
panel slides in/out via a transform. Wrap the dashboard in a client
DashboardShell that provides the state.
---
 src/app/(dashboard)/layout.tsx           | 21 ++++++---------
 src/components/layout/DashboardShell.tsx | 33 ++++++++++++++++++++++++
 src/components/layout/Sidebar.tsx        | 20 ++++++++++++--
 src/components/layout/SidebarContext.tsx | 28 ++++++++++++++++++++
 src/components/layout/Topbar.tsx         | 15 ++++++++++-
 5 files changed, 101 insertions(+), 16 deletions(-)
 create mode 100644 src/components/layout/DashboardShell.tsx
 create mode 100644 src/components/layout/SidebarContext.tsx

diff --git a/src/app/(dashboard)/layout.tsx b/src/app/(dashboard)/layout.tsx
index bc902f7..30c19a9 100644
--- a/src/app/(dashboard)/layout.tsx
+++ b/src/app/(dashboard)/layout.tsx
@@ -1,7 +1,6 @@
 import { auth } from "@/auth"
 import { redirect } from "next/navigation"
-import { Sidebar } from "@/components/layout/Sidebar"
-import { Topbar } from "@/components/layout/Topbar"
+import { DashboardShell } from "@/components/layout/DashboardShell"
 import { RoutePrefetcher } from "@/components/layout/RoutePrefetcher"
 import { Providers } from "@/components/providers"
 import { getOpenAlertCount } from "@/lib/alerts"
@@ -19,17 +18,13 @@ export default async function DashboardLayout({
   return (
     <Providers>
       <RoutePrefetcher />
-      <div className="flex h-screen overflow-hidden">
-        <Sidebar
-          companyName={session.user.name ?? ""}
-          userEmail={session.user.email ?? ""}
-          openAlerts={openAlerts}
-        />
-        <div className="flex flex-1 flex-col overflow-hidden">
-          <Topbar />
-          <main className="flex flex-1 flex-col min-h-0 overflow-hidden">{children}</main>
-        </div>
-      </div>
+      <DashboardShell
+        companyName={session.user.name ?? ""}
+        userEmail={session.user.email ?? ""}
+        openAlerts={openAlerts}
+      >
+        {children}
+      </DashboardShell>
     </Providers>
   )
 }
diff --git a/src/components/layout/DashboardShell.tsx b/src/components/layout/DashboardShell.tsx
new file mode 100644
index 0000000..48b5818
--- /dev/null
+++ b/src/components/layout/DashboardShell.tsx
@@ -0,0 +1,33 @@
+"use client"
+
+import type { ReactNode } from "react"
+import { Sidebar } from "./Sidebar"
+import { Topbar } from "./Topbar"
+import { SidebarProvider } from "./SidebarContext"
+
+interface DashboardShellProps {
+  companyName: string
+  userEmail: string
+  openAlerts: number
+  children: ReactNode
+}
+
+function Shell({ companyName, userEmail, openAlerts, children }: DashboardShellProps) {
+  return (
+    <div className="flex h-screen overflow-hidden">
+      <Sidebar companyName={companyName} userEmail={userEmail} openAlerts={openAlerts} />
+      <div className="flex flex-1 flex-col overflow-hidden">
+        <Topbar />
+        <main className="flex flex-1 flex-col min-h-0 overflow-hidden">{children}</main>
+      </div>
+    </div>
+  )
+}
+
+export function DashboardShell(props: DashboardShellProps) {
+  return (
+    <SidebarProvider>
+      <Shell {...props} />
+    </SidebarProvider>
+  )
+}
diff --git a/src/components/layout/Sidebar.tsx b/src/components/layout/Sidebar.tsx
index 62357fb..c1c58a8 100644
--- a/src/components/layout/Sidebar.tsx
+++ b/src/components/layout/Sidebar.tsx
@@ -4,6 +4,7 @@ import Link from "next/link"
 import { usePathname } from "next/navigation"
 import { signOut } from "next-auth/react"
 import { cn } from "@/lib/utils"
+import { useSidebar } from "./SidebarContext"
 import {
   LayoutDashboard,
   Users,
@@ -12,6 +13,7 @@ import {
   Database,
   KeyRound,
   LogOut,
+  PanelLeftClose,
 } from "lucide-react"
 
 const navItems = [
@@ -31,11 +33,25 @@ interface SidebarProps {
 
 export function Sidebar({ companyName, userEmail, openAlerts }: SidebarProps) {
   const pathname = usePathname()
+  const { open, toggle } = useSidebar()
 
   return (
-    <aside className="fixed inset-y-0 left-0 z-40 flex h-screen w-60 flex-col border-r border-sidebar-border bg-sidebar shadow-xl">
-      <div className="flex h-12 items-center border-b border-sidebar-border px-4">
+    <aside
+      className={cn(
+        "fixed inset-y-0 left-0 z-40 flex h-screen w-60 flex-col border-r border-sidebar-border bg-sidebar shadow-xl transition-transform duration-200 ease-out",
+        open ? "translate-x-0" : "-translate-x-full",
+      )}
+    >
+      <div className="flex h-12 items-center justify-between border-b border-sidebar-border px-4">
         <span className="text-sm font-semibold text-sidebar-foreground">DataShield</span>
+        <button
+          onClick={toggle}
+          className="-mr-1 rounded-md p-1 text-sidebar-foreground/60 transition-colors hover:bg-sidebar-accent/50 hover:text-sidebar-foreground"
+          title="Close sidebar"
+          aria-label="Close sidebar"
+        >
+          <PanelLeftClose className="size-4" />
+        </button>
       </div>
 
       <nav className="flex-1 space-y-0.5 overflow-y-auto px-2 py-3">
diff --git a/src/components/layout/SidebarContext.tsx b/src/components/layout/SidebarContext.tsx
new file mode 100644
index 0000000..ed305bd
--- /dev/null
+++ b/src/components/layout/SidebarContext.tsx
@@ -0,0 +1,28 @@
+"use client"
+
+import { createContext, useContext, useState, type ReactNode } from "react"
+
+type SidebarContextValue = {
+  open: boolean
+  toggle: () => void
+  close: () => void
+}
+
+const SidebarContext = createContext<SidebarContextValue | null>(null)
+
+export function SidebarProvider({ children }: { children: ReactNode }) {
+  const [open, setOpen] = useState(true)
+  return (
+    <SidebarContext.Provider
+      value={{ open, toggle: () => setOpen((o) => !o), close: () => setOpen(false) }}
+    >
+      {children}
+    </SidebarContext.Provider>
+  )
+}
+
+export function useSidebar() {
+  const ctx = useContext(SidebarContext)
+  if (!ctx) throw new Error("useSidebar must be used within SidebarProvider")
+  return ctx
+}
diff --git a/src/components/layout/Topbar.tsx b/src/components/layout/Topbar.tsx
index 5bb037c..73a1f6e 100644
--- a/src/components/layout/Topbar.tsx
+++ b/src/components/layout/Topbar.tsx
@@ -1,6 +1,8 @@
 "use client"
 
 import { usePathname } from "next/navigation"
+import { PanelLeft } from "lucide-react"
+import { useSidebar } from "./SidebarContext"
 
 const pageTitles: Record<string, string> = {
   "/dashboard": "Dashboard",
@@ -20,9 +22,20 @@ function getTitle(pathname: string): string {
 export function Topbar() {
   const pathname = usePathname()
   const title = getTitle(pathname)
+  const { open, toggle } = useSidebar()
 
   return (
-    <header className="flex h-12 shrink-0 items-center border-b border-border px-6">
+    <header className="flex h-12 shrink-0 items-center gap-3 border-b border-border px-6">
+      {!open && (
+        <button
+          onClick={toggle}
+          className="-ml-2 rounded-md p-1.5 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground"
+          title="Open sidebar"
+          aria-label="Open sidebar"
+        >
+          <PanelLeft className="size-4" />
+        </button>
+      )}
       <h1 className="text-sm font-medium text-foreground">{title}</h1>
     </header>
   )

From 9dea2af4cbdd76938791cc36be65bb42c2f3ffb3 Mon Sep 17 00:00:00 2001
From: Melvin PETIT <melvin.petit31@gmail.com>
Date: Fri, 19 Jun 2026 14:49:46 +0200
Subject: [PATCH 3/4] style(layout): use a faint violet sidebar shadow

---
 src/components/layout/Sidebar.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/layout/Sidebar.tsx b/src/components/layout/Sidebar.tsx
index c1c58a8..00092ea 100644
--- a/src/components/layout/Sidebar.tsx
+++ b/src/components/layout/Sidebar.tsx
@@ -38,7 +38,7 @@ export function Sidebar({ companyName, userEmail, openAlerts }: SidebarProps) {
   return (
     <aside
       className={cn(
-        "fixed inset-y-0 left-0 z-40 flex h-screen w-60 flex-col border-r border-sidebar-border bg-sidebar shadow-xl transition-transform duration-200 ease-out",
+        "fixed inset-y-0 left-0 z-40 flex h-screen w-60 flex-col border-r border-sidebar-border bg-sidebar shadow-[4px_0_24px_-6px_oklch(var(--primary)/0.18)] transition-transform duration-200 ease-out",
         open ? "translate-x-0" : "-translate-x-full",
       )}
     >

From 6bb2e9e8670897514bd21f5b8550735868192bfd Mon Sep 17 00:00:00 2001
From: Melvin PETIT <melvin.petit31@gmail.com>
Date: Fri, 19 Jun 2026 14:56:06 +0200
Subject: [PATCH 4/4] feat(layout): auto-close the floating sidebar when idle

Close the sidebar after 4s with no pointer over it; hovering pauses the
countdown and leaving restarts it.
---
 src/components/layout/Sidebar.tsx | 26 +++++++++++++++++++++++++-
 1 file changed, 25 insertions(+), 1 deletion(-)

diff --git a/src/components/layout/Sidebar.tsx b/src/components/layout/Sidebar.tsx
index 00092ea..445a380 100644
--- a/src/components/layout/Sidebar.tsx
+++ b/src/components/layout/Sidebar.tsx
@@ -3,8 +3,12 @@
 import Link from "next/link"
 import { usePathname } from "next/navigation"
 import { signOut } from "next-auth/react"
+import { useEffect, useRef } from "react"
 import { cn } from "@/lib/utils"
 import { useSidebar } from "./SidebarContext"
+
+// Auto-close the floating sidebar after this idle delay (no pointer over it).
+const AUTO_CLOSE_MS = 4000
 import {
   LayoutDashboard,
   Users,
@@ -33,10 +37,30 @@ interface SidebarProps {
 
 export function Sidebar({ companyName, userEmail, openAlerts }: SidebarProps) {
   const pathname = usePathname()
-  const { open, toggle } = useSidebar()
+  const { open, toggle, close } = useSidebar()
+  const timer = useRef<ReturnType<typeof setTimeout> | null>(null)
+
+  const clearTimer = () => {
+    if (timer.current) clearTimeout(timer.current)
+    timer.current = null
+  }
+  const startTimer = () => {
+    clearTimer()
+    timer.current = setTimeout(close, AUTO_CLOSE_MS)
+  }
+
+  // Start the idle countdown whenever the sidebar opens; hovering pauses it.
+  useEffect(() => {
+    if (open) startTimer()
+    else clearTimer()
+    return clearTimer
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [open])
 
   return (
     <aside
+      onMouseEnter={clearTimer}
+      onMouseLeave={startTimer}
       className={cn(
         "fixed inset-y-0 left-0 z-40 flex h-screen w-60 flex-col border-r border-sidebar-border bg-sidebar shadow-[4px_0_24px_-6px_oklch(var(--primary)/0.18)] transition-transform duration-200 ease-out",
         open ? "translate-x-0" : "-translate-x-full",