dilon656/problemsolver-hub

1import React, { useState } from 'react';2import { Link } from 'react-router-dom';3 4const Navbar = () => {5  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);6 7  return (8    <nav className="py-4 px-6 border-b border-gray-800 bg-gray-900">9      <div className="container mx-auto flex justify-between items-center">10        <Link to="/" className="flex items-center">11          <span className="ml-2 text-xl font-bold text-blue-500">Scope</span>12        </Link>13        14        <div className="hidden md:flex space-x-8">15          <Link to="/" className="text-white hover:text-blue-500 transition-colors">Home</Link>16          <Link to="/browse" className="text-gray-300 hover:text-blue-500 transition-colors">Browse</Link>17          <Link to="/post-problem" className="text-gray-300 hover:text-blue-500 transition-colors">Post Problem</Link>18        </div>19        20        <div className="flex items-center space-x-4">21          <Link to="/login" className="text-gray-300 hover:text-white transition-colors">Login</Link>22          <Link to="/signup" className="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-full transition-colors">Sign Up</Link>23          24          <button 25            className="md:hidden p-2 rounded-full hover:bg-gray-700"26            onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}27          >28            <svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">29              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 12h16M4 18h16" />30            </svg>31          </button>32        </div>33      </div>34      35      {/* Mobile menu */}36      {isMobileMenuOpen && (37        <div className="md:hidden mt-4 pb-4 px-6">38          <Link to="/" className="block py-2 text-white">Home</Link>39          <Link to="/browse" className="block py-2 text-gray-300">Browse</Link>40          <Link to="/post-problem" className="block py-2 text-gray-300">Post Problem</Link>41        </div>42      )}43    </nav>44  );45};46 47export default Navbar;