supabase/apps/studio/components/layouts/Navigation/NavigationBar/MobileNavigationBar.tsx

import { useParams } from 'common'
import { ChevronLeft, Menu } from 'lucide-react'
import Link from 'next/link'
import { useState } from 'react'
import { Button, cn } from 'ui'
import { MobileSheetNav } from 'ui-patterns'

import { HomeIcon } from '../LayoutHeader/HomeIcon'
import { useMobileSheet } from './MobileSheetContext'
import { OrgSelector } from './OrgSelector'
import { ProjectBranchSelector } from './ProjectBranchSelector'
import { ConnectButton } from '@/components/interfaces/ConnectButton/ConnectButton'
import { LocalDropdown } from '@/components/interfaces/LocalDropdown'
import { SidebarContent } from '@/components/interfaces/Sidebar'
import { UserDropdown } from '@/components/interfaces/UserDropdown'
import { FloatingMobileToolbar } from '@/components/layouts/Navigation/FloatingMobileToolbar/FloatingMobileToolbar'
import { useOrganizationsQuery } from '@/data/organizations/organizations-query'
import { useSelectedOrganizationQuery } from '@/hooks/misc/useSelectedOrganization'
import { IS_PLATFORM } from '@/lib/constants'

export const ICON_SIZE = 20
export const ICON_STROKE_WIDTH = 1.5

const MobileNavigationBar = ({
  hideMobileMenu,
  backToDashboardURL,
}: {
  hideMobileMenu?: boolean
  backToDashboardURL?: string
}) => {
  const [isSheetOpen, setIsSheetOpen] = useState(false)
  const { ref: projectRef, slug } = useParams()
  const { data: selectedOrganization } = useSelectedOrganizationQuery()
  const { isPending: isLoadingOrganizations } = useOrganizationsQuery()
  const isProjectScope = !!projectRef
  const showOrgSelection = slug || isLoadingOrganizations || (selectedOrganization && projectRef)
  const { openMenu } = useMobileSheet()

  return (
    <div className="w-full flex flex-row md:hidden">
      <nav
        className={cn(
          'group pr-3 pl-2 z-10 w-full h-12 gap-2',
          'border-b bg-dash-sidebar border-default shadow-[0_0_30px_0_rgba(0,0,0,0.07)]',
          'transition-width duration-200',
          'hide-scrollbar flex flex-row items-center justify-between overflow-x-auto'
        )}
      >
        <div className={cn('flex min-w-0 shrink items-center gap-2', !IS_PLATFORM && 'pl-2')}>
          {backToDashboardURL && (
            <div className="flex items-center justify-center ml-1 flex-0 md:hidden h-full aspect-square">
              <Link
                href={backToDashboardURL}
                className="flex items-center justify-center bg-transparent! rounded-md min-w-[30px] w-[30px] h-[30px] border text-foreground-lighter hover:text-foreground transition-colors"
              >
                <ChevronLeft strokeWidth={1.5} size={16} />
              </Link>
            </div>
          )}
          {!IS_PLATFORM && <HomeIcon />}
          {isProjectScope ? (
            <>
              <ProjectBranchSelector />
              <ConnectButton iconOnly className="w-8 h-8" />
            </>
          ) : IS_PLATFORM && showOrgSelection ? (
            <OrgSelector />
          ) : (
            <HomeIcon className="ml-1" />
          )}
        </div>
        <div className="flex shrink-0 gap-2">
          {IS_PLATFORM ? <UserDropdown /> : <LocalDropdown />}
          {!hideMobileMenu && (
            <Button
              title="Menu dropdown button"
              type="default"
              className="flex lg:hidden border-default bg-surface-100/75 text-foreground-light rounded-md min-w-[30px] w-[30px] h-[30px] data-open:bg-overlay-hover/30"
              icon={<Menu />}
              onClick={() => openMenu()}
            />
          )}
        </div>
      </nav>
      <MobileSheetNav open={isSheetOpen} onOpenChange={setIsSheetOpen} data-state="expanded">
        <SidebarContent />
      </MobileSheetNav>
      <FloatingMobileToolbar hideMobileMenu={hideMobileMenu} />
    </div>
  )
}

export default MobileNavigationBar