id

absolete_frontend/src/components/navbar/HomeNav.tsx

@@ -0,0 +1,52 @@
+import React, { useState, useContext } from "react"
+import styles from "./HomeNav.module.css"
+import { FaBars, FaChevronDown } from "react-icons/fa";
+
+import { UserContext } from "../../context/UserContext";
+
+export default function HomeNav() {
+  const [navOpen, setNavOpen] = useState(false)
+
+  const toggleNav = () => setNavOpen((prev) => !prev)
+
+  const { user } = useContext(UserContext);
+
+  return (
+    <nav className={styles.nav}>
+      <FaBars
+        className={`${styles.toggle} ${navOpen ? styles.toggleRotated : ""}`}
+        onClick={toggleNav}
+        aria-label="Toggle navigation"
+        aria-expanded={navOpen}
+      />
+
+      <ul className={`${styles.navList} ${navOpen ? styles.open : ""}`}>
+        <li id="nav-logo" className={styles.logo}>
+          <span>vontor.cz</span>
+        </li>
+        <li>
+          <a href="/">Home</a>
+        </li>
+        <li>
+          <a href="#portfolio">Portfolio</a>
+        </li>
+        <li className={styles.hasSubmenu}>
+          <details>
+            <summary>
+              Services
+              <FaChevronDown className={`${styles.caret} ml-2 inline-block`} aria-hidden="true" />
+            </summary>
+            <ul className={styles.submenu}>
+              <li><a href="#web">Web development</a></li>
+              <li><a href="#integration">Integrations</a></li>
+              <li><a href="#support">Support</a></li>
+            </ul>
+          </details>
+        </li>
+        <li>
+          <a href="#contactme-form">Contact me</a>
+        </li>
+      </ul>
+    </nav>
+  )
+}