EDIT: I have a question regarding the loading of jquery and bootstrap JS scripts in React. How can this be achieved?
I'm currently working on optimizing my React website for mobile devices, and I've implemented a Navbar that switches to a hamburger menu-style navbar on smaller screens. While following the Bootstrap Navbar Documentation, I successfully got the navbar to display the hamburger icon when resized to a mobile size. However, clicking on the icon does not expand the navigation menu as expected.
One important aspect to note is that I dynamically pass classes to my Navbar component using props every time a page is loaded. This allows me to have different Navbar styles for each page while using only one component. Below is an example call from my About.js (page for the "About Me" section in my portfolio), which is similar to other calls on various pages.
Navbar.JS
// Navigation Bar Component
class NavBar extends Component {
render() {
return (
<nav id={this.props.navId} className={this.props.class}>
<li id={this.props.logoId} className={this.props.logoClass}><p>{this.props.logoText}</p></li>
<button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo03" aria-controls="navbarTogglerDemo03" aria-expanded="false" aria-label="Toggle navigation">
<span className="navbar-toggler-icon"><i className="fas fa-bars"></i></span>
</button>
<div className="collapse navbar-collapse">
<ul id="links" className="navbar-nav ml-auto">
<li className="nav-item active textlink"><Link className="nav-link" to="/home">Home</Link></li>
<li className="nav-item active textlink"><Link className="nav-link" to="/about">About Me</Link></li>
<li className="nav-item active textlink"><Link className="nav-link" to="/projects">Projects</Link></li>
<li className="nav-item active"><a className="nav-link" target="blank" href="https://github.com/QuintonPrice"><i className="fab fa-github"></i></a></li>
<li className="nav-item active"><a className="nav-link" target="blank" href="https://www.linkedin.com/in/quinton-price/"><i className="fab fa-linkedin"></i></a></li>
</ul>
</div>
</nav >
);
}
}
export default NavBar;
Example usage of Navbar component in my About page (same usage across all other pages except the home page)
<Navbar navId="navb" logoId="logo" logoText="qprice" logoClass="mr-auto" class="navbar bg-white navbar-expand-lg sticky-top navbar-fixed-top shadow ml-auto"/>
Navbar.css (NOTE: .navHome class is specific to the homepage, while .navb is used on all other pages):
/* Navigation Bar */
nav {
margin-bottom: 20px;
}
/* qprice Logo */
#logo p {
font-family: 'Raleway', sans-serif;
font-weight: 700;
color: #52B788;
font-size: 2.3rem;
margin-left: 15%;
margin-right: 15%;
}
/* Homepage Navigation Links */
#navHome a {
color: white;
padding: 10px 15px;
font-size: 1.5em;
float: left;
text-align: center;
text-decoration: none;
position: relative;
}
#navHome a:hover, #navb a:hover {
color: #52B788;
}
/* Homepage List Items */
#navHome li {
display: inline;
margin-right: .5rem;
}
/* Navigation Links */
#navb a {
color: #343a40;
padding: 15px;
font-size: 1.5em;
float: left;
text-align: center;
text-decoration: none;
position: relative;
}
/* Navigation List Items */
#navb li {
display: inline;
margin-right: .5rem;
}
/* Hover Effect on Navbar Links */
.textlink a:hover {
color: #52B788;
}
.textlink a::before {
content: "";
position: absolute;
width: 100%;
height: 1px;
bottom: 0;
left: 0;
background-color: #52B788;
visibility: hidden;
transform: scaleX(0);
transition: all .15s ease-in-out .05s;
}
.textlink a:hover::before {
visibility: visible;
transform: scaleX(1);
}
.fab {
margin-right: .7rem;
font-size: 1.5em;
text-align: center;
text-decoration: none;
}
.fab:hover {
color: #52B788;
opacity: 0.7;
}