BayIQ-UI/src/ui/Header.tsx

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="/cameras"
          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="/cameras" 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;