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>
     </>
   );

package.json

@@ -14,7 +14,8 @@
     "classnames": "^2.3.1",
     "next": "12.1.0",
     "react": "17.0.2",
-    "react-dom": "17.0.2"
+    "react-dom": "17.0.2",
+    "react-icons": "^4.3.1"
   },
   "devDependencies": {
     "@types/node": "17.0.21",

styles/globals.css

@@ -15,7 +15,7 @@ font-family: 'Poppins', sans-serif;
 
 @layer base {
   body {
-    @apply bg-bluish-gray dark:bg-rua-gray-900 dark:text-gray-200;
+    @apply text-gray-600 bg-bluish-gray dark:bg-rua-gray-900 dark:text-gray-200 font-Poppins;
   }
 
   img,

yarn.lock

@@ -2399,6 +2399,11 @@ react-dom@17.0.2:
     object-assign "^4.1.1"
     scheduler "^0.20.2"
 
+react-icons@^4.3.1:
+  version "4.3.1"
+  resolved "https://registry.npmmirror.com/react-icons/-/react-icons-4.3.1.tgz#2fa92aebbbc71f43d2db2ed1aed07361124e91ca"
+  integrity sha512-cB10MXLTs3gVuXimblAdI71jrJx8njrJZmNMEMC+sQu5B/BIOmlsAjskdqpn81y8UBVEGuHODd7/ci5DvoSzTQ==
+
 react-is@^16.13.1:
   version "16.13.1"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"