78 lines
2.6 KiB
TypeScript
78 lines
2.6 KiB
TypeScript
import { useState } from "react";
|
|
import { Link } from "@tanstack/react-router";
|
|
import Logo from "/MAV.svg";
|
|
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
|
import { faBars } from "@fortawesome/free-solid-svg-icons";
|
|
|
|
const Header = () => {
|
|
const [isMenuOpen, setIsMenuOpen] = useState(false);
|
|
const toggleMenu = () => {
|
|
setIsMenuOpen(!isMenuOpen);
|
|
};
|
|
return (
|
|
<nav className="bg-[#253445] p-4 flex border-b border-gray-500 justify-between items-center md:flex-row flex-col">
|
|
<div className="flex flex-row justify-between w-full items-center">
|
|
<div className="w-28">
|
|
<Link to={"/"} onClick={() => setIsMenuOpen(false)}>
|
|
<img src={Logo} alt="Logo" width={150} height={150} />
|
|
</Link>
|
|
</div>
|
|
|
|
<div className="hover:cursor-pointer md:hidden" onClick={toggleMenu}>
|
|
<FontAwesomeIcon icon={faBars} />
|
|
</div>
|
|
</div>
|
|
|
|
<div className="md:flex hidden gap-4 text-lg items-center">
|
|
<Link
|
|
to="/"
|
|
className="[&.active]:font-bold [&.active]:bg-gray-700 p-2 rounded-lg flex items-center gap-2 hover:bg-gray-700"
|
|
>
|
|
{/* <FontAwesomeIcon icon={faGaugeHigh} /> */}
|
|
Dashboard
|
|
</Link>
|
|
|
|
<Link
|
|
to="/baywatch"
|
|
className="[&.active]:font-bold [&.active]:bg-gray-700 p-2 rounded-lg flex items-center gap-2 hover:bg-gray-700"
|
|
>
|
|
Cameras
|
|
</Link>
|
|
<Link
|
|
to="/output"
|
|
className="[&.active]:font-bold [&.active]:bg-gray-700 p-2 rounded-lg flex items-center gap-2 hover:bg-gray-700"
|
|
>
|
|
Output
|
|
</Link>
|
|
<Link
|
|
to="/settings"
|
|
className="[&.active]:font-bold [&.active]:bg-gray-700 p-2 rounded-lg flex items-center gap-2 hover:bg-gray-700"
|
|
>
|
|
Settings
|
|
</Link>
|
|
</div>
|
|
{/* mobile menu */}
|
|
{isMenuOpen && (
|
|
<div className="md:hidden flex flex-col w-full mt-4 gap-4 text-lg items-end">
|
|
<Link to="/" className="" onClick={toggleMenu}>
|
|
{/* <FontAwesomeIcon icon={faGaugeHigh} /> */}
|
|
Dashboard
|
|
</Link>
|
|
<Link to="/baywatch" className="" onClick={toggleMenu}>
|
|
{/* <FontAwesomeIcon icon={faGaugeHigh} /> */}
|
|
Cameras
|
|
</Link>
|
|
<Link to="/output" className="" onClick={toggleMenu}>
|
|
Output
|
|
</Link>
|
|
<Link to="/settings" className="" onClick={toggleMenu}>
|
|
Settings
|
|
</Link>
|
|
</div>
|
|
)}
|
|
</nav>
|
|
);
|
|
};
|
|
|
|
export default Header;
|