Merge pull request #13449 from ethereum/shadcn-mobile-menu

Shadcn migration - mobile menu

Author: wackerow

package.json

@@ -36,6 +36,7 @@
     "@hookform/resolvers": "^3.8.0",
     "@radix-ui/react-accordion": "^1.2.0",
     "@radix-ui/react-checkbox": "^1.1.1",
+    "@radix-ui/react-dialog": "^1.1.1",
     "@radix-ui/react-navigation-menu": "^1.2.0",
     "@radix-ui/react-popover": "^1.1.1",
     "@radix-ui/react-radio-group": "^1.2.0",
@@ -76,6 +77,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": {
@@ -124,8 +126,7 @@
     "tsconfig-paths-webpack-plugin": "4.1.0",
     "typescript": "^5.5.2",
     "unified": "^10.0.0",
-    "unist-util-visit": "^5.0.0",
-    "usehooks-ts": "^3.1.0"
+    "unist-util-visit": "^5.0.0"
   },
   "resolutions": {
     "jackspeak": "2.1.1",

src/components/FeedbackWidget/useFeedbackWidget.ts

@@ -3,7 +3,7 @@ import { useRouter } from "next/router"
 
 import { trackCustomEvent } from "@/lib/utils/matomo"
 
-import useDisclosure from "@/hooks/useDisclosure"
+import { useDisclosure } from "@/hooks/useDisclosure"
 import { useSurvey } from "@/hooks/useSurvey"
 
 export const useFeedbackWidget = () => {

src/components/Nav/Mobile/ExpandIcon.tsx

@@ -1,5 +1,4 @@
 import { motion } from "framer-motion"
-import { Icon } from "@chakra-ui/react"
 
 const expandedPathVariants = {
   closed: {
@@ -17,14 +16,9 @@ type ExpandIconProps = {
 }
 
 const ExpandIcon = ({ isOpen }: ExpandIconProps) => (
-  <Icon
+  <svg
     viewBox="0 0 24 25"
-    width={6}
-    height={6}
-    position="relative"
-    strokeWidth="2px"
-    display="inline-block"
-    stroke="currentColor"
+    className="relative inline-block h-6 w-6 stroke-current stroke-2 group-hover:text-primary-hover"
   >
     <motion.path
       variants={expandedPathVariants}
@@ -34,7 +28,7 @@ const ExpandIcon = ({ isOpen }: ExpandIconProps) => (
       stroke-width="2"
     />
     <path d="M7.375 12.5L16.625 12.5" stroke-width="2" />
-  </Icon>
+  </svg>
 )
 
 export default ExpandIcon

src/components/Nav/Mobile/FooterButton.tsx

@@ -1,23 +1,28 @@
+import { forwardRef } from "react"
 import type { IconType } from "react-icons"
-import { type ButtonProps, Icon } from "@chakra-ui/react"
 
-import { Button } from "@/components/Buttons"
+import {
+  Button,
+  type ButtonProps,
+} from "../../../../tailwind/ui/buttons/Button"
 
 type FooterButtonProps = ButtonProps & {
   icon: IconType
 }
 
-const FooterButton = ({ icon, ...props }: FooterButtonProps) => (
-  <Button
-    leftIcon={<Icon as={icon} />}
-    sx={{ span: { m: 0 } }}
-    variant="ghost"
-    flexDir="column"
-    alignItems="center"
-    color="body.base"
-    px="1"
-    {...props}
-  />
+const FooterButton = forwardRef<HTMLButtonElement, FooterButtonProps>(
+  ({ icon: Icon, children, ...props }, ref) => (
+    <Button
+      ref={ref}
+      className="flex h-fit flex-col items-center px-1 text-body"
+      variant="ghost"
+      {...props}
+    >
+      <Icon className="h-6 w-6" />
+      {children}
+    </Button>
+  )
 )
+FooterButton.displayName = "FooterButton"
 
 export default FooterButton

src/components/Nav/Mobile/FooterItemText.tsx

@@ -1,18 +1,8 @@
-import { Text } from "@chakra-ui/react"
-
 import { ChildOnlyProp } from "@/lib/types"
 
 const FooterItemText = (props: ChildOnlyProp) => (
-  <Text
-    fontSize="sm"
-    lineHeight="base"
-    fontWeight="normal"
-    letterSpacing="wider"
-    mt="2"
-    textTransform="uppercase"
-    textAlign="center"
-    opacity={0.7}
-    _hover={{ opacity: 1 }}
+  <p
+    className="mt-2 text-center text-sm font-normal uppercase leading-base tracking-wider opacity-70 hover:opacity-100"
     {...props}
   />
 )

src/components/Nav/Mobile/HamburgerButton.tsx

@@ -1,11 +1,16 @@
+import { forwardRef } from "react"
 import { motion } from "framer-motion"
 import { useTranslation } from "next-i18next"
-import { type ButtonProps, Icon } from "@chakra-ui/react"
 
-import { IconButton } from "@/components/Buttons"
+import { cn } from "@/lib/utils/cn"
 
 import { HAMBURGER_BUTTON_ID } from "@/lib/constants"
 
+import {
+  Button,
+  type ButtonProps,
+} from "../../../../tailwind/ui/buttons/Button"
+
 const hamburgerSvg =
   "M 2 13 l 10 0 l 0 0 l 10 0 M 4 19 l 8 0 M 12 19 l 8 0 M 2 25 l 10 0 l 0 0 l 10 0"
 const glyphSvg =
@@ -18,57 +23,36 @@ const hamburgerVariants = {
 
 type HamburgerProps = ButtonProps & {
   isMenuOpen: boolean
-  onToggle: () => void
 }
 
-const HamburgerButton = ({
-  isMenuOpen,
-  onToggle,
-  ...props
-}: HamburgerProps) => {
-  const { t } = useTranslation("common")
-
-  return (
-    <IconButton
-      id={HAMBURGER_BUTTON_ID}
-      onClick={onToggle}
-      aria-label={t("aria-toggle-search-button")}
-      variant="ghost"
-      isSecondary
-      px={0}
-      color="body.base"
-      icon={
-        <Icon
+const HamburgerButton = forwardRef<HTMLButtonElement, HamburgerProps>(
+  ({ isMenuOpen, className, ...props }, ref) => {
+    const { t } = useTranslation("common")
+
+    return (
+      <Button
+        ref={ref}
+        id={HAMBURGER_BUTTON_ID}
+        aria-label={t("aria-toggle-search-button")}
+        className={cn("px-2 py-0 text-body", className)}
+        variant="ghost"
+        {...props}
+      >
+        <svg
           viewBox="0 0 24 40"
-          pointerEvents={isMenuOpen ? "none" : "auto"}
-          mx={0.5}
-          width={6}
-          height={10}
-          position="relative"
-          strokeWidth="2px"
-          _hover={{
-            color: "primary.base",
-            "& > path": {
-              stroke: "primary.base",
-            },
-          }}
-          sx={{
-            "& > path": {
-              stroke: "text",
-              fill: "none",
-            },
-          }}
+          className="relative 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"}
           />
-        </Icon>
-      }
-      {...props}
-    />
-  )
-}
+        </svg>
+      </Button>
+    )
+  }
+)
+
+HamburgerButton.displayName = "HamburgerButton"
 
 export default HamburgerButton