chore: add main-nav component

I choose to implement main-nav paths manually instead of fetching
them from GraphQL to ensure functional navigation without JS.

1 files changed, 71 insertions, 0 deletions

diff --git a/src/components/MainNav/MainNav.tsx b/src/components/MainNav/MainNav.tsx
new file mode 100644
index 0000000..3140e64
--- /dev/null
+++ b/src/components/MainNav/MainNav.tsx
@@ -0,0 +1,71 @@
+import { useState } from 'react';
+import Link from 'next/link';
+import { t } from '@lingui/macro';
+import { HamburgerIcon } from '@components/Icons';
+import { mainNav } from '@config/nav';
+import ArticlesIcon from '@assets/images/icon-articles.svg';
+import ContactIcon from '@assets/images/icon-contact.svg';
+import CVIcon from '@assets/images/icon-cv.svg';
+import HomeIcon from '@assets/images/icon-home.svg';
+import styles from './MainNav.module.scss';
+
+const MainNav = () => {
+  const [isChecked, setIsChecked] = useState<boolean>(false);
+
+  const getIcon = (id: string) => {
+    switch (id) {
+      case 'home':
+        return <HomeIcon />;
+      case 'blog':
+        return <ArticlesIcon />;
+      case 'contact':
+        return <ContactIcon />;
+      case 'cv':
+        return <CVIcon />;
+      default:
+        break;
+    }
+  };
+
+  const navItems = mainNav.map((item) => {
+    return (
+      <li key={item.id} className={styles.item}>
+        <Link href={item.slug}>
+          <a className={styles.link}>
+            <span className={styles.icon}>{getIcon(item.id)}</span>
+            <span>{item.name}</span>
+          </a>
+        </Link>
+      </li>
+    );
+  });
+
+  return (
+    <div className={styles.wrapper}>
+      <input
+        type="checkbox"
+        name="main-nav__checkbox"
+        id="main-nav__checkbox"
+        aria-labelledby="main-nav-toggle"
+        className={styles.checkbox}
+        checked={isChecked}
+        onChange={() => setIsChecked(!isChecked)}
+      />
+      <label
+        htmlFor="main-nav__checkbox"
+        id="main-nav-toggle"
+        className={styles.label}
+      >
+        <HamburgerIcon isActive={isChecked} />
+        <span className="screen-reader-text">
+          {isChecked ? t`Close menu` : t`Open menu`}
+        </span>
+      </label>
+      <nav className={styles.nav}>
+        <ul className={styles.list}>{navItems}</ul>
+      </nav>
+    </div>
+  );
+};
+
+export default MainNav;