53 lines
1.5 KiB
TypeScript
53 lines
1.5 KiB
TypeScript
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>
|
|
)
|
|
}
|