Organization menu

The organization at the top of AppShell’s sidebar: its logo and name, opening a menu with its whole name, the app’s items and Switch organization. On the rail only the logo shows; while it loads, a placeholder holds its place.

Language

Appearance

import { GearSixIcon } from '@phosphor-icons/react';
import { MenuItem, OrganizationMenu } from '@arbol-ai/ui';

const LOGO =
  "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect width='32' height='32' rx='6' fill='%230d8273'/%3E%3Cpath d='M16 7v18M7 16h18' stroke='white' stroke-width='5'/%3E%3C/svg%3E";

<div className="rounded-card w-[250px] border px-4 py-4">
  <OrganizationMenu logo={LOGO} name="Clínica Norte" onSwitch={() => undefined}>
    <MenuItem href="#/organization-menu" icon={<GearSixIcon />}>
      Settings
    </MenuItem>
  </OrganizationMenu>
</div>

Without a logo, on the rail

A building stands in for the logo; the rail shows the button alone and opens the menu beside it.

import { OrganizationMenu } from '@arbol-ai/ui';

<div className="rounded-card flex w-[60px] justify-center border px-2 py-4">
  <OrganizationMenu isCollapsed name="Óptica Sur" onSwitch={() => undefined} />
</div>

Loading

import { OrganizationMenu } from '@arbol-ai/ui';

<div className="rounded-card w-[250px] border px-4 py-4">
  <OrganizationMenu isLoading name="Organization" onSwitch={() => undefined} />
</div>

Source

The examples above are src/blocks/organization-menu/organization-menu.examples.tsx, which the library’s tests render too.