thenavisapp/src/components/Header.js

This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).

import React, { useState } from 'react';
import { Link } from 'react-router-dom';
import './Header.css';

const Header = () => {
  const [isNavOpen, setIsNavOpen] = useState(false);

  const toggleNav = () => {
    setIsNavOpen(!isNavOpen);
  };

  return (
    <header className="tm-navbar">
      <div className="logo">
        <Link to="/">The_NAVIS_App</Link>
      </div>
      <nav className={isNavOpen ? 'nav-open' : ''}>
        <div className="nav-toggle" onClick={toggleNav}>
          <span></span>
          <span></span>
          <span></span>
        </div>
        <ul>
          <li className="tm-nav-link">
            <Link to="/">Home</Link>
          </li>
          <li className="tm-nav-link">
            <Link to="/about">About</Link>
          </li>
          <li className="tm-nav-link">
            <Link to="/contact">Contact</Link>
          </li>
          {/* Add more navigation items as needed */}
        </ul>
      </nav>
    </header>
  );
};

export default Header;