Function Header

common/components/header.tsx:89–183

(props: Props)

}

export default function Header(props: Props) {
  const { title = <div className="text-xl font-bold">Dumpfun</div>, subTitle } =
    props
  return (
    <header className="flex flex-row items-center h-14 px-4">
      {/* sidebar menu */}
      <div className="mr-4 md:hidden flex flex-row items-center">
        <Sheet>
          <SheetTrigger>
            <MenuIcon />
          </SheetTrigger>
          <SheetTitle className="sr-only" />
          <SheetContent side="left">
            <SheetHeader>Dumpfun</SheetHeader>
            <ul>
              {menus.map(item => (
                <li
                  key={item.label}
                  className={cn(
                    "flex flex-col px-6",
                    item.children && "text-sm text-gray-400"
                  )}
                >
                  {item.children ? (
                    <ul className=" py-2">
                      <span>{item.label}</span>
                      {item.children.map(t => (
                        <NavLink
                          key={t.label}
                          label={t.label}
                          value={t.value!}
                          icon={t.icon}
                          trackLabel={t.trackLabel!}
                        />
                      ))}
                    </ul>
                  ) : (
                    <NavLink
                      label={item.label}
                      value={item.value!}
                      icon={item.icon}
                      trackLabel={item.trackLabel!}
                    />
                  )}
                </li>
              ))}
            </ul>
          </SheetContent>
        </Sheet>
      </div>
      {title}
      {subTitle && (
        <div className="ml-auto text-sm text-blue-100">{subTitle}</div>
      )}

      {/* top menu */}
      <NavigationMenu
        className="ml-auto hidden md:block"