migrate nav to tailwind and new components

pettinarip · pettinarip · commit f8e42bdecd3c · 2024-08-14T16:10:02.000+02:00
diff --git a/src/components/Nav/Desktop/index.tsx b/src/components/Nav/Desktop/index.tsx
@@ -3,14 +3,16 @@ import { useRouter } from "next/router"
 import { useTranslation } from "next-i18next"
 import { BsTranslate } from "react-icons/bs"
 import { MdBrightness2, MdWbSunny } from "react-icons/md"
-import { HStack, useColorModeValue, useEventListener } from "@chakra-ui/react"
 
-import { IconButton } from "@/components/Buttons"
 import LanguagePicker from "@/components/LanguagePicker"
 import { Button } from "@/components/ui/buttons/Button"
+import { HStack } from "@/components/ui/flex"
 
 import { DESKTOP_LANGUAGE_BUTTON_NAME } from "@/lib/constants"
 
+import useColorModeValue from "@/hooks/useColorModeValue"
+import { useEventListener } from "@/hooks/useEventListener"
+
 type DesktopNavMenuProps = {
   toggleColorMode: () => void
 }
@@ -20,20 +22,12 @@ const DesktopNavMenu = ({ toggleColorMode }: DesktopNavMenuProps) => {
   const { locale } = useRouter()
   const languagePickerRef = useRef<HTMLButtonElement>(null)
 
-  const ThemeIcon = useColorModeValue(<MdBrightness2 />, <MdWbSunny />)
+  const ThemeIcon = useColorModeValue(MdBrightness2, MdWbSunny)
   const themeIconAriaLabel = useColorModeValue(
     "Switch to Dark Theme",
     "Switch to Light Theme"
   )
 
-  const desktopHoverFocusStyles = {
-    "& > svg": {
-      transform: "rotate(10deg)",
-      color: "primary.hover",
-      transition: "transform 0.5s, color 0.2s",
-    },
-  }
-
   /**
    * Adds a keydown event listener to toggle color mode (ctrl|cmd + \)
    * or open the language picker (\).
@@ -52,17 +46,16 @@ const DesktopNavMenu = ({ toggleColorMode }: DesktopNavMenuProps) => {
   })
 
   return (
-    <HStack hideBelow="md" gap="0">
-      <IconButton
-        icon={ThemeIcon}
+    <HStack className="hidden gap-0 md:flex">
+      <Button
         aria-label={themeIconAriaLabel}
         variant="ghost"
         isSecondary
-        px={{ base: "2", xl: "3" }}
-        _hover={desktopHoverFocusStyles}
-        _focus={desktopHoverFocusStyles}
+        className="px-2 xl:px-3 [&>svg]:transition-all [&>svg]:duration-500 [&>svg]:hover:rotate-12 [&>svg]:hover:text-primary-hover"
         onClick={toggleColorMode}
-      />
+      >
+        <ThemeIcon />
+      </Button>
 
       {/* Locale-picker menu */}
       <LanguagePicker>
diff --git a/src/components/Nav/index.tsx b/src/components/Nav/index.tsx
@@ -1,14 +1,15 @@
 import { lazy, Suspense, useRef } from "react"
 import { useTranslation } from "next-i18next"
-import { Box, Flex, Hide, Show } from "@chakra-ui/react"
+import { MdSearch } from "react-icons/md"
 
 import { EthHomeIcon } from "@/components/icons"
-import { BaseLink } from "@/components/Link"
 import Search from "@/components/Search"
 
 import { isDesktop } from "@/lib/utils/isDesktop"
 
-import { NAV_PY } from "@/lib/constants"
+import SearchButton from "../Search/SearchButton"
+import { Button } from "../ui/buttons/Button"
+import { BaseLink } from "../ui/Link"
 
 import DesktopNavMenu from "./Desktop"
 import Menu from "./Menu"
