MobileViewNav.tsx39 lines · main

1	import { PropsWithChildren } from 'react'
2	import { cn } from 'ui'
3
4	import { useAppStateSnapshot } from '@/state/app-state'
5
6	interface Props {
7	title?: string
8	}
9
10	const MobileViewNav = ({ title }: PropsWithChildren<Props>) => {
11	const { mobileMenuOpen, setMobileMenuOpen } = useAppStateSnapshot()
12
13	return (
14	<nav
15	className={cn(
16	'group px-4 z-10 w-full h-10',
17	'border-b border-default',
18	'transition-width duration-200',
19	'flex md:hidden flex-row items-center gap-1 overflow-x-auto'
20	)}
21	>
22	<button
23	title="Menu dropdown button"
24	className={cn(
25	'group/view-toggle flex justify-center flex-col border-none space-x-0 items-start gap-1 bg-transparent! rounded-md min-w-[30px] w-[30px] h-[30px]'
26	)}
27	onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
28	>
29	<div className="h-px inline-block left-0 w-4 transition-all ease-out bg-foreground-lighter group-hover/view-toggle:bg-foreground p-0 m-0" />
30	<div className="h-px inline-block left-0 w-3 transition-all ease-out bg-foreground-lighter group-hover/view-toggle:bg-foreground p-0 m-0" />
31	</button>
32	<div className="flex items-center">
33	<h4 className="text-base">{title}</h4>
34	</div>
35	</nav>
36	)
37	}
38
39	export default MobileViewNav