Fusion UI

Overview

The ApplicationSwitcher is an icon button that opens a menu of applications, grouped in sections. The active application is highlighted. Switching happens via the href of the items or via onChange. It works like a context switcher without deeper hierarchies.

"use client";

import React, {useState} from "react";
import {
  ApplicationSwitcher,
  ApplicationSwitcherMenu,
  ApplicationSwitcherMenuItem,
} from "@brynlabs/fusion-ui";

const menu: ApplicationSwitcherMenu = {
  sections: [
    {
      title: "Zuletzt verwendet",
      items: [
        {
          id: "consent",
          title: "Consent",
          subtitle: "consent.website.com",
          icon: "🌍",
        },
        {
          id: "website-cms",
          title: "Website CMS",
          subtitle: "cms.website.com",
          icon: "🗓️",
        },
      ],
    },
    {
      title: "Anwendungen",
      items: [
        {
          id: "digital-assets",
          title: "Digital Assets",
          subtitle: "dam.website.com",
          icon: "📁",
        },
        {
          id: "business-account",
          title: "My Business Account",
          icon: "👤",
        },
      ],
    },
  ],
};

export const ApplicationSwitcherExample = () => {
  const [activeItem, setActiveItem] = useState<ApplicationSwitcherMenuItem>(
    menu.sections[0]!.items[0]!,
  );

  return <ApplicationSwitcher menu={menu} activeItem={activeItem} onChange={setActiveItem} />;
};

In the main nav

Pass it as applicationSwitcher to the MainNavView. It is rendered before the logo in the bar, and before the logo in the header of the side menu when space runs out.

<MainNavView
  applicationSwitcher={<ApplicationSwitcher menu={menu} activeItem={activeItem} />}
  logo={<Logo />}>
  {children}
</MainNavView>

Application Switcher

Overview

In the main nav