MobileHeader() — supabase Function Reference

Architecture documentation for the MobileHeader() function in MainSkeleton.tsx from the supabase codebase.

Function tsx DocumentationSystem ReferenceGen calls 1

Entity Profile

DocumentationSystem→ ReferenceGen→ MobileHeader() — supabase Function Reference

Dependency Diagram

graph TD
  8f2991ba_bde6_e30a_2fab_8d8c8bee5eb7["MobileHeader()"]
  eb196185_fb88_9716_d1f2_9f9f9226152c["useMenuMobileOpen()"]
  8f2991ba_bde6_e30a_2fab_8d8c8bee5eb7 -->|calls| eb196185_fb88_9716_d1f2_9f9f9226152c
  style 8f2991ba_bde6_e30a_2fab_8d8c8bee5eb7 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/docs/layouts/MainSkeleton.tsx lines 188–244

const MobileHeader = memo(function MobileHeader(props: MobileHeaderProps) {
  const mobileMenuOpen = useMenuMobileOpen()

  return (
    <div
      className={cn(
        'lg:hidden px-3.5 border-b z-10',
        'transition-all ease-out',
        'top-0',
        mobileMenuOpen && 'absolute',
        'flex items-center',
        mobileMenuOpen ? 'gap-0' : 'gap-1'
      )}
    >
      <button
        className={cn(
          'h-8 w-8 flex group items-center justify-center mr-1',
          mobileMenuOpen && 'mt-0.5'
        )}
        onClick={() => menuState.setMenuMobileOpen(!mobileMenuOpen)}
      >
        <div
          className={cn(
            'space-y-1  cursor-pointer relative',
            mobileMenuOpen ? 'w-4 h-4' : 'w-4 h-[8px]'
          )}
        >
          <span
            className={cn(
              'transition-all ease-out block w-4 h-px bg-foreground-muted group-hover:bg-foreground',
              !mobileMenuOpen ? 'w-4' : 'absolute rotate-45 top-[6px]'
            )}
          />
          <span
            className={cn(
              'transition-all ease-out block h-px bg-foreground-muted group-hover:bg-foreground',
              !mobileMenuOpen ? 'w-3 group-hover:w-4' : 'absolute w-4 -rotate-45 top-[2px]'
            )}
          />
        </div>
      </button>
      <span
        className={cn(
          'transition-all duration-200',
          'text-foreground',
          mobileMenuOpen ? 'text-xs' : 'text-sm'
        )}
      >
        {mobileMenuOpen
          ? 'Close'
          : 'menuId' in props
            ? levelsData[props.menuId]?.name ?? levelsData['home'].name
            : props.menuName}
      </span>
    </div>
  )
})