Encountered a strange minor bug while working on my project. The issue is related to the functionality of clicking on the .nav li element to close the navbar. Surprisingly, this behavior works flawlessly when implemented in pure HTML, CSS, and JS, but fails to operate as expected in a React environment. Below is the React code snippet:
import React from 'react';
import Nav from './javascripts/Navigation';
import Ham from './javascripts/Hamburger';
import { Link } from 'react-scroll';
import '../styles/Navbar.scss';
const Navbar = () => {
React.useEffect(() => {
Nav();
Ham();
}, []);
return (
<nav className="nav-container">
<ul className="nav">
<div id="nav-icon">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
<li>
<Link
to="container"
smooth={true}
duration={500}
offset={-107}
>
Home
</Link>
</li>
<li>
<Link
to="abt-container"
smooth={true}
duration={500}
offset={-107}
>
About
</Link>
</li>
</ul>
</nav>
);
};
export default Navbar;
SCSS
$w: #fff;
%nav {
position: sticky;
display: flex;
padding: 15px 30px;
}
...
jQuery
import $ from 'jquery';
const Hamburger = () => {
let isOpen;
...
}
export default Hamburger;
Experimented with a different approach which functioned correctly outside of React, yet failed within a React setup despite similar implementations.
let isOpen;
$(document).on("click", "#nav-icon", function () {
...
});
....nav-container .nav, .nav-container {
...
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav class="nav-container">
<ul class="nav">
...
</ul>
</nav>