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,32 +351,38 @@ const Sidebar = ({
             />
           </button>
           {tenantMenuOpen ? (
-            <div className="menu" ref={tenantMenuRef} role="menu">
-              <div className="menu__list">
-                {tenants.length === 0 ? (
-                  <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';
-                    return (
-                      <button
-                        key={tenantId || tenantLabel}
-                        type="button"
-                        className={`menu__item${isActive ? ' active' : ''}`}
-                        onClick={() => handleTenantSelect(tenant)}
-                        role="menuitem"
-                      >
-                        <span className="menu__check-slot">
-                          {isActive ? <CheckIcon size={16} /> : null}
-                        </span>
-                        <span className="menu__label">{tenantLabel}</span>
-                      </button>
-                    );
-                  })
-                )}
-              </div>
+            <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.map((tenant) => {
+                      const tenantId = tenant?.id || null;
+                      const isActive = tenantId === activeTenantId;
+                      const tenantLabel = tenant?.name || tenant?.slug || tenantId || 'Tenant';
+                      return (
+                        <button
+                          key={tenantId || tenantLabel}
+                          type="button"
+                          className={`menu__item${isActive ? ' active' : ''}`}
+                          onClick={() => handleTenantSelect(tenant)}
+                          role="menuitem"
+                        >
+                          <span className="menu__check-slot">
+                            {isActive ? <CheckIcon size={16} /> : null}
+                          </span>
+                          <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;