Untitled

import React, { useState } from 'react';
import './Navbar.css'; // Import CSS file for styling

const Navbar = () => {
  const [isOpen, setIsOpen] = useState(false);

  const toggleMenu = () => {
    setIsOpen(!isOpen);
  };

  return (
    <nav className="navbar">
      <div className="navbar-container">
        <h1 className="logo">My Website</h1>
        <div className={`nav-links ${isOpen ? 'open' : ''}`}>
          <a href="#home">Home</a>
          <a href="#about">About</a>
          <a href="#services">Services</a>
          <a href="#contact">Contact</a>
        </div>
        <div className="menu-toggle" onClick={toggleMenu}>
          <div className={`hamburger ${isOpen ? 'active' : ''}`}></div>
        </div>
      </div>
    </nav>
  );
};

export default Navbar;





/* General navbar styling */
.navbar {
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.8); /* Translucent effect */
  backdrop-filter: blur(10px); /* Makes the background slightly blurred */
  transition: background 0.3s ease;
  padding: 10px 20px;
}

.navbar-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 1200px;
  margin: auto;
}

.logo {
  font-size: 24px;
  font-weight: bold;
}

.nav-links {
  display: flex;
  gap: 20px;
}

.nav-links a {
  text-decoration: none;
  font-size: 18px;
  color: #333;
  transition: color 0.3s ease;
}

.nav-links a:hover {
  color: #007BFF;
}

/* Hamburger menu */
.menu-toggle {
  display: none;
  cursor: pointer;
}

.hamburger {
  width: 25px;
  height: 2px;
  background-color: #333;
  transition: all 0.3s ease;
}

.hamburger::before,
.hamburger::after {
  content: '';
  width: 25px;
  height: 2px;
  background-color: #333;
  position: absolute;
  transition: all 0.3s ease;
}

.hamburger::before {
  transform: translateY(-8px);
}

.hamburger::after {
  transform: translateY(8px);
}

/* Change the hamburger into an X when the menu is open */
.hamburger.active {
  transform: rotate(45deg);
}

.hamburger.active::before {
  transform: rotate(90deg);
}

.hamburger.active::after {
  transform: rotate(90deg);
}

/* Responsive styling */
@media (max-width: 768px) {
  .nav-links {
    position: absolute;
    top: 60px;
    right: 0;
    background: rgba(255, 255, 255, 0.9);
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    height: 0;
    overflow: hidden;
    transition: height 0.3s ease;
  }

  .nav-links.open {
    height: 200px;
  }

  .nav-links a {
    padding: 10px 20px;
    width: 100%;
    text-align: left;
  }

  .menu-toggle {
    display: block;
    position: relative;
    width: 30px;
    height: 20px;
  }
}