menu

frontend/src/sidebar/Sidebar.jsx

@@ -228,6 +228,7 @@ const Sidebar = ({
   const tenantButtonRef = useRef(null);
   const tenantMenuRef = useRef(null);
   const [tenantMenuOpen, setTenantMenuOpen] = useState(false);
+  const showTenantList = tenants.length > 1;
 
   const toggleTenantMenu = useCallback(() => {
     const next = !tenantMenuOpen;
@@ -350,12 +351,17 @@ const Sidebar = ({
             />
           </button>
           {tenantMenuOpen ? (
-            <div className="menu" ref={tenantMenuRef} role="menu">
+            <div
+              className={`menu${showTenantList ? '' : ' menu--simple'}`}
+              ref={tenantMenuRef}
+              role="menu"
+              aria-label="Account menu"
+            >
+              {showTenantList ? (
+                <>
+                  <div className="menu__heading">Switch tenant</div>
                   <div className="menu__list">
-                {tenants.length === 0 ? (
+                    {tenants.map((tenant) => {
-                  <span className="menu__empty">No tenants available.</span>
-                ) : (
-                  tenants.map((tenant) => {
                       const tenantId = tenant?.id || null;
                       const isActive = tenantId === activeTenantId;
                       const tenantLabel = tenant?.name || tenant?.slug || tenantId || 'Tenant';
@@ -373,9 +379,10 @@ const Sidebar = ({
                           <span className="menu__label">{tenantLabel}</span>
                         </button>
                       );
-                  })
+                    })}
-                )}
                   </div>
+                </>
+              ) : null}
               <div className="menu__footer">
                 <button
                   type="button"

frontend/src/styles.css

@@ -1297,6 +1297,13 @@ button.danger:hover:not([disabled]) {
   gap: 0.15rem;
 }
 
+.menu__heading {
+  padding: 0.5rem 1rem 0.25rem;
+  font-size: 0.82rem;
+  font-weight: 600;
+  color: var(--muted);
+}
+
 .menu button.menu__item,
 .menu .menu__item {
   display: flex;
@@ -1368,6 +1375,10 @@ button.danger:hover:not([disabled]) {
   gap: 0.25rem;
 }
 
+.menu--simple .menu__footer {
+  border-top: none;
+}
+
 .menu__settings {
   width: 100%;
   display: inline-flex;