konnosDashboard
MobileNavigationBar.tsx93 lines · main
1import { useParams } from 'common'
2import { ChevronLeft, Menu } from 'lucide-react'
3import Link from 'next/link'
4import { useState } from 'react'
5import { Button, cn } from 'ui'
6import { MobileSheetNav } from 'ui-patterns'
7
8import { HomeIcon } from '../LayoutHeader/HomeIcon'
9import { useMobileSheet } from './MobileSheetContext'
10import { OrgSelector } from './OrgSelector'
11import { ProjectBranchSelector } from './ProjectBranchSelector'
12import { ConnectButton } from '@/components/interfaces/ConnectButton/ConnectButton'
13import { LocalDropdown } from '@/components/interfaces/LocalDropdown'
14import { SidebarContent } from '@/components/interfaces/Sidebar'
15import { UserDropdown } from '@/components/interfaces/UserDropdown'
16import { FloatingMobileToolbar } from '@/components/layouts/Navigation/FloatingMobileToolbar/FloatingMobileToolbar'
17import { useOrganizationsQuery } from '@/data/organizations/organizations-query'
18import { useSelectedOrganizationQuery } from '@/hooks/misc/useSelectedOrganization'
19import { IS_PLATFORM } from '@/lib/constants'
20
21export const ICON_SIZE = 20
22export const ICON_STROKE_WIDTH = 1.5
23
24const MobileNavigationBar = ({
25 hideMobileMenu,
26 backToDashboardURL,
27}: {
28 hideMobileMenu?: boolean
29 backToDashboardURL?: string
30}) => {
31 const [isSheetOpen, setIsSheetOpen] = useState(false)
32 const { ref: projectRef, slug } = useParams()
33 const { data: selectedOrganization } = useSelectedOrganizationQuery()
34 const { isPending: isLoadingOrganizations } = useOrganizationsQuery()
35 const isProjectScope = !!projectRef
36 const showOrgSelection = slug || isLoadingOrganizations || (selectedOrganization && projectRef)
37 const { openMenu } = useMobileSheet()
38
39 return (
40 <div className="w-full flex flex-row md:hidden">
41 <nav
42 className={cn(
43 'group pr-3 pl-2 z-10 w-full h-12 gap-2',
44 'border-b bg-dash-sidebar border-default shadow-[0_0_30px_0_rgba(0,0,0,0.07)]',
45 'transition-width duration-200',
46 'hide-scrollbar flex flex-row items-center justify-between overflow-x-auto'
47 )}
48 >
49 <div className={cn('flex min-w-0 shrink items-center gap-2', !IS_PLATFORM && 'pl-2')}>
50 {backToDashboardURL && (
51 <div className="flex items-center justify-center ml-1 flex-0 md:hidden h-full aspect-square">
52 <Link
53 href={backToDashboardURL}
54 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"
55 >
56 <ChevronLeft strokeWidth={1.5} size={16} />
57 </Link>
58 </div>
59 )}
60 {!IS_PLATFORM && <HomeIcon />}
61 {isProjectScope ? (
62 <>
63 <ProjectBranchSelector />
64 <ConnectButton iconOnly className="w-8 h-8" />
65 </>
66 ) : IS_PLATFORM && showOrgSelection ? (
67 <OrgSelector />
68 ) : (
69 <HomeIcon className="ml-1" />
70 )}
71 </div>
72 <div className="flex shrink-0 gap-2">
73 {IS_PLATFORM ? <UserDropdown /> : <LocalDropdown />}
74 {!hideMobileMenu && (
75 <Button
76 title="Menu dropdown button"
77 type="default"
78 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"
79 icon={<Menu />}
80 onClick={() => openMenu()}
81 />
82 )}
83 </div>
84 </nav>
85 <MobileSheetNav open={isSheetOpen} onOpenChange={setIsSheetOpen} data-state="expanded">
86 <SidebarContent />
87 </MobileSheetNav>
88 <FloatingMobileToolbar hideMobileMenu={hideMobileMenu} />
89 </div>
90 )
91}
92
93export default MobileNavigationBar