Fix Mobile Nav

components/button.tsx

@@ -1,3 +1,5 @@
+import { CSSProperties } from 'react'
+
 import clsx from 'clsx'
 
 interface buttonProps {
@@ -6,6 +8,7 @@ interface buttonProps {
   variant?: 'primary' | 'secondary' | 'ghost' | 'outline'
   icon?: React.ReactNode
   className?: string
+  style?: CSSProperties
   disabled?: boolean
   ref?: React.ForwardedRef<HTMLButtonElement>
 }
@@ -16,14 +19,15 @@ export const Button = ({
   variant = 'primary',
   icon,
   className,
+  style,
   disabled,
   ref,
   ...props
 }: buttonProps) => {
   const variantCls = {
-    primary: 'text-white bg-primary hover:opacity-75',
-    secondary: 'text-black bg-zinc-100 hover:opacity-75',
-    ghost: 'text-black hover:bg-zinc-100 hover:opacity-75',
+    primary: 'text-white bg-primary sm:hover:opacity-75',
+    secondary: 'text-black bg-zinc-100 sm:hover:opacity-75',
+    ghost: 'text-black hover:bg-zinc-100 sm:hover:opacity-75',
     outline:
       'text-black bg-white border-2 border-zinc-400 disabled:hover:border-zinc-400 sm:hover:border-primary',
   }[variant]
@@ -39,6 +43,7 @@ export const Button = ({
         variantCls,
         className
       )}
+      style={style}
       {...props}
     >
       {label}

components/mobile-nav.tsx

@@ -1,11 +1,14 @@
 'use client'
 
 import { useState } from 'react'
-import Image from 'next/image'
 
+import { Button } from '@/components/button'
 import { Modal } from '@/components//modal/modal'
 import { NavDropdown } from '@/components/nav-dropdown'
 
+import CrossIcon from '@/public/cross.svg'
+import HamBurgerIcon from '@/public/hamburger.svg'
+
 import { MOBILE_NAV_ITEMS } from '@/constants/nav-items'
 
 export const MobileNav = () => {
@@ -13,18 +16,12 @@ export const MobileNav = () => {
 
   return (
     <>
-      <button
-        className="w-12 h-12 flex items-center justify-center rounded-md"
+      <Button
+        icon={isOpen ? <CrossIcon /> : <HamBurgerIcon />}
         onClick={() => setIsOpen(!isOpen)}
+        className="w-12 h-12 rounded-md px-1"
         style={{ background: isOpen ? '#000' : '#f4f4f5' }}
-      >
-        <Image
-          alt=""
-          src={isOpen ? '/cross.svg' : '/hamburger.svg'}
-          width={24}
-          height={24}
-        />
-      </button>
+      />
 
       <Modal isOpen={isOpen} close={() => setIsOpen(false)}>
         <div className="w-full h-[calc(100vh-144px)] mt-36 flex sm:hidden bg-white pointer-events-auto border-t border-zinc-100 border animation-slide-from-right overflow-auto">