Handle Dark Mode Styling for Header Component

components/mobile-nav.tsx

@@ -1,6 +1,7 @@
 'use client'
 
 import { useState } from 'react'
+import clsx from 'clsx'
 
 import { Button } from '@/components/button'
 import { Modal } from '@/components//modal/modal'
@@ -19,19 +20,21 @@ export const MobileNav = () => {
       <Button
         icon={isOpen ? <CrossIcon /> : <HamBurgerIcon />}
         onClick={() => setIsOpen(!isOpen)}
-        className="w-12 h-12 rounded-md !px-1"
-        style={{ background: isOpen ? '#000' : '#f4f4f5' }}
+        className={clsx(
+          'w-12 h-12 rounded-md !px-1',
+          isOpen ? '!bg-black dark:!bg-white/20' : '!bg-[#f4f4f5]'
+        )}
       />
 
       <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">
+        <div className="w-full h-[calc(100vh-144px)] mt-36 flex sm:hidden bg-white dark:bg-zinc-900 pointer-events-auto border-t border-t-zinc-100 dark:border-t-zinc-700 overflow-y-auto">
           <nav className="relative w-full">
             <ul className="w-full flex flex-col items-end justify-center gap-2 p-4 pb-24">
               {MOBILE_NAV_ITEMS.map((navItem, i) => (
                 <NavDropdown key={i} {...navItem} />
               ))}
             </ul>
-            <div className="fixed -bottom-2 left-0 w-full h-32 bg-gradient-to-b from-white/75 to-white pointer-events-none blur-[6px]" />
+            <div className="fixed -bottom-2 left-0 w-full h-32 bg-gradient-to-b from-white/75 dark:from-zinc-900/75 to-white dark:to-zinc-900 pointer-events-none blur-[6px]" />
           </nav>
         </div>
       </Modal>