116 lines
4.1 KiB
TypeScript
116 lines
4.1 KiB
TypeScript
import React, { useState, useEffect } from "react";
|
|
|
|
const Header: React.FC = () => {
|
|
const [fix, setFix] = useState(false);
|
|
|
|
useEffect(() => {
|
|
function setFixed() {
|
|
if (window.scrollY > 0) {
|
|
setFix(true);
|
|
return;
|
|
}
|
|
setFix(false);
|
|
}
|
|
window.addEventListener("scroll", setFixed);
|
|
// Cleanup function
|
|
return () => {
|
|
window.removeEventListener("scroll", setFixed);
|
|
};
|
|
}, []);
|
|
|
|
return (
|
|
<nav className="navbar navbar-expand-lg banner">
|
|
<div className="container">
|
|
<img src="../marketing/images/logo.png" alt="logo" className="logo-1" />
|
|
<button
|
|
className="navbar-toggler"
|
|
type="button"
|
|
data-toggle="collapse"
|
|
data-target="#navbarSupportedContent"
|
|
aria-controls="navbarSupportedContent"
|
|
aria-expanded="false"
|
|
aria-label="Toggle navigation"
|
|
>
|
|
{" "}
|
|
<span className="fas fa-bars"></span>{" "}
|
|
</button>
|
|
<div
|
|
className="collapse navbar-collapse"
|
|
id="navbarSupportedContent"
|
|
>
|
|
<ul className="navbar-nav ml-auto">
|
|
<li className="nav-item">
|
|
{" "}
|
|
<a className="nav-link" data-scroll-nav="0">
|
|
Home
|
|
</a>{" "}
|
|
</li>
|
|
<li className="nav-item">
|
|
{" "}
|
|
<a
|
|
className="nav-link"
|
|
href="#"
|
|
data-scroll-nav="1"
|
|
>
|
|
About
|
|
</a>{" "}
|
|
</li>
|
|
<li className="nav-item">
|
|
{" "}
|
|
<a
|
|
className="nav-link"
|
|
href="#"
|
|
data-scroll-nav="2"
|
|
>
|
|
Features
|
|
</a>{" "}
|
|
</li>
|
|
<li className="nav-item">
|
|
{" "}
|
|
<a
|
|
className="nav-link"
|
|
href="#"
|
|
data-scroll-nav="3"
|
|
>
|
|
Team
|
|
</a>{" "}
|
|
</li>
|
|
<li className="nav-item">
|
|
{" "}
|
|
<a
|
|
className="nav-link"
|
|
href="#"
|
|
data-scroll-nav="4"
|
|
>
|
|
Testimonials
|
|
</a>{" "}
|
|
</li>
|
|
<li className="nav-item">
|
|
{" "}
|
|
<a
|
|
className="nav-link"
|
|
href="#"
|
|
data-scroll-nav="5"
|
|
>
|
|
Faq
|
|
</a>{" "}
|
|
</li>
|
|
<li className="nav-item">
|
|
{" "}
|
|
<a
|
|
className="nav-link"
|
|
href="#"
|
|
data-scroll-nav="6"
|
|
>
|
|
Contact
|
|
</a>{" "}
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
);
|
|
};
|
|
|
|
export default Header;
|