create custom useDisclosure hook and refactor state for mobile menu

package.json

@@ -73,6 +73,7 @@
     "remark-gfm": "^3.0.1",
     "tailwind-merge": "^2.3.0",
     "tailwindcss-animate": "^1.0.7",
+    "usehooks-ts": "^3.1.0",
     "yaml-loader": "^0.8.0"
   },
   "devDependencies": {

src/components/Nav/Mobile/HamburgerButton.tsx

@@ -2,7 +2,7 @@ import { forwardRef } from "react"
 import { motion } from "framer-motion"
 import { useTranslation } from "next-i18next"
 
-import { ButtonIcon, type ButtonProps } from "@/components/ui/button"
+import { Button, type ButtonProps } from "@/components/ui/button"
 
 import { HAMBURGER_BUTTON_ID } from "@/lib/constants"
 
@@ -20,44 +20,30 @@ type HamburgerProps = ButtonProps & {
   isMenuOpen: boolean
 }
 
-const HamburgerButton = forwardRef<HTMLSpanElement, HamburgerProps>(
+const HamburgerButton = forwardRef<HTMLButtonElement, HamburgerProps>(
   ({ isMenuOpen, ...props }, ref) => {
     const { t } = useTranslation("common")
 
     return (
-      <ButtonIcon
+      <Button
         ref={ref}
         id={HAMBURGER_BUTTON_ID}
         aria-label={t("aria-toggle-search-button")}
         className="px-0 text-body"
         variant="ghost"
-        icon={
-          <svg
-            viewBox="0 0 24 40"
-            // pointerEvents={isMenuOpen ? "none" : "auto"}
-            className="pointer-events-auto relative mx-2 h-10 w-6 stroke-body stroke-2 hover:stroke-primary"
-            // _hover={{
-            //   color: "primary.base",
-            //   "& > path": {
-            //     stroke: "primary.base",
-            //   },
-            // }}
-            // sx={{
-            //   "& > path": {
-            //     stroke: "text",
-            //     fill: "none",
-            //   },
-            // }}
-          >
-            <motion.path
-              variants={hamburgerVariants}
-              initial={false}
-              animate={isMenuOpen ? "open" : "closed"}
-            />
-          </svg>
-        }
         {...props}
-      />
+      >
+        <svg
+          viewBox="0 0 24 40"
+          className="relative mx-2 h-10 w-6 stroke-body stroke-2 hover:stroke-primary hover:text-primary [&>path]:fill-none hover:[&>path]:stroke-primary"
+        >
+          <motion.path
+            variants={hamburgerVariants}
+            initial={false}
+            animate={isMenuOpen ? "open" : "closed"}
+          />
+        </svg>
+      </Button>
     )
   }
 )

src/components/Nav/Mobile/MenuFooter.tsx

@@ -1,7 +1,6 @@
 import { useTranslation } from "next-i18next"
 import { BsTranslate } from "react-icons/bs"
 import { MdBrightness2, MdSearch, MdWbSunny } from "react-icons/md"
-import { MenuButton } from "@chakra-ui/react"
 
 import LanguagePicker from "@/components/LanguagePicker"
 

src/components/Nav/Mobile/index.tsx

@@ -14,28 +14,28 @@ import MenuBody from "./MenuBody"
 import MenuFooter from "./MenuFooter"
 import MenuHeader from "./MenuHeader"
 
+import useDisclosure from "@/hooks/useDisclosure"
+
 type MobileNavMenuProps = ButtonProps & {
-  isOpen: boolean
-  onToggle: () => void
   toggleColorMode: () => void
   toggleSearch: () => void
   linkSections: NavSections
 }
 
 const MobileNavMenu = ({
-  isOpen,
-  onToggle,
   toggleColorMode,
   toggleSearch,
   linkSections,
   ...props
 }: MobileNavMenuProps) => {
+  const { isOpen, onToggle } = useDisclosure()
+
   return (
     <>
       {/* DRAWER MENU */}
       <Sheet open={isOpen} onOpenChange={onToggle}>
         <SheetTrigger asChild>
-          <HamburgerButton isMenuOpen={isOpen} onClick={onToggle} {...props} />
+          <HamburgerButton isMenuOpen={isOpen} {...props} />
         </SheetTrigger>
         <SheetContent side="left" className="flex flex-col" aria-describedby="">
           {/* HEADER ELEMENTS: SITE NAME, CLOSE BUTTON */}

src/components/Nav/index.tsx

@@ -20,7 +20,7 @@ const MobileNavMenu = lazy(() => import("./Mobile"))
 
 // TODO display page title on mobile
 const Nav = () => {
-  const { toggleColorMode, linkSections, mobileNavProps } = useNav()
+  const { toggleColorMode, linkSections } = useNav()
   const { t } = useTranslation("common")
   const searchModalDisclosure = useDisclosure()
   const navWrapperRef = useRef(null)
@@ -84,7 +84,7 @@ const Nav = () => {
                 <Suspense>
                   <Search {...searchModalDisclosure} />
                   <MobileNavMenu
-                    {...mobileNavProps}
+                    toggleColorMode={toggleColorMode}
                     linkSections={linkSections}
                     toggleSearch={searchModalDisclosure.onOpen}
                   />

src/components/Nav/useNav.ts

@@ -18,7 +18,6 @@ import {
   BsUiChecksGrid,
 } from "react-icons/bs"
 import { PiFlask, PiUsersFourLight } from "react-icons/pi"
-import { useDisclosure } from "@chakra-ui/react"
 
 import { EthereumIcon } from "@/components/icons/EthereumIcon"
 
@@ -29,7 +28,6 @@ import type { NavSections } from "./types"
 import useColorModeValue from "@/hooks/useColorModeValue"
 
 export const useNav = () => {
-  const { isOpen, onToggle } = useDisclosure()
   const { t } = useTranslation("common")
   const { theme, setTheme } = useTheme()
 
@@ -474,15 +472,8 @@ export const useNav = () => {
     })
   }
 
-  const mobileNavProps = {
-    isOpen,
-    toggleColorMode,
-    onToggle,
-  }
-
   return {
     linkSections,
-    mobileNavProps,
     toggleColorMode,
   }
 }

src/hooks/useDisclosure.ts

@@ -0,0 +1,18 @@
+import { useBoolean } from "usehooks-ts"
+
+/**
+ * Hook that provides a more semantic API for managing the open/close state of a
+ * modal, dropdown, or any other component that can be opened and closed.
+ */
+function useDisclosure(defaultValue = false) {
+  const { value, setTrue, setFalse, toggle } = useBoolean(defaultValue)
+
+  return {
+    isOpen: value,
+    onOpen: setTrue,
+    onClose: setFalse,
+    onToggle: toggle,
+  }
+}
+
+export default useDisclosure

yarn.lock

@@ -14330,6 +14330,13 @@ use-sidecar@^1.1.2:
     detect-node-es "^1.1.0"
     tslib "^2.0.0"
 
+usehooks-ts@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/usehooks-ts/-/usehooks-ts-3.1.0.tgz#156119f36efc85f1b1952616c02580f140950eca"
+  integrity sha512-bBIa7yUyPhE1BCc0GmR96VU/15l/9gP1Ch5mYdLcFBaFGQsdmXkvjV0TtOqW1yUd6VjIwDunm+flSciCQXujiw==
+  dependencies:
+    lodash.debounce "^4.0.8"
+
 util-deprecate@^1.0.1, util-deprecate@^1.0.2, util-deprecate@~1.0.1:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/util-deprecate/-/util-deprecate-1.0.2.tgz#450d4dc9fa70de732762fbd2d4a28981419a0ccf"