TopBar

Good Morning YashiEdit Profile

import {
  TopBar,
  TopBarAction,
  TopBarBackLink,
  TopBarDivider,
  TopBarHomeButton,
  TopBarLogo,
  TopBarNotification,
  TopBarProfile,
} from '@mihcm/ui/TopBar';
import { Avatar, AvatarFallback, AvatarImage } from '@mihcm/ui/Avatar';
 
<TopBar
  start={
    <>
      <TopBarLogo />
      <TopBarHomeButton icon={<Home />} />
      <TopBarBackLink href="/">Back to main</TopBarBackLink>
      <TopBarNotification icon={<Bell />} count={5} />
    </>
  }
  end={
    <>
      <TopBarProfile
        name="Good Morning Yashi"
        subtitle="Edit Profile"
        avatar={
          <Avatar size="md">
            <AvatarImage src="/people/alex-kim.svg" alt="Yashi" />
            <AvatarFallback>YE</AvatarFallback>
          </Avatar>
        }
      />
      <TopBarDivider />
      <TopBarAction icon={<Headphones />} aria-label="Support" className="hidden lg:flex" />
      <TopBarDivider />
      <TopBarAction icon={<Sparkles />} className="hidden lg:flex">
        What's new
      </TopBarAction>
      <TopBarDivider />
      <TopBarAction className="hidden md:inline-flex">Logout</TopBarAction>
    </>
  }
/>;

The TopBarMenuButton lives in the start slot and is hidden on desktop (lg:hidden). Click it to open the MainSidebar's mobile Sheet — the sidebar runs in controlled mode so the trigger can live anywhere in the layout.

import { useState } from 'react';
import {
  TopBar,
  TopBarLogo,
  TopBarMenuButton,
  TopBarHomeButton,
  TopBarNotification,
  TopBarProfile,
} from '@mihcm/ui/TopBar';
import { MainSidebar } from '@mihcm/ui/MainSidebar';
 
function AppHeader() {
  const [navOpen, setNavOpen] = useState(false);
 
  return (
    <>
      <TopBar
        start={
          <>
            <TopBarMenuButton onClick={() => setNavOpen(true)} />
            <TopBarLogo />
            <TopBarHomeButton icon={<Home />} className="hidden lg:block" />
          </>
        }
        end={
          <>
            <TopBarNotification icon={<Bell />} count={3} />
            <TopBarProfile avatar={<Avatar />} />
          </>
        }
      />
 
      <MainSidebar
        mobile
        items={MOBILE_NAV_ITEMS}
        mobileOpen={navOpen}
        onMobileOpenChange={setNavOpen}
      />
    </>
  );
}

When mobileOpen is passed, MainSidebar runs in controlled mode and the built-in hamburger is suppressed (no double trigger). Without mobileOpen, the sidebar manages its own state and renders its built-in hamburger as before.

Minimal — logo + avatar only

<TopBar
  start={<TopBarLogo />}
  end={
    <Avatar size="sm">
      <AvatarImage src="/people/alex-kim.svg" alt="Yashi" />
      <AvatarFallback>YA</AvatarFallback>
    </Avatar>
  }
/>

With a global search in the center slot

import { SearchField } from '@mihcm/ui/SearchField';
 
<TopBar
  start={<TopBarLogo />}
  center={
    <SearchField
      value={query}
      onValueChange={setQuery}
      placeholder="Search anything..."
      size="sm"
      className="w-full max-w-md"
    />
  }
  end={
    <Avatar size="sm">
      <AvatarImage src="/people/alex-kim.svg" alt="Yashi" />
      <AvatarFallback>YA</AvatarFallback>
    </Avatar>
  }
/>;

Full MiHCM TopBar

Mobile hamburger driven from the TopBar

Minimal — logo + avatar only

With a global search in the center slot