Add react-icons

* add text menu

components/NavBar.tsx

@@ -1,17 +1,39 @@
 import cn from 'classnames';
 import Link from 'next/link';
-import { FC } from 'react';
+import { FC, useState } from 'react';
+import { FiMenu } from 'react-icons/fi';
+
+const txtMenu = [
+  {
+    id: 0,
+    name: 'Home',
+    path: '/',
+  },
+  {
+    id: 1,
+    name: 'Blog',
+    path: '/blog',
+  },
+];
 
 const HeadBar: FC = () => {
+  const [showMenu, setShowMenu] = useState(false);
+
   return (
     <>
-      <header className="flex justify-between max-w-6xl px-6 py-6 mx-auto">
+      <header
+        className={cn(
+          'flex justify-between mx-auto',
+          'max-w-6xl p-6',
+          'items-center relative'
+        )}
+      >
         <Link href="/" passHref>
           <a
             href=""
             className={cn(
               'font-semibold font-Aref-Ruqaa',
-              'text-gray-600 text-3xl tracking-widest',
+              'text-3xl tracking-widest',
               'select-none'
             )}
           >
@@ -19,7 +41,35 @@ const HeadBar: FC = () => {
           </a>
         </Link>
 
-        <div></div>
+        <FiMenu
+          className="cursor-pointer w-7 h-7 md:hidden"
+          onClick={() => setShowMenu(!showMenu)}
+        />
+        <nav
+          className={cn(
+            'text-lg md:block',
+            'bg-white rounded-md',
+            'absolute md:static',
+            'p-5 right-6 top-14',
+            'md:bg-transparent md:p-[unset]',
+            'md:right-[unset] md:top-[unset]',
+            'w-1/3 md:w-auto',
+            {
+              hidden: !showMenu,
+            }
+          )}
+        >
+          <ul className={cn('flex flex-col', 'md:flex-row')}>
+            {txtMenu.map((m) => (
+              <li
+                key={m.id}
+                className={cn('mb-2 last:mb-0 md:mb-0', 'md:mr-4 md:last:mr-0')}
+              >
+                <Link href={m.path}>{m.name}</Link>
+              </li>
+            ))}
+          </ul>
+        </nav>
       </header>
     </>
   );