React with MaterializeCSS responsive sidenav unable to click & pop-out - reactjs

Question

The problem i facing here is UX problem that when i doing the if use isAuthenticated will show the AuthLinks, if is not Authenticated it will show the GuestLinks. When it go to responsive, user unable to click the hamburger button, and unable pop up the sidenav.
const Navbar = ({ auth: { isAuthenticated, loading }, logout }) => {
useEffect(() => {
var elem = document.querySelector(".sidenav");
var instance = M.Sidenav.init(elem, {
edge: "left",
inDuration: 250
});
}, []);
Two variable that contain the Navbar jsx
Here is the AuthLinks
const authLinks = (
<Fragment>
<nav>
<div className="nav-wrapper blue-grey darken-4">
<div className="container">
<Link to="/" className="brand-logo">
WebDev
</Link>
<a to="#" data-target="mobile-demo" className="sidenav-trigger">
<i className="material-icons">menu</i>
</a>
<ul className="right hide-on-med-and-down">
<li>
<Link onClick={logout} to="/">
Logout
</Link>
</li>
</ul>
</div>
</div>
</nav>
<ul className="sidenav blue-grey darken-4" id="mobile-demo">
<li>
<Link onClick={logout} to="/">
Logout
</Link>
</li>
</ul>
</Fragment>
);
Here is the GuestLinks, is almost the same just link to different route
const guestLinks = (
<Fragment>
<nav>
<div className="nav-wrapper blue-grey darken-4">
<div className="container">
<Link to="/" className="brand-logo">
WebDev
</Link>
<a to="#" data-target="mobile-demo" className="sidenav-trigger">
<i className="material-icons">menu</i>
</a>
<ul className="right hide-on-med-and-down">
<li>
<Link to="!#">Developers</Link>
</li>
<li>
<Link to="/register">Register</Link>
</li>
<li>
<Link to="/login">Login</Link>
</li>
</ul>
</div>
</div>
</nav>
<ul className="sidenav blue-grey darken-4" id="mobile-demo">
<li>
<Link to="!#">Developers</Link>
</li>
<li>
<Link to="/register">Register</Link>
</li>
<li>
<Link to="/login">Login</Link>
</li>
</ul>
</Fragment>
);
if else statement
return (
<div>
{!loading && (
<Fragment>{isAuthenticated ? authLinks : guestLinks}</Fragment>
)}
</div>
);
Navbar.prototype = {
logout: PropTypes.func.isRequired,
auth: PropTypes.object.isRequired
};
const mapStateToProps = state => ({
auth: state.auth
});
export default connect(mapStateToProps, { logout })(Navbar);

Answer 1

i have found the solution..
First i create another component for GuestLinks
const Navbarguest = () => {
useEffect(() => {
var elem = document.querySelector(".sidenav");
var instance = M.Sidenav.init(elem, {
edge: "left",
inDuration: 250
});
}, []);
return (
<div>
<nav>
<div className="nav-wrapper blue-grey darken-4">
<div className="container">
<Link to="/" className="brand-logo">
WebDev
</Link>
<a to="#" data-target="mobile-demo" className="sidenav-trigger">
<i className="material-icons">menu</i>
</a>
<ul className="right hide-on-med-and-down">
<li>
<Link to="!#" className="sidenav-close">
Developers
</Link>
</li>
<li>
<Link to="/register" className="sidenav-close">
Register
</Link>
</li>
<li>
<Link to="/login" className="sidenav-close">
Login
</Link>
</li>
</ul>
</div>
</div>
</nav>
<ul className="sidenav blue-grey darken-4" id="mobile-demo">
<li>
<Link to="!#" className="sidenav-close">
Developers
</Link>
</li>
<li>
<Link to="/register" className="sidenav-close">
Register
</Link>
</li>
<li>
<Link to="/login" className="sidenav-close">
Login
</Link>
</li>
</ul>
</div>
);
};
export default Navbarguest;
The main reason that hamburger icon doesn't work its because of the useEffect. Because i only allowed it to run once, so we have to add the param for keep running.
useEffect(() => {
var elem = document.querySelector(".sidenav");
var instance = M.Sidenav.init(elem, {
edge: "left",
inDuration: 250
});
});
Below are the full code
const Navbar = ({ auth: { isAuthenticated, loading }, logout }) => {
useEffect(() => {
var elem = document.querySelector(".sidenav");
var instance = M.Sidenav.init(elem, {
edge: "left",
inDuration: 250
});
},[loading,isAuthenticated]);
return (
<div>
{!loading && (
<Fragment>
{isAuthenticated ? (
<div>
<nav>
<div className="nav-wrapper blue-grey darken-4">
<div className="container">
<Link to="/" className="brand-logo sidenav-close">
WebDev
</Link>
<a
to="#"
data-target="mobile-demo"
className="sidenav-trigger"
>
<i className="material-icons">menu</i>
</a>
<ul className="right hide-on-med-and-down">
<li>
<Link onClick={logout} to="/" className="sidenav-close">
Logout
</Link>
</li>
</ul>
</div>
</div>
</nav>
<ul className="sidenav blue-grey darken-4" id="mobile-demo">
<li>
<Link onClick={logout} to="/" className="sidenav-close">
Logout
</Link>
</li>
</ul>
</div>
) : (
<Navbarguest />
)}
</Fragment>
)}
</div>
);
};
Navbar.prototype = {
logout: PropTypes.func.isRequired,
auth: PropTypes.object.isRequired
};
const mapStateToProps = state => ({
auth: state.auth
});