# UserMenu

> Avatar menu at the bottom of the sidebar - identity, your account items, theme and language submenus, and sign out.

Source: https://docs.nasaqui.com/components/user-menu

## Install

```bash
npx shadcn@latest add https://docs.nasaqui.com/r/user-menu.json
```

The current user's menu, placed in `SidebarFooter`. The trigger shows avatar, name and email (avatar only
on the collapsed rail). The menu shows the identity, then **your** items (Account, Billing…), then Theme
and Language submenus, then Sign out. Nasaq supplies the frame and preferences; the product supplies the items.

## When to use

- The bottom of an [`AppShell`](https://docs.nasaqui.com/components/app-shell) sidebar, or (`variant="avatar"`) the end of the header in a top-navigation app.
- You want theme and language switching next to account actions without a separate settings screen.

## When not to use

- Switching organisations: use [`WorkspaceSwitcher`](https://docs.nasaqui.com/components/workspace-switcher).
- A theme or language control on its own (login page, header): use [`ThemeSwitcher` / `LocaleSwitcher`](https://docs.nasaqui.com/components/switchers).
- Showing a user inline (comments, tables): use `Avatar`.

## Import

```tsx
import { UserMenu, type UserMenuUser } from "@fadymondy/nasaq/web";
// inside this monorepo: "@nasaq/web"
```

## Quick start

```tsx
import { DropdownMenuItem, SidebarFooter, UserMenu } from "@fadymondy/nasaq/web";
import { CreditCard, UserRound } from "lucide-react";

export function Footer() {
  return (
    <SidebarFooter>
      <UserMenu user={{ name: "Fady Mondy", email: "hello@example.com" }} onSignOut={() => console.log("sign out")}>
        <DropdownMenuItem>
          <UserRound />
          Account
        </DropdownMenuItem>
        <DropdownMenuItem>
          <CreditCard />
          Billing
        </DropdownMenuItem>
      </UserMenu>
    </SidebarFooter>
  );
}
```

## Anatomy

```
UserMenu
├─ trigger                     data-slot="user-menu"  (data-popup-open)
│  ├─ Avatar                   name, optional image
│  ├─ name + email             hidden on the rail; email wrapped in <bdi dir="ltr">
│  └─ chevrons-up-down         hidden on the rail
└─ menu
   ├─ identity header          avatar, name, email
   ├─ children group           your DropdownMenuItems
   ├─ Theme submenu            ThemeMenuItems (Light / Dark / System)      when preferences
   ├─ Language submenu         LocaleMenuItems, only with 2+ locales       when preferences
   └─ Sign out                 only with onSignOut
```

## API

### `UserMenuUser`

| Field | Type | Description |
| --- | --- | --- |
| `name` | `string` | Display name. Also drives the avatar initials. |
| `email` | `string` | Shown under the name, isolated as LTR. |
| `avatar?` | `string` | Image URL. |

### `UserMenu`

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `user` | `UserMenuUser` | required | The signed-in user. |
| `children?` | `ReactNode` | none | Product items (`DropdownMenuItem`s) above the preferences. |
| `preferences?` | `boolean` | `true` | Adds the Theme and Language submenus. Language shows only when the provider has more than one locale. |
| `profile?` | `PersonProfile` | none | Turns the menu header into a profile card (role, presence, local time, team) and the trigger avatar into one with a presence dot. |
| `onViewProfile?` | `(person) => void` | none | Adds View profile to that card. |
| `onSignOut?` | `() => void` | none | Adds a "Sign out" item. Without it there is no sign-out item and no trailing separator. |
| `variant?` | `"sidebar" \| "avatar"` | `"sidebar"` | `"sidebar"`: a full-width row with name and email at the foot of the sidebar. `"avatar"`: only the round avatar, for the header of a top-navigation app; the menu opens below it. |
| `className?` | `string` | none | Classes for the trigger. |
| `labels?` | `{ theme?: string; language?: string; signOut?: string }` | EN/AR built in | Theme ("Theme"/"المظهر"), Language ("Language"/"اللغة"), Sign out ("Sign out"/"تسجيل الخروج"). |

It needs `NasaqProvider` (theme, locale, locales) and reads the rail state from `AppShell`.

## Examples

### Product items including "Customize sidebar"

```tsx
import { DropdownMenuItem, UserMenu } from "@fadymondy/nasaq/web";
import { Bell, Settings, SlidersHorizontal } from "lucide-react";

export const Menu = ({ onCustomize }: { onCustomize: () => void }) => (
  <UserMenu user={{ name: "Fady Mondy", email: "hello@example.com", avatar: "/me.png" }} onSignOut={() => {}}>
    <DropdownMenuItem><Bell />Notifications</DropdownMenuItem>
    <DropdownMenuItem onClick={onCustomize}><SlidersHorizontal />Customize sidebar</DropdownMenuItem>
    <DropdownMenuItem><Settings />Settings</DropdownMenuItem>
  </UserMenu>
);
```

### Arabic labels, no preferences

```tsx
import { UserMenu } from "@fadymondy/nasaq/web";

export const Ar = () => (
  <UserMenu
    user={{ name: "فادي مندي", email: "hello@example.com" }}
    preferences={false}
    onSignOut={() => {}}
    labels={{ signOut: "تسجيل الخروج" }}
  />
);
```

## Accessibility

| Key | Action |
| --- | --- |
| `Enter` / `Space` / `↓` on trigger | Opens the menu. |
| `↑` `↓` / `Home` `End` | Move through items. |
| `→` (LTR) / `←` (RTL) on a submenu row | Opens Theme or Language. `←`/`→` reverse to close. |
| `Enter` / `Space` | Activates the item (radio items for theme and language are single choice). |
| `Esc` | Closes the menu (or submenu) and returns focus. |

- Trigger: menu button; on the rail `aria-label` is the user's name.
- Theme and language options are radio items, so the current choice is exposed to assistive tech.
- **Localise:** `labels` and your own item text.

## RTL & i18n

- The email is wrapped in `<bdi dir="ltr">` so it stays readable in Arabic, while the line stays aligned to the reading start.
- On the rail the menu opens to the inline end and aligns to the end; expanded it opens upward (`top`).
- The language list shows each language in its own script with `lang`/`dir` set.
- Built-in labels switch on the provider locale.

## Styling & tokens

- Same trigger treatment as the workspace switcher: `border-border`, hover `bg-nq-hover`, open `bg-nq-selected`, focus `nq-focus`.
- Target `[data-slot=user-menu]`. Extend the trigger with `className`.

## Do / Don't

- **Do** keep Settings in this menu instead of the sidebar footer. Support, docs and `SidebarStatus` may sit above the trigger.
- **Do** use `variant="avatar"` at the end of `AppHeader` when the app has no sidebar.
- **Do** pass `onSignOut` when the product has sessions; without it the menu simply ends after the preferences.
- **Don't** put navigation to core pages here; those are sidebar items.
- **Don't** hard-code the theme list; use the built-in submenu.

## Related

- [app-shell](https://docs.nasaqui.com/components/app-shell) · [workspace-switcher](https://docs.nasaqui.com/components/workspace-switcher)
- [switchers](https://docs.nasaqui.com/components/switchers) · [sidebar-layout](https://docs.nasaqui.com/components/sidebar-layout)

## Lab

https://docs.nasaqui.com/?path=/docs/components-navigation-user-menu--docs

## Code

### React

```tsx
import { DropdownMenuItem, SidebarFooter, UserMenu } from "@fadymondy/nasaq/web";
import { CreditCard, UserRound } from "lucide-react";

export function Footer() {
  return (
    <SidebarFooter>
      <UserMenu user={{ name: "Fady Mondy", email: "hello@example.com" }} onSignOut={() => console.log("sign out")}>
        <DropdownMenuItem>
          <UserRound />
          Account
        </DropdownMenuItem>
        <DropdownMenuItem>
          <CreditCard />
          Billing
        </DropdownMenuItem>
      </UserMenu>
    </SidebarFooter>
  );
}
```

### shadcn

```tsx
import { DropdownMenuItem } from "@/components/ui/dropdown-menu";
import { SidebarFooter } from "@/components/ui/app-shell";
import { UserMenu } from "@/components/ui/user-menu";
import { CreditCard, UserRound } from "lucide-react";

export function Footer() {
  return (
    <SidebarFooter>
      <UserMenu user={{ name: "Fady Mondy", email: "hello@example.com" }} onSignOut={() => console.log("sign out")}>
        <DropdownMenuItem>
          <UserRound />
          Account
        </DropdownMenuItem>
        <DropdownMenuItem>
          <CreditCard />
          Billing
        </DropdownMenuItem>
      </UserMenu>
    </SidebarFooter>
  );
}
```

### Vue

```vue
<script setup lang="ts">
import { CreditCard, UserRound } from "lucide-vue-next";
import { NqDropdownMenuItem, NqSidebar, NqSidebarFooter, NqUserMenu } from "@fadymondy/nasaq/vue";
</script>

<template>
  <NqSidebar>
    <NqSidebarFooter>
      <NqUserMenu :user="{ name: 'Fady Mondy', email: 'hello@example.com' }" @sign-out="() => console.log('sign out')">
        <NqDropdownMenuItem>
          <UserRound />
          Account
        </NqDropdownMenuItem>
        <NqDropdownMenuItem>
          <CreditCard />
          Billing
        </NqDropdownMenuItem>
      </NqUserMenu>
    </NqSidebarFooter>
  </NqSidebar>
</template>
```

### Blade

```blade
<div class="w-64">
    <x-nq::user-menu :user="['name' => 'Fady Mondy', 'email' => 'hello@example.com']" sign-out>
        <x-nq::dropdown-menu.item><x-lucide-user-round /> Account</x-nq::dropdown-menu.item>
        <x-nq::dropdown-menu.item><x-lucide-credit-card /> Billing</x-nq::dropdown-menu.item>
    </x-nq::user-menu>
</div>
```

### HTML + Alpine

```html
<div class="w-64">
    <div data-slot="user-menu-root" x-data="nqThemePref()" class="contents">
<div x-data="nqLocalePref(JSON.parse('{\u0022en\u0022:\u0022English\u0022,\u0022ar\u0022:\u0022\\u0627\\u0644\\u0639\\u0631\\u0628\\u064a\\u0629\u0022}'))" class="contents">
<div data-slot="dropdown-menu" x-data="nqDropdownMenu(false)" x-modelable="open" class="contents"><button type="button" data-slot="user-menu" x-bind="trigger" x-ref="trigger"
         x-bind:aria-label="typeof rail !== 'undefined' && rail && collapsed ? 'Fady Mondy' : null"         class="flex w-full items-center gap-2 rounded-control px-1.5 outline-none transition-colors duration-150 ease-nq hover:bg-nq-hover data-popup-open:bg-nq-selected focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-nq-focus min-h-[calc(var(--spacing-nav-row)+12px)] border border-border bg-background/60 py-1 shadow-xs hover:border-nq-line-strong group-data-collapsed/sidebar:size-control group-data-collapsed/sidebar:justify-center group-data-collapsed/sidebar:px-0 group-data-collapsed/sidebar:border-0 group-data-collapsed/sidebar:bg-transparent group-data-collapsed/sidebar:shadow-none">
                    <span data-slot="avatar" x-data="nqAvatar(0)"
    class="inline-flex shrink-0 select-none items-center justify-center overflow-hidden bg-secondary align-middle font-medium text-secondary-foreground size-8 text-caption rounded-full">
                    <span data-slot="avatar-fallback" class="flex size-full items-center justify-center" x-bind="fallback"
             role="img" aria-label="Fady Mondy" >FM</span>
    </span>
                            <span class="grid min-w-0 flex-1 text-start group-data-collapsed/sidebar:hidden">
                <span class="truncate text-label leading-snug text-foreground">Fady Mondy</span>
                <span class="truncate text-caption leading-snug text-muted-foreground"><bdi dir="ltr">hello@example.com</bdi></span>
            </span>
            <svg aria-hidden="true" class="size-4 shrink-0 text-muted-foreground group-data-collapsed/sidebar:hidden" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="m7 15 5 5 5-5"/>
  <path d="m7 9 5-5 5 5"/>
</svg>            </button>
    <template x-teleport="body">
    <div data-slot="dropdown-menu-content" x-bind="popup" x-init="popupEl = $el" x-nq-presence="open" x-anchor.top-start.offset.4="$refs.trigger"
        class="z-50 min-w-44 overflow-hidden rounded-floating border border-border bg-popover p-1.5 text-popover-foreground shadow-floating outline-none max-h-[var(--available-height)] overflow-y-auto transition-opacity duration-150 ease-nq data-starting-style:opacity-0 data-ending-style:opacity-0 w-[max(15rem,var(--anchor-width))]"><div class="flex items-center gap-2 px-2 py-2">
                <span data-slot="avatar" x-data="nqAvatar(0)"
    class="inline-flex shrink-0 select-none items-center justify-center overflow-hidden bg-secondary align-middle font-medium text-secondary-foreground size-8 text-caption rounded-full">
                    <span data-slot="avatar-fallback" class="flex size-full items-center justify-center" x-bind="fallback"
             role="img" aria-label="Fady Mondy" >FM</span>
    </span>
                <span class="grid min-w-0 flex-1 text-start">
                    <span class="truncate text-label leading-snug text-foreground">Fady Mondy</span>
                    <span class="truncate text-caption leading-snug text-muted-foreground"><bdi dir="ltr">hello@example.com</bdi></span>
                </span>
            </div>
                <div data-slot="dropdown-menu-separator" role="separator" aria-orientation="horizontal" class="-mx-1.5 my-1.5 h-px bg-border"></div>
                    <div data-slot="dropdown-menu-group" role="group" ><div data-slot="dropdown-menu-item" role="menuitem" data-variant="default" x-bind="item"
        class="relative flex h-nav-row min-h-[var(--nq-touch-min,0px)] cursor-default select-none items-center gap-2.5 rounded-control px-2.5 text-body-sm text-foreground outline-none data-highlighted:bg-nq-selected data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:text-muted-foreground"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <circle cx="12" cy="8" r="5"/>
  <path d="M20 21a8 8 0 0 0-16 0"/>
</svg> Account</div>
        <div data-slot="dropdown-menu-item" role="menuitem" data-variant="default" x-bind="item"
        class="relative flex h-nav-row min-h-[var(--nq-touch-min,0px)] cursor-default select-none items-center gap-2.5 rounded-control px-2.5 text-body-sm text-foreground outline-none data-highlighted:bg-nq-selected data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:text-muted-foreground"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <rect width="20" height="14" x="2" y="5" rx="2"/>
  <line x1="2" x2="22" y1="10" y2="10"/>
</svg> Billing</div></div>
            <div data-slot="dropdown-menu-separator" role="separator" aria-orientation="horizontal" class="-mx-1.5 my-1.5 h-px bg-border"></div>
                            <div data-slot="dropdown-menu-sub" role="none" x-data="nqDropdownSub()" class="contents"><div data-slot="dropdown-menu-sub-trigger" role="menuitem" x-ref="subtrigger" x-bind="subTrigger"
        class="relative flex h-nav-row min-h-[var(--nq-touch-min,0px)] cursor-default select-none items-center gap-2.5 rounded-control px-2.5 text-body-sm text-foreground outline-none data-highlighted:bg-nq-selected data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:text-muted-foreground data-popup-open:bg-nq-selected"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M12 22a1 1 0 0 1 0-20 10 9 0 0 1 10 9 5 5 0 0 1-5 5h-2.25a1.75 1.75 0 0 0-1.4 2.8l.3.4a1.75 1.75 0 0 1-1.4 2.8z"/>
  <circle cx="13.5" cy="6.5" r=".5" fill="currentColor"/>
  <circle cx="17.5" cy="10.5" r=".5" fill="currentColor"/>
  <circle cx="6.5" cy="12.5" r=".5" fill="currentColor"/>
  <circle cx="8.5" cy="7.5" r=".5" fill="currentColor"/>
</svg> Theme<svg data-slot="icon" aria-hidden="true" class="rtl:-scale-x-100 ms-auto" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="m9 18 6-6-6-6"/>
</svg></div>
                <template x-teleport="body">
    <div data-slot="dropdown-menu-sub-content" x-bind="subPopup" x-init="subPopupEl = $el" x-nq-presence="subOpen" x-anchor.right-start.offset.-4="$refs.subtrigger"
        class="z-50 min-w-44 overflow-hidden rounded-floating border border-border bg-popover p-1.5 text-popover-foreground shadow-floating outline-none max-h-[var(--available-height)] overflow-y-auto transition-opacity duration-150 ease-nq data-starting-style:opacity-0 data-ending-style:opacity-0"><div data-slot="dropdown-menu-radio-group" role="group" x-data="{ value: null }" x-modelable="value" x-model="pref"><div data-slot="dropdown-menu-radio-item" role="menuitemradio" x-bind="item"
    x-on:click="if (! $el.hasAttribute('data-disabled')) value = 'light'"
    x-bind:aria-checked="value === 'light' ? 'true' : 'false'" x-bind:data-checked="value === 'light' ? '' : undefined" x-bind:data-unchecked="value === 'light' ? undefined : ''"
     data-keep-open         class="relative flex h-nav-row min-h-[var(--nq-touch-min,0px)] cursor-default select-none items-center gap-2.5 rounded-control px-2.5 text-body-sm text-foreground outline-none data-highlighted:bg-nq-selected data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:text-muted-foreground ps-8">
    <span aria-hidden="true" class="absolute start-2.5 inline-flex size-4 items-center justify-center">
        <span x-show="value === 'light'" style="display:none" class="block size-1.5 rounded-full bg-current"></span>
    </span>
    <svg data-slot="icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <circle cx="12" cy="12" r="4"/>
  <path d="M12 2v2"/>
  <path d="M12 20v2"/>
  <path d="m4.93 4.93 1.41 1.41"/>
  <path d="m17.66 17.66 1.41 1.41"/>
  <path d="M2 12h2"/>
  <path d="M20 12h2"/>
  <path d="m6.34 17.66-1.41 1.41"/>
  <path d="m19.07 4.93-1.41 1.41"/>
</svg> Light
</div>
            <div data-slot="dropdown-menu-radio-item" role="menuitemradio" x-bind="item"
    x-on:click="if (! $el.hasAttribute('data-disabled')) value = 'dark'"
    x-bind:aria-checked="value === 'dark' ? 'true' : 'false'" x-bind:data-checked="value === 'dark' ? '' : undefined" x-bind:data-unchecked="value === 'dark' ? undefined : ''"
     data-keep-open         class="relative flex h-nav-row min-h-[var(--nq-touch-min,0px)] cursor-default select-none items-center gap-2.5 rounded-control px-2.5 text-body-sm text-foreground outline-none data-highlighted:bg-nq-selected data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:text-muted-foreground ps-8">
    <span aria-hidden="true" class="absolute start-2.5 inline-flex size-4 items-center justify-center">
        <span x-show="value === 'dark'" style="display:none" class="block size-1.5 rounded-full bg-current"></span>
    </span>
    <svg data-slot="icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M20.985 12.486a9 9 0 1 1-9.473-9.472c.405-.022.617.46.402.803a6 6 0 0 0 8.268 8.268c.344-.215.825-.004.803.401"/>
</svg> Dark
</div>
            <div data-slot="dropdown-menu-radio-item" role="menuitemradio" x-bind="item"
    x-on:click="if (! $el.hasAttribute('data-disabled')) value = 'system'"
    x-bind:aria-checked="value === 'system' ? 'true' : 'false'" x-bind:data-checked="value === 'system' ? '' : undefined" x-bind:data-unchecked="value === 'system' ? undefined : ''"
     data-keep-open         class="relative flex h-nav-row min-h-[var(--nq-touch-min,0px)] cursor-default select-none items-center gap-2.5 rounded-control px-2.5 text-body-sm text-foreground outline-none data-highlighted:bg-nq-selected data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:text-muted-foreground ps-8">
    <span aria-hidden="true" class="absolute start-2.5 inline-flex size-4 items-center justify-center">
        <span x-show="value === 'system'" style="display:none" class="block size-1.5 rounded-full bg-current"></span>
    </span>
    <svg data-slot="icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <rect width="20" height="14" x="2" y="3" rx="2"/>
  <line x1="8" x2="16" y1="21" y2="21"/>
  <line x1="12" x2="12" y1="17" y2="21"/>
</svg> System
</div></div></div>
</template></div>
                            <div data-slot="dropdown-menu-sub" role="none" x-data="nqDropdownSub()" class="contents"><div data-slot="dropdown-menu-sub-trigger" role="menuitem" x-ref="subtrigger" x-bind="subTrigger"
        class="relative flex h-nav-row min-h-[var(--nq-touch-min,0px)] cursor-default select-none items-center gap-2.5 rounded-control px-2.5 text-body-sm text-foreground outline-none data-highlighted:bg-nq-selected data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:text-muted-foreground data-popup-open:bg-nq-selected"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="m5 8 6 6"/>
  <path d="m4 14 6-6 2-3"/>
  <path d="M2 5h12"/>
  <path d="M7 2h1"/>
  <path d="m22 22-5-10-5 10"/>
  <path d="M14 18h6"/>
</svg> Language<svg data-slot="icon" aria-hidden="true" class="rtl:-scale-x-100 ms-auto" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="m9 18 6-6-6-6"/>
</svg></div>
                    <template x-teleport="body">
    <div data-slot="dropdown-menu-sub-content" x-bind="subPopup" x-init="subPopupEl = $el" x-nq-presence="subOpen" x-anchor.right-start.offset.-4="$refs.subtrigger"
        class="z-50 min-w-44 overflow-hidden rounded-floating border border-border bg-popover p-1.5 text-popover-foreground shadow-floating outline-none max-h-[var(--available-height)] overflow-y-auto transition-opacity duration-150 ease-nq data-starting-style:opacity-0 data-ending-style:opacity-0"><div data-slot="dropdown-menu-radio-group" role="group" x-data="{ value: null }" x-modelable="value" x-model="locale"><div data-slot="dropdown-menu-radio-item" role="menuitemradio" x-bind="item"
    x-on:click="if (! $el.hasAttribute('data-disabled')) value = 'en'"
    x-bind:aria-checked="value === 'en' ? 'true' : 'false'" x-bind:data-checked="value === 'en' ? '' : undefined" x-bind:data-unchecked="value === 'en' ? undefined : ''"
     data-keep-open         class="relative flex h-nav-row min-h-[var(--nq-touch-min,0px)] cursor-default select-none items-center gap-2.5 rounded-control px-2.5 text-body-sm text-foreground outline-none data-highlighted:bg-nq-selected data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:text-muted-foreground ps-8">
    <span aria-hidden="true" class="absolute start-2.5 inline-flex size-4 items-center justify-center">
        <span x-show="value === 'en'" style="display:none" class="block size-1.5 rounded-full bg-current"></span>
    </span>
    <span lang="en" dir="ltr">English</span>
</div>
            <div data-slot="dropdown-menu-radio-item" role="menuitemradio" x-bind="item"
    x-on:click="if (! $el.hasAttribute('data-disabled')) value = 'ar'"
    x-bind:aria-checked="value === 'ar' ? 'true' : 'false'" x-bind:data-checked="value === 'ar' ? '' : undefined" x-bind:data-unchecked="value === 'ar' ? undefined : ''"
     data-keep-open         class="relative flex h-nav-row min-h-[var(--nq-touch-min,0px)] cursor-default select-none items-center gap-2.5 rounded-control px-2.5 text-body-sm text-foreground outline-none data-highlighted:bg-nq-selected data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:text-muted-foreground ps-8">
    <span aria-hidden="true" class="absolute start-2.5 inline-flex size-4 items-center justify-center">
        <span x-show="value === 'ar'" style="display:none" class="block size-1.5 rounded-full bg-current"></span>
    </span>
    <span lang="ar" dir="rtl">العربية</span>
</div></div></div>
</template></div>
                        <div data-slot="dropdown-menu-separator" role="separator" aria-orientation="horizontal" class="-mx-1.5 my-1.5 h-px bg-border"></div>
                            <div data-slot="dropdown-menu-item" role="menuitem" data-variant="default" x-bind="item"
        data-user-menu="sign-out" x-on:click="$dispatch(`nq-sign-out`); if ($el.dataset.href) window.location.href = $el.dataset.href" class="relative flex h-nav-row min-h-[var(--nq-touch-min,0px)] cursor-default select-none items-center gap-2.5 rounded-control px-2.5 text-body-sm text-foreground outline-none data-highlighted:bg-nq-selected data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:text-muted-foreground"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="m16 17 5-5-5-5"/>
  <path d="M21 12H9"/>
  <path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/>
</svg> Sign out</div></div>
</template></div>
</div>
</div>
</div>
```