useFloatingToolbarSheet.tsx 1.7 KB

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