useFloatingToolbarSheet.tsx56 lines · main

1	import { useRouter } from 'next/router'
2	import { useCallback } from 'react'
3
4	import { useMobileSheet } from '../NavigationBar/MobileSheetContext'
5	import { isMenuContent, shouldShowMenuButton } from './FloatingMobileToolbar.utils'
6	import { useSidebarManagerSnapshot } from '@/state/sidebar-manager-state'
7
8	export function useFloatingToolbarSheet(hideMobileMenu?: boolean) {
9	const router = useRouter()
10	const pathname = router.asPath?.split('?')[0] ?? router.pathname
11	const { content: sheetContent, setContent: setSheetContent, openMenu } = useMobileSheet()
12	const { clearActiveSidebar, closeActive, activeSidebar } = useSidebarManagerSnapshot()
13
14	const isSheetOpen = sheetContent !== null
15	const isMenuOpen = isMenuContent(sheetContent)
16	const isSearchOpen = sheetContent === 'search'
17	const showMenuButton = shouldShowMenuButton(pathname) && !hideMobileMenu
18
19	const handleMenuClick = useCallback(() => {
20	if (isMenuOpen) {
21	clearActiveSidebar()
22	setSheetContent(null)
23	return
24	}
25	clearActiveSidebar()
26	openMenu()
27	}, [isMenuOpen, clearActiveSidebar, openMenu, setSheetContent])
28
29	const handleClose = useCallback(() => {
30	if (activeSidebar) {
31	closeActive()
32	} else {
33	setSheetContent(null)
34	}
35	}, [activeSidebar, closeActive, setSheetContent])
36
37	const handleSearchClick = useCallback(() => {
38	if (isSearchOpen) {
39	clearActiveSidebar()
40	setSheetContent(null)
41	return
42	}
43	clearActiveSidebar()
44	setSheetContent('search')
45	}, [isSearchOpen, clearActiveSidebar, setSheetContent])
46
47	return {
48	isSheetOpen,
49	isMenuOpen,
50	isSearchOpen,
51	showMenuButton,
52	handleMenuClick,
53	handleClose,
54	handleSearchClick,
55	}
56	}