Fusion UI

Overview

SideMenuView places a vertical menu at the left edge and the page next to it. Sections with an optional title group the items, items can have an icon and children that expand below them. The component pages of this documentation use it.

The side menu is never used on its own, only in addition to a MainNavView: the main nav switches between the areas of the application, the side menu lists the pages of the current area.

File: side-menu-demo.tsx
"use client";

import React from "react";
import {
  Container,
  IconDashboard,
  IconFileList,
  IconSettings3,
  IconTeam,
  MainNavView,
  PageHeaderView,
  SideMenuFooter,
  SideMenuItem,
  SideMenuSection,
  SideMenuView,
  StackLayout,
  Tile,
  TileContent,
  TileHeader,
} from "@brynlabs/fusion-ui";

// The side menu lists the pages of one area, the main nav around it switches between the areas
export const SideMenuDemo = () => (
  <MainNavView
    logo={<span className={"heading-4-font"}>Acme</span>}
    menuItems={[
      {title: "Analytics", href: "/preview/side-menu"},
      {title: "Projects", href: "#projects"},
      {title: "Billing", href: "#billing"},
    ]}>
    <SideMenuView
      menuItems={
        <>
          <SideMenuSection>
            <SideMenuItem
              menuItem={{title: "Dashboard", href: "/preview/side-menu", icon: <IconDashboard />}}
            />
            <SideMenuItem
              menuItem={{
                title: "Reports",
                href: "#reports",
                icon: <IconFileList />,
                children: [
                  {title: "Revenue", href: "#revenue"},
                  {title: "Customers", href: "#customers"},
                ],
              }}
            />
          </SideMenuSection>
          <SideMenuSection sectionTitle={"Organization"}>
            <SideMenuItem menuItem={{title: "Team", href: "#team", icon: <IconTeam />}} />
            <SideMenuItem
              menuItem={{title: "Settings", href: "#settings", icon: <IconSettings3 />}}
            />
          </SideMenuSection>
        </>
      }
      footer={
        <SideMenuFooter>
          <span className={"small-font"}>Version 2.4.0</span>
        </SideMenuFooter>
      }>
      <PageHeaderView pageHeaderTitle={"Dashboard"}>
        <Container direction={"both"}>
          <StackLayout>
            <Tile>
              <TileHeader>Side Menu</TileHeader>
              <TileContent>
                The side menu lists the pages of this area. Sections group related pages, items can
                have icons and children. Make the window narrow to see how it collapses.
              </TileContent>
            </Tile>
          </StackLayout>
        </Container>
      </PageHeaderView>
    </SideMenuView>
  </MainNavView>
);

menuItems takes either components or a configuration. Pass a list of MenuItems, or a Menu, a list of sections with an optional title and their items, as the MainNavView does for its items. Use components (SideMenuSection, SideMenuItem) when you need control over a single item, e.g. its badge.

const menu: Menu = [
  {items: [{title: "Dashboard", href: "/dashboard", icon: <IconDashboard />}]},
  {
    title: "Organization",
    items: [
      {title: "Team", href: "/team", icon: <IconTeam />},
      {
        title: "Settings",
        href: "/settings",
        children: [{title: "Billing", href: "/settings/billing"}],
      },
    ],
  },
];

<SideMenuView menuItems={menu}>{page}</SideMenuView>

Inside the main nav

Always render it inside the MainNavView. There the side menu is integrated into its hierarchy: on phones it is hidden and opens with the menu button of the main nav, which also leads back up to the main menu.

<MainNavView menuItems={areas}>
  <SideMenuView
    menuItems={
      <SideMenuSection sectionTitle={"Reports"}>
        {reports.map(item => (
          <SideMenuItem key={item.href} menuItem={item} />
        ))}
      </SideMenuSection>
    }>
    <PageHeaderView pageHeaderTitle={"Revenue"}>{page}</PageHeaderView>
  </SideMenuView>
</MainNavView>

Side Menu

Overview

Menu items

Inside the main nav