Menu mobile

Author: pintoderian

app/components/header/_children/menu.js

@@ -5,7 +5,7 @@ import { useMenuStore } from '@/store/menu';
 import Link from 'next/link';
 import { useCallback } from 'react';
 
-const Menu = ({ className = 'flex-col md:flex-row' }) => {
+const Menu = ({ className }) => {
   const { active, setActive } = useMenuStore();
   const { translate } = useTranslate();
 
@@ -19,7 +19,7 @@ const Menu = ({ className = 'flex-col md:flex-row' }) => {
   );
 
   return (
-    <ul className={`flex gap-4 ${className}`}>
+    <ul className={`gap-4 ${className}`}>
       <li className={activeClass('about')}>
         <Link href="#about" onClick={() => setActive('about')}>
           {translate('about')}

app/components/header/index.js

@@ -1,14 +1,36 @@
 'use client';
 
+import { useCallback, useState } from 'react';
 import BtnLanguage from './_children/btn-language';
 import BtnTheme from './_children/btn-theme';
 import Menu from './_children/menu';
+import { IconMenu } from '../icons';
 
 const Header = () => {
+  const [openMenu, setOpenMenu] = useState(false);
+  const [classMenu, setClassMenu] = useState('hidden');
+
+  const handleMenu = useCallback(() => {
+    setOpenMenu(!openMenu);
+    if (openMenu) {
+      setClassMenu(
+        'flex transition-all absolute top-14 bg-gray-200 dark:bg-neutral-800 p-4 rounded-lg z-50'
+      );
+    } else {
+      setClassMenu('hidden');
+    }
+  }, [openMenu, setClassMenu]);
+
   return (
     <header className="flex items-center justify-between flex-row w-full py-4 border-b border-neutral-100 dark:border-neutral-800">
-      <nav className="w-8/12">
-        <Menu />
+      <nav className="w-8/12 relative">
+        <button
+          className="bg-gray-200 rounded-lg dark:bg-neutral-800 text-sm px-1.5 py-1.5 hover:ring-2 ring-gray-300 transition-all block lg:hidden"
+          onClick={handleMenu}
+        >
+          <IconMenu size={20} />
+        </button>
+        <Menu className={`${classMenu} lg:flex flex-col md:flex-row`} />
       </nav>
       <div className="btn-actions flex flex-row justify-end gap-4 w-4/12">
         <BtnLanguage />

app/components/sidebar.js

@@ -34,7 +34,7 @@ const Sidebar = () => {
             </button>
             {openMenu && (
               <div className="absolute top-14 bg-gray-200 dark:bg-neutral-800 p-4 rounded-lg">
-                <Menu className="flex-col" />
+                <Menu className="flex flex-col" />
               </div>
             )}
           </div>