创建导航栏页面

import React, { useState } from 'react';
import './App.css';

function App() {
  const [isNavOpen, setIsNavOpen] = useState(false);

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

  return (
    <div className="App">
      <nav className="bg-blue-800 p-4 text-white flex justify-between items-center">
        <div className="text-xl font-bold">MyWebsite</div>
        <div className="cursor-pointer" onClick={toggleNav}>
          <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M4 6h16M4 12h16m-7 6h7"></path>
          </svg>
        </div>
        {isNavOpen && (
          <div className="absolute top-16 right-0 bg-blue-700 w-48 py-2 rounded-lg shadow-lg">
            <a href="#home" className="block px-4 py-2 text-white hover:bg-blue-600">Home</a>
            <a href="#about" className="block px-4 py-2 text-white hover:bg-blue-600">About</a>
            <a href="#services" className="block px-4 py-2 text-white hover:bg-blue-600">Services</a>
            <a href="#contact" className="block px-4 py-2 text-white hover:bg-blue-600">Contact</a>
          </div>
        )}
      </nav>
      <main className="p-4">
        <h1 className="text-3xl font-bold text-gray-800">Welcome to MyWebsite</h1>
        <p className="text-gray-600 mt-2">Explore our services and learn more about us.</p>
      </main>
    </div>
  );
}

export default App;