menu
This commit is contained in:
@@ -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"
|
||||
|
||||
Reference in New Issue
Block a user