index.tsx raw

   1  import iconDark from '@/assets/smeshicondark.png'
   2  import iconLight from '@/assets/smeshiconlight.png'
   3  import { cn } from '@/lib/utils'
   4  import { useSidebarDrawer } from '@/PageManager'
   5  import { useScreenSize } from '@/providers/ScreenSizeProvider'
   6  import { useTheme } from '@/providers/ThemeProvider'
   7  
   8  export function Titlebar({
   9    children,
  10    className,
  11    hideBottomBorder = false,
  12    hideMenuButton = false
  13  }: {
  14    children?: React.ReactNode
  15    className?: string
  16    hideBottomBorder?: boolean
  17    hideMenuButton?: boolean
  18  }) {
  19    const { isSmallScreen } = useScreenSize()
  20  
  21    return (
  22      <div
  23        className={cn(
  24          'sticky top-0 w-full h-12 z-40 [&_svg]:size-5 [&_svg]:shrink-0 select-none bg-background',
  25          !hideBottomBorder && 'border-b',
  26          className
  27        )}
  28      >
  29        <div className="flex items-center h-full w-full">
  30          {isSmallScreen && !hideMenuButton && <MenuButton />}
  31          <div className="flex-1 h-full">{children}</div>
  32        </div>
  33      </div>
  34    )
  35  }
  36  
  37  function MenuButton() {
  38    const { toggle } = useSidebarDrawer()
  39    const { theme } = useTheme()
  40    const iconSrc = theme === 'light' ? iconLight : iconDark
  41  
  42    return (
  43      <button
  44        onClick={toggle}
  45        className="flex items-center justify-center w-10 h-full hover:bg-accent transition-colors"
  46        aria-label="Open menu"
  47      >
  48        <img src={iconSrc} alt="Menu" className="w-6 h-6" />
  49      </button>
  50    )
  51  }
  52