@@ -29,73 +30,63 @@ const Nav = () => {
   const isDesktopFlag = isDesktop()
 
   return (
-    <Box position="sticky" top={0} zIndex="sticky" width="full">
-      <Flex
+    <div className="sticky top-0 z-sticky w-full">
+      <nav
         ref={navWrapperRef}
-        as="nav"
+        className="flex h-19 justify-center border-b border-background-highlight bg-background px-4 py-4 xl:px-8"
         aria-label={t("nav-primary")}
-        bg="background.base"
-        borderBottom="1px"
-        borderColor="rgba(0, 0, 0, 0.1)"
-        height="4.75rem"
-        justifyContent="center"
-        py={NAV_PY}
-        px={{ base: 4, xl: 8 }}
       >
-        <Flex
-          alignItems={{ base: "center", md: "normal" }}
-          justifyContent={{ base: "space-between", md: "normal" }}
-          width="full"
-          maxW="container.2xl"
-        >
+        <div className="flex w-full max-w-screen-2xl items-center justify-between md:items-stretch md:justify-normal">
           <BaseLink
             href="/"
             aria-label={t("home")}
-            display="inline-flex"
-            alignItems="center"
-            textDecor="none"
+            className="inline-flex items-center no-underline"
           >
             <EthHomeIcon opacity={0.85} _hover={{ opacity: 1 }} />
           </BaseLink>
           {/* Desktop */}
-          <Flex
-            w="full"
-            justifyContent={{ base: "flex-end", md: "space-between" }}
-            ms={{ base: 3, xl: 8 }}
-          >
+          <div className="ms-3 flex w-full justify-end md:justify-between xl:ms-8">
             {/* avoid rendering desktop Menu version on mobile */}
-
             {isClient && isDesktopFlag ? (
               <Menu className="hidden md:block" sections={linkSections} />
             ) : (
-              <Box />
+              <div />
             )}
 
-            <Flex alignItems="center" /*  justifyContent="space-between" */>
+            <div className="flex items-center">
               {/* Desktop */}
-              {/* avoid rendering desktop menu version on mobile */}
-              <Show above="md">
-                <Search {...searchModalDisclosure} />
+              <div className="hidden md:flex">
+                <Search {...searchModalDisclosure}>
+                  <SearchButton />
+                </Search>
                 <DesktopNavMenu toggleColorMode={toggleColorMode} />
-              </Show>
+              </div>
 
-              <Hide above="md">
+              <div className="flex md:hidden">
                 {/* Mobile */}
                 {/* use Suspense to display the Search & the Menu at the same time */}
                 <Suspense>
-                  <Search {...searchModalDisclosure} />
+                  <Search {...searchModalDisclosure}>
+                    <Button
+                      className="px-2 transition-transform duration-200 ease-in-out hover:rotate-6 hover:text-primary"
+                      variant="ghost"
+                      isSecondary
+                    >
+                      <MdSearch />
+                    </Button>
+                  </Search>
                   <MobileNavMenu
                     toggleColorMode={toggleColorMode}
                     linkSections={linkSections}
                     toggleSearch={searchModalDisclosure.onOpen}
                   />
                 </Suspense>
-              </Hide>
-            </Flex>
-          </Flex>
-        </Flex>
-      </Flex>
-    </Box>
+              </div>
+            </div>
+          </div>
+        </div>
+      </nav>
+    </div>
   )
 }
 
diff --git a/src/components/Search/SearchButton.tsx b/src/components/Search/SearchButton.tsx
@@ -1,5 +1,5 @@
 import * as React from "react"
-import { useTranslation } from "react-i18next"
+import { useTranslation } from "next-i18next"
 import { DocSearchButton } from "@docsearch/react"
 
 import { Button, type ButtonProps } from "../ui/buttons/Button"
diff --git a/src/components/Search/index.tsx b/src/components/Search/index.tsx
@@ -2,28 +2,24 @@ import { forwardRef, useRef } from "react"
 import dynamic from "next/dynamic"
 import { useRouter } from "next/router"
 import { useTranslation } from "next-i18next"
-import { MdSearch } from "react-icons/md"
 import { useDocSearchKeyboardEvents } from "@docsearch/react"
 import { DocSearchHit } from "@docsearch/react/dist/esm/types"
 import { useComposedRefs } from "@radix-ui/react-compose-refs"
 import * as Portal from "@radix-ui/react-portal"
+import { Slot } from "@radix-ui/react-slot"
 
 import { trackCustomEvent } from "@/lib/utils/matomo"
 import { sanitizeHitTitle } from "@/lib/utils/sanitizeHitTitle"
 import { sanitizeHitUrl } from "@/lib/utils/url"
 
-import { Button } from "../ui/buttons/Button"
-
-import SearchButton from "./SearchButton"
-
 import { type useDisclosure } from "@/hooks/useDisclosure"
 
 const SearchModal = dynamic(() => import("./SearchModal"))
 
-type Props = ReturnType<typeof useDisclosure>
+type Props = ReturnType<typeof useDisclosure> & { children?: React.ReactNode }
 
 const Search = forwardRef<HTMLButtonElement, Props>(
-  ({ isOpen, onOpen, onClose }, ref) => {
+  ({ isOpen, onOpen, onClose, children }, ref) => {
     const { locale } = useRouter()
     const searchButtonRef = useRef<HTMLButtonElement>(null)
     const mergedButtonRefs = useComposedRefs(ref, searchButtonRef)
@@ -43,38 +39,20 @@ const Search = forwardRef<HTMLButtonElement, Props>(
 
     return (
       <>
-        <div className="hidden xl:block">
-          <SearchButton
-            ref={mergedButtonRefs}
-            onClick={() => {
-              onOpen()
-              trackCustomEvent({
-                eventCategory: "nav bar",
-                eventAction: "click",
-                eventName: "search open",
-              })
-            }}
-          />
-        </div>
-        <div className="block xl:hidden">
-          <Button
-            ref={mergedButtonRefs}
-            className="px-2 transition-transform duration-200 ease-in-out hover:rotate-6 hover:text-primary"
-            variant="ghost"
-            isSecondary
-            onClick={() => {
-              onOpen()
-              trackCustomEvent({
-                eventCategory: "nav bar",
-                eventAction: "click",
-                eventName: "search open",
-              })
-            }}
-            aria-label={t("aria-toggle-search-button")}
-          >
-            <MdSearch />
-          </Button>
-        </div>
+        <Slot
+          ref={mergedButtonRefs}
+          aria-label={t("aria-toggle-search-button")}
+          onClick={() => {
+            onOpen()
+            trackCustomEvent({
+              eventCategory: "nav bar",
+              eventAction: "click",
+              eventName: "search open",
+            })
+          }}
+        >
+          {children}
+        </Slot>
         <Portal.Root>
           {isOpen && (
             <SearchModal
