From 3e67af5646aaa758a79dd271dc6cb2188b5de177 Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Thu, 19 Mar 2026 00:23:08 +0100
Subject: [PATCH] fix: sidebar dropdown clipping, settings placement, and theme
 removal

- Add relative z-10 to sidebar aside to fix dropdowns (AppSwitcher,
  Notifications, UserMenu) rendering behind content area due to
  backdrop-blur-xl creating a stacking context
- Move Site Settings from bottom utility section into Infrastructure
  nav group where it logically belongs
- Remove ThemeToggle from sidebar (available in user settings)
- Rename Settings to Site Settings for clarity
---
 components/dashboard/Sidebar.tsx | 16 ++++++----------
 1 file changed, 6 insertions(+), 10 deletions(-)

diff --git a/components/dashboard/Sidebar.tsx b/components/dashboard/Sidebar.tsx
index fb74190..7178ade 100644
--- a/components/dashboard/Sidebar.tsx
+++ b/components/dashboard/Sidebar.tsx
@@ -24,7 +24,6 @@ import {
   ChevronUpDownIcon,
   PlusIcon,
   XIcon,
-  ThemeToggle,
   AppLauncher,
   UserMenu,
   type CipheraApp,
@@ -94,7 +93,7 @@ const NAV_GROUPS: NavGroup[] = [
 ]
 
 const SETTINGS_ITEM: NavItem = {
-  label: 'Settings', href: (id) => `/sites/${id}/settings`, icon: SettingsIcon, matchPrefix: true,
+  label: 'Site Settings', href: (id) => `/sites/${id}/settings`, icon: SettingsIcon, matchPrefix: true,
 }
 
 // Label that fades with the sidebar — always in the DOM, never removed
@@ -379,6 +378,9 @@ export default function Sidebar({
                 {group.items.map((item) => (
                   <NavLink key={item.label} item={item} siteId={siteId} collapsed={c} onClick={isMobile ? onMobileClose : undefined} pendingHref={pendingHref} onNavigate={handleNavigate} />
                 ))}
+                {group.label === 'Infrastructure' && canEdit && (
+                  <NavLink item={SETTINGS_ITEM} siteId={siteId} collapsed={c} onClick={isMobile ? onMobileClose : undefined} pendingHref={pendingHref} onNavigate={handleNavigate} />
+                )}
               </div>
             </div>
           ))}
@@ -386,11 +388,8 @@ export default function Sidebar({
 
         {/* Bottom — utility items */}
         <div className="border-t border-neutral-200/60 dark:border-neutral-800/60 px-2 py-3 shrink-0">
-          {/* Theme, Notifications, Profile — same layout as nav items */}
+          {/* Notifications, Profile — same layout as nav items */}
           <div className="space-y-0.5 mb-1">
-            <ThemeToggle variant="sidebar">
-              <Label collapsed={c}>Theme</Label>
-            </ThemeToggle>
             <NotificationCenter anchor="right" variant="sidebar">
               <Label collapsed={c}>Notifications</Label>
             </NotificationCenter>
@@ -412,9 +411,6 @@ export default function Sidebar({
 
           {/* Settings + Collapse */}
           <div className="space-y-0.5">
-            {canEdit && (
-              <NavLink item={SETTINGS_ITEM} siteId={siteId} collapsed={c} onClick={isMobile ? onMobileClose : undefined} pendingHref={pendingHref} onNavigate={handleNavigate} />
-            )}
             {!isMobile && (
               <button
                 onClick={toggle}
@@ -437,7 +433,7 @@ export default function Sidebar({
     <>
       {/* Desktop — ssr:false means this only renders on client, no hydration flash */}
       <aside
-        className="hidden md:flex flex-col shrink-0 border-r border-neutral-200/60 dark:border-neutral-800/60 bg-white/90 dark:bg-neutral-900/90 backdrop-blur-xl overflow-hidden"
+        className="hidden md:flex flex-col shrink-0 border-r border-neutral-200/60 dark:border-neutral-800/60 bg-white/90 dark:bg-neutral-900/90 backdrop-blur-xl overflow-hidden relative z-10"
         style={{ width: collapsed ? COLLAPSED : EXPANDED, transition: 'width 200ms cubic-bezier(0.4, 0, 0.2, 1)' }}
       >
         {sidebarContent(false)}