Function Navbar

client/src/component/Navbar.jsx:14–485

(props)

import axios from "axios";

function Navbar(props) {
  const { showAlert, mode } = props;
  const navigate = useNavigate();
  const location = useLocation();

  const { currentUser, userLoggedIn, setUserLoggedIn } = useAuth();
  // eslint-disable-next-line
  const [isScrolled, setIsScrolled] = useState(false); // State to keep track of whether page has been scrolled

  // eslint-disable-next-line
  const [isOpen, setIsOpen] = useState(false);
  // State to control the sidebar visibility
  const [isSidebarOpen, setIsSidebarOpen] = useState(false);

  const toggleSidebar = (e) => {
    e.preventDefault();
    setIsSidebarOpen((prev) => !prev);
    document.body.classList.toggle("no-scroll", !isSidebarOpen);
  };

  const style = { color: "white", fontSize: "1.5em" };

  useEffect(() => {
    const handleResize = () => {
      if (window.innerWidth > 1280) {
        // Adjust for your breakpoint
        setIsSidebarOpen(false);
        document.body.classList.remove("no-scroll");
      }
    };

    window.addEventListener("resize", handleResize);
    return () => window.removeEventListener("resize", handleResize);
  }, []);

  useEffect(() => {
    window.onscroll = function () {
      myFunction();
    };

    const navbar = document.getElementById("navbar");
    const sticky = navbar.offsetTop;

    function myFunction() {
      if (window.pageYOffset >= sticky) {
        setIsScrolled(true);
        navbar.classList.add("sticky");
      } else {
        setIsScrolled(false);
        navbar.classList.remove("sticky");
      }
    }

    if (window.pageYOffset >= sticky) {
      setIsScrolled(true);
      navbar.classList.add("sticky");
    }