From 8673680a50815d744b904dcde5b7e03ae3cfec73 Mon Sep 17 00:00:00 2001
From: alejandrobailo <alejandrobailo94@gmail.com>
Date: Fri, 26 Jun 2026 14:12:03 +0200
Subject: [PATCH] feat(ui): restyle sidebar nav toggle and match scan button
 width

---
 ui/components/ui/sidebar/menu.tsx             |  4 ++--
 .../ui/sidebar/navigation-mode-toggle.tsx     | 19 +++++++++++--------
 2 files changed, 13 insertions(+), 10 deletions(-)

diff --git a/ui/components/ui/sidebar/menu.tsx b/ui/components/ui/sidebar/menu.tsx
index 3d548dfee3..ad40c889d0 100644
--- a/ui/components/ui/sidebar/menu.tsx
+++ b/ui/components/ui/sidebar/menu.tsx
@@ -92,7 +92,7 @@ export const Menu = ({ isOpen }: { isOpen: boolean }) => {
               <Button
                 type="button"
                 aria-label="Launch Scan"
-                className={cn(isOpen ? "h-14 w-[180px] p-1" : "w-14")}
+                className={cn(isOpen ? "h-14 w-full p-1" : "w-14")}
                 variant="default"
                 size="default"
                 onClick={openLaunchScanModal}
@@ -102,7 +102,7 @@ export const Menu = ({ isOpen }: { isOpen: boolean }) => {
             ) : (
               <Button
                 asChild
-                className={cn(isOpen ? "h-14 w-[180px] p-1" : "w-14")}
+                className={cn(isOpen ? "h-14 w-full p-1" : "w-14")}
                 variant="default"
                 size="default"
               >
diff --git a/ui/components/ui/sidebar/navigation-mode-toggle.tsx b/ui/components/ui/sidebar/navigation-mode-toggle.tsx
index 3da4247029..8983abdb0d 100644
--- a/ui/components/ui/sidebar/navigation-mode-toggle.tsx
+++ b/ui/components/ui/sidebar/navigation-mode-toggle.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { LayoutDashboard } from "lucide-react";
+import { Home } from "lucide-react";
 import { useRouter } from "next/navigation";
 
 import { LighthouseIcon } from "@/components/icons/Icons";
@@ -29,7 +29,7 @@ export function SidebarNavigationModeToggle({
     {
       value: SIDEBAR_NAVIGATION_MODE.BROWSE,
       label: "Home",
-      icon: LayoutDashboard,
+      icon: Home,
     },
     {
       value: SIDEBAR_NAVIGATION_MODE.CHAT,
@@ -46,10 +46,10 @@ export function SidebarNavigationModeToggle({
   };
 
   return (
-    <div className={cn("mt-3 shrink-0 px-2", !isOpen && "flex justify-center")}>
+    <div className={cn("mt-4 shrink-0 px-2", !isOpen && "flex justify-center")}>
       <div
         className={cn(
-          "border-border-neutral-secondary bg-bg-neutral-secondary flex rounded-[8px] border p-1",
+          "border-border-input-primary bg-bg-input-primary dark:bg-input/30 flex gap-1 rounded-lg border p-1",
           isOpen ? "w-full" : "flex-col",
         )}
       >
@@ -62,11 +62,14 @@ export function SidebarNavigationModeToggle({
               type="button"
               aria-label={mode.label}
               className={cn(
-                "flex h-8 items-center justify-center rounded-[6px] px-2 text-sm transition-colors",
-                isOpen ? "min-w-0 flex-1 gap-2" : "w-8",
+                "flex h-8 items-center justify-center rounded-[6px] border px-2 text-sm transition-all duration-200 ease-out",
+                isOpen ? "min-w-0 gap-2" : "w-8",
+                // The active segment grows (~55%) and gains a bordered, shadowed
+                // "thumb"; the inactive one shrinks (~45%) and stays flat.
                 active
-                  ? "bg-bg-neutral-tertiary text-text-neutral-primary"
-                  : "text-text-neutral-secondary hover:text-text-neutral-primary",
+                  ? "border-border-input-primary bg-bg-neutral-primary text-text-neutral-primary shadow-md"
+                  : "text-text-neutral-secondary hover:text-text-neutral-primary border-transparent",
+                isOpen && (active ? "flex-[11]" : "flex-[9]"),
               )}
               onClick={() => handleModeChange(mode.value)}
             >