From 6f0e150a06505dfb9bd989f149810f511d3c9d9b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aur=C3=A9lien=20Sibiril?=
 <81782+aureliensibiril@users.noreply.github.com>
Date: Thu, 16 Apr 2026 12:27:29 +0200
Subject: [PATCH] Refactor sidebar with sticky collapse button
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The absolute-positioned collapse button overlapped the nav items
whenever the sidebar content exceeded the viewport. With the page now
scrolling at the document level, the overlap became permanent.

Restructure the aside as a flex column: nav list in a flex-1 region,
collapse button in a sticky bottom-0 container with a border-t
separator. The button pins to the viewport bottom while scrolling and
never overlaps the items above.

Signed-off-by: Aurélien Sibiril <81782+aureliensibiril@users.noreply.github.com>
---
 packages/ui/src/Atoms/Sidebar/Sidebar.tsx | 31 ++++++++++++++++-------
 1 file changed, 22 insertions(+), 9 deletions(-)

diff --git a/packages/ui/src/Atoms/Sidebar/Sidebar.tsx b/packages/ui/src/Atoms/Sidebar/Sidebar.tsx
index d23f22e02..57c1217db 100644
--- a/packages/ui/src/Atoms/Sidebar/Sidebar.tsx
+++ b/packages/ui/src/Atoms/Sidebar/Sidebar.tsx
@@ -46,17 +46,30 @@ export function Sidebar({ children }: PropsWithChildren) {
     <sidebarContext.Provider value={{ open }}>
       <aside
         className={clsx(
-          "border-r border-border-solid relative pt-16 flex-none",
-          open ? "px-4 w-[280px]" : "px-2",
+          "border-r border-border-solid pt-16 flex-none flex flex-col",
+          open && "w-[280px]",
         )}
       >
-        {children}
-        <Button
-          variant="tertiary"
-          icon={open ? IconCollapse : IconExpand}
-          onClick={() => setOpen(!open)}
-          className="absolute bottom-4 left-4"
-        />
+        <div
+          className={clsx(
+            "flex-1 pb-2",
+            open ? "px-4" : "px-2",
+          )}
+        >
+          {children}
+        </div>
+        <div
+          className={clsx(
+            "sticky bottom-0 flex-none border-t border-border-solid bg-level-0 py-2",
+            open ? "px-4" : "px-2",
+          )}
+        >
+          <Button
+            variant="tertiary"
+            icon={open ? IconCollapse : IconExpand}
+            onClick={() => setOpen(!open)}
+          />
+        </div>
       </aside>
     </sidebarContext.Provider>
   );