MobileMenuBackdrop() — supabase Function Reference

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

Function tsx DocumentationSystem ReferenceGen calls 1

Entity Profile

DocumentationSystem→ ReferenceGen→ MobileMenuBackdrop() — supabase Function Reference

Dependency Diagram

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

Relationship Graph

Source Code

apps/docs/layouts/MainSkeleton.tsx lines 246–276

const MobileMenuBackdrop = memo(function MobileMenuBackdrop() {
  const mobileMenuOpen = useMenuMobileOpen()

  useEffect(() => {
    window.addEventListener('resize', (e: UIEvent) => {
      const w = e.target as Window
      if (mobileMenuOpen && w.innerWidth >= 1024) {
        menuState.setMenuMobileOpen(!mobileMenuOpen)
      }
    })
    return () => {
      window.removeEventListener('resize', () => {})
    }
  }, [mobileMenuOpen])

  return (
    <div
      className={cn(
        'h-full',
        'left-0',
        'right-0',
        'z-10',
        'backdrop-blur-sm backdrop-filter bg-alternative/90',
        mobileMenuOpen ? 'absolute h-full w-full top-0 left-0' : 'hidden h-0',
        // always hide on desktop
        'lg:hidden'
      )}
      onClick={() => menuState.setMenuMobileOpen(!mobileMenuOpen)}
    ></div>
  )
})