TopBar

import {
  TopBar,
  TopBarLogo,
  TopBarHomeButton,
  TopBarBackLink,
  TopBarMenuButton,
  TopBarNotification,
  TopBarProfile,
  TopBarDivider,
  TopBarAction,
} from '@mihcm/ui/TopBar';

export function Example() {
  return (
    <TopBar
      start={
        <>
          <TopBarMenuButton onClick={() => setNavOpen(true)} />
          <TopBarLogo />
          <TopBarHomeButton icon={<HomeIcon />} />
          <TopBarBackLink href="/">Back to main</TopBarBackLink>
          <TopBarNotification icon={<BellIcon />} count={5} />
        </>
      }
      end={
        <>
          <TopBarProfile
  name="Good Morning Yashi"
  subtitle="Edit Profile"
  avatar={<ProfileAvatar />}
/>
          <TopBarDivider />
          <TopBarAction icon={<HeadphonesIcon />} aria-label="Support" className="hidden lg:flex" />
          <TopBarAction icon={<MoreIcon />} aria-label="More actions" className="lg:flex" />
          <TopBarDivider />
<TopBarAction icon={<SparklesIcon />} className="hidden lg:flex">
  What's new
</TopBarAction>
          <TopBarDivider className="hidden md:block" />
<TopBarAction className="hidden md:inline-flex">Logout</TopBarAction>
        </>
      }
    />
  );
}