Fusion UI

The AccountMenu is an avatar that opens a menu with the account and its actions, as a plain list or in sections with titles. AccountMenuFooter places custom components like a theme toggle at the bottom. With a mouse it opens as a popover, on touch screens as a bottom sheet, independent of the screen size.

"use client";

import {
  AccountMenu,
  AccountMenuFooter,
  IconLogoutBoxR,
  IconSettings,
  IconUserSettings,
  MainNavPlacementProvider,
} from "@brynlabs/fusion-ui";
import React from "react";
import {DarkModeToggle} from "@/components/dark-mode-toggle/dark-mode-toggle";

export const AccountMenuExample = () => (
  <AccountMenu
    accountImage="https://i.pravatar.cc/300"
    name="John Doe"
    email="john@example.com"
    accountActions={[
      {
        title: "Account",
        items: [
          {
            title: "Profil bearbeiten",
            icon: <IconUserSettings />,
            callback: () => alert("Profil bearbeiten"),
          },
          {
            title: "Einstellungen",
            icon: <IconSettings />,
            callback: () => alert("Einstellungen"),
          },
        ],
      },
      {
        items: [
          {
            title: "Abmelden",
            icon: <IconLogoutBoxR />,
            callback: () => alert("Abmelden"),
          },
        ],
      },
    ]}>
    <AccountMenuFooter>
      <span className="small-font">Theme</span>
      <DarkModeToggle />
    </AccountMenuFooter>
  </AccountMenu>
);

export const AccountMenuInitialsExample = () => (
  <AccountMenu
    name="Max Mustermann"
    email="max.mustermann@muster.com"
    accountActions={[{title: "Abmelden", icon: <IconLogoutBoxR />, href: "/"}]}
  />
);

export const AccountMenuExtendedExample = () => (
  // Inside the side menu of a MainNavView the placement is provided automatically.
  <MainNavPlacementProvider placement={"menu"}>
    <div style={{maxWidth: 300}}>
      <AccountMenu
        accountImage="https://i.pravatar.cc/300"
        name="John Doe"
        email="john@example.com"
        accountActions={[
          {title: "Profil bearbeiten", icon: <IconUserSettings />, href: "/"},
          {title: "Abmelden", icon: <IconLogoutBoxR />, href: "/"},
        ]}
      />
    </div>
  </MainNavPlacementProvider>
);

Initials

Without an image, the avatar shows the initials of the name.

"use client";

import {
  AccountMenu,
  AccountMenuFooter,
  IconLogoutBoxR,
  IconSettings,
  IconUserSettings,
  MainNavPlacementProvider,
} from "@brynlabs/fusion-ui";
import React from "react";
import {DarkModeToggle} from "@/components/dark-mode-toggle/dark-mode-toggle";

export const AccountMenuExample = () => (
  <AccountMenu
    accountImage="https://i.pravatar.cc/300"
    name="John Doe"
    email="john@example.com"
    accountActions={[
      {
        title: "Account",
        items: [
          {
            title: "Profil bearbeiten",
            icon: <IconUserSettings />,
            callback: () => alert("Profil bearbeiten"),
          },
          {
            title: "Einstellungen",
            icon: <IconSettings />,
            callback: () => alert("Einstellungen"),
          },
        ],
      },
      {
        items: [
          {
            title: "Abmelden",
            icon: <IconLogoutBoxR />,
            callback: () => alert("Abmelden"),
          },
        ],
      },
    ]}>
    <AccountMenuFooter>
      <span className="small-font">Theme</span>
      <DarkModeToggle />
    </AccountMenuFooter>
  </AccountMenu>
);

export const AccountMenuInitialsExample = () => (
  <AccountMenu
    name="Max Mustermann"
    email="max.mustermann@muster.com"
    accountActions={[{title: "Abmelden", icon: <IconLogoutBoxR />, href: "/"}]}
  />
);

export const AccountMenuExtendedExample = () => (
  // Inside the side menu of a MainNavView the placement is provided automatically.
  <MainNavPlacementProvider placement={"menu"}>
    <div style={{maxWidth: 300}}>
      <AccountMenu
        accountImage="https://i.pravatar.cc/300"
        name="John Doe"
        email="john@example.com"
        accountActions={[
          {title: "Profil bearbeiten", icon: <IconUserSettings />, href: "/"},
          {title: "Abmelden", icon: <IconLogoutBoxR />, href: "/"},
        ]}
      />
    </div>
  </MainNavPlacementProvider>
);

Extended trigger

In the side menu of a MainNavView, the account is a row with avatar, name and email. It opens the same popover or bottom sheet.

"use client";

import {
  AccountMenu,
  AccountMenuFooter,
  IconLogoutBoxR,
  IconSettings,
  IconUserSettings,
  MainNavPlacementProvider,
} from "@brynlabs/fusion-ui";
import React from "react";
import {DarkModeToggle} from "@/components/dark-mode-toggle/dark-mode-toggle";

export const AccountMenuExample = () => (
  <AccountMenu
    accountImage="https://i.pravatar.cc/300"
    name="John Doe"
    email="john@example.com"
    accountActions={[
      {
        title: "Account",
        items: [
          {
            title: "Profil bearbeiten",
            icon: <IconUserSettings />,
            callback: () => alert("Profil bearbeiten"),
          },
          {
            title: "Einstellungen",
            icon: <IconSettings />,
            callback: () => alert("Einstellungen"),
          },
        ],
      },
      {
        items: [
          {
            title: "Abmelden",
            icon: <IconLogoutBoxR />,
            callback: () => alert("Abmelden"),
          },
        ],
      },
    ]}>
    <AccountMenuFooter>
      <span className="small-font">Theme</span>
      <DarkModeToggle />
    </AccountMenuFooter>
  </AccountMenu>
);

export const AccountMenuInitialsExample = () => (
  <AccountMenu
    name="Max Mustermann"
    email="max.mustermann@muster.com"
    accountActions={[{title: "Abmelden", icon: <IconLogoutBoxR />, href: "/"}]}
  />
);

export const AccountMenuExtendedExample = () => (
  // Inside the side menu of a MainNavView the placement is provided automatically.
  <MainNavPlacementProvider placement={"menu"}>
    <div style={{maxWidth: 300}}>
      <AccountMenu
        accountImage="https://i.pravatar.cc/300"
        name="John Doe"
        email="john@example.com"
        accountActions={[
          {title: "Profil bearbeiten", icon: <IconUserSettings />, href: "/"},
          {title: "Abmelden", icon: <IconLogoutBoxR />, href: "/"},
        ]}
      />
    </div>
  </MainNavPlacementProvider>
);

Account Menu

Sections and footer

Initials

Extended trigger