I have a reactJS application and I need to dynamically build a bootstrap menu. In the general render of my application, I have the following code:
<div className="container">
<nav className="navbar navbar-light bg-light">
<a className="navbar-brand" href="#">{this.state.planName}</a>
<button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span className="navbar-toggler-icon"></span>
</button>
{this.renderMenu()}
</nav>
</div>
This is the code that I have in my {this.renderMenu()}
return (
<div className="collapse navbar-collapse" id="navbarSupportedContent">
<ul className="nav navbar-nav">
<li className="nav-item">
<a className="nav-link" onClick={this.accountinformation}>Account Information</a>
</li>
<li className="nav-item">
<a className="nav-link" onClick={this.investmentelections}>Investment Elections</a>
</li>
<li className="nav-item">
<a className="nav-link" onClick={this.contributions}>Contributions</a>
</li>
<li className="nav-item">
<a className="nav-link" onClick={this.beneficiary}>Beneficiariy Information</a>
</li>
<li className="nav-item">
<a className="nav-link" onClick={this.transactionhistory}>Transaction History</a>
</li>
<li className="nav-item">
<a className="nav-link" onClick={this.transfer}>Transfer</a>
</li>
<li class="active">Logout</li>
</ul>
</div>
)
This all works perfectly well. However, what I would like to do if only render the beneficiary menu option if menuBene = "Y", only render the transfer menu option if menuTransfer = "Y" and only render the transaction history menu option if menuTransaction = "Y".
Is there a syntax that allows me to have a condition within the render? Something like this:
return (
<div className="collapse navbar-collapse" id="navbarSupportedContent">
<ul className="nav navbar-nav">
<li className="nav-item">
<a className="nav-link" onClick={this.accountinformation}>Account Information</a>
</li>
<li className="nav-item">
<a className="nav-link" onClick={this.investmentelections}>Investment Elections</a>
</li>
<li className="nav-item">
<a className="nav-link" onClick={this.contributions}>Contributions</a>
</li>
if (menuBene == "Y") {
<li className="nav-item">
<a className="nav-link" onClick={this.beneficiary}>Beneficiariy Information</a>
</li>
}
if (menuTransaction == "Y") {
<li className="nav-item">
<a className="nav-link" onClick={this.transactionhistory}>Transaction History</a>
</li>
}
if (menuTransfer == "Y") {
<li className="nav-item">
<a className="nav-link" onClick={this.transfer}>Transfer</a>
</li>
}
<li class="active">Logout</li>
</ul>
</div>
)
Quick and concise way to do this is to use inline if &&syntax
https://reactjs.org/docs/conditional-rendering.html#inline-if-with-logical--operator
Related
I am asking for a way to collapse this nav-bar after link click rather than javascript event listener or data-bs-toggle and data-bs-target both methods answered in that article (article link) are not working with my code.
here is my code:
<header class="header-nav" id="home">
<nav class="navbar navbar-expand-lg custom-nav fixed-top">
<div class="container-fluid">
<a id="brand" href="#"><span>C</span> Solutions</a>
<button
class="navbtn"
type="button"
data-bs-toggle="collapse"
data-bs-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span><i class="fas fa-bars burger-menu"></i></span>
</button>
<div
class="collapse navbar-collapse justify-content-between"
id="navbarSupportedContent"
>
<ul class="navbar-nav m-auto mb-2 mb-lg-0 text-center">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#home"
>Home</a
>
</li>
<li class="nav-item">
<a class="nav-link" href="#">about us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#services">services</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">why choose us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">careers</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">portfolio</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#our-clients">our clients</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">contact us</a>
</li>
</ul>
<ul class="navbar-nav ml-auto">
<button class="btn btn-primary">request a quote</button>
</ul>
</div>
</div>
</nav>
</header>
can any one help please?
Your code works, you only forgot to add the boostrap.bundle.min.js in your index.html.
Add this in your index.html. that's all!
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
And you don't need to add extra js code. Only add this in your index.html and it should work.
I would prefer a strictly JavaScript way of doing this if possible. Not really wanting to introduce a JavaScript framework into my project.
Layout:
./index.html
./about.html
./crew.html
./flights.html
./events.html
I want every page to have the same navbar such that I don't have to repeat myself and fix every page every time the order of the links change.
Here's my example navbar:
<nav class="navbar navbar-expand-xl navbar-light">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#toggleMobileMenu" aria-controls="toggleMobileMenu" aria-expanded="true" aria-label="Toggle Navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse show" id="toggleMobileMenu">
<ul class="navbar-nav mx-auto">
<li class="nav-item text-center">
<a class="nav-link" href="index.html">Home</a>
</li>
<li class="nav-item text-center">
<a class="nav-link" href="about.html">About</a>
</li>
<li class="nav-item text-center">
<a class="nav-link" href="crew.html">Crew</a>
</li>
<li class="nav-item text-center">
<a class="nav-link" href="flights.html">Flights</a>
</li>
<li class="nav-item text-center">
<a class="nav-link" href="events.html">Events</a>
</li>
</ul>
</div>
</nav>
Depending on what kind of browser support you need you could use a template literal (back ticks) to define your navigation. Then use insertAdjacentHTML to place it where you need it on all your html pages. If your page is fairly simple you could just insert the nav after begin on the body tag.
const navigation = `
<nav class="navbar navbar-expand-xl navbar-light">
<button
class="navbar-toggler"
type="button"
data-bs-toggle="collapse"
data-bs-target="#toggleMobileMenu"
aria-controls="toggleMobileMenu"
aria-expanded="true"
aria-label="Toggle Navigation"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse show" id="toggleMobileMenu">
<ul class="navbar-nav mx-auto">
<li class="nav-item text-center">
<a class="nav-link" href="index.html">Home</a>
</li>
<li class="nav-item text-center">
<a class="nav-link" href="about.html">About</a>
</li>
<li class="nav-item text-center">
<a class="nav-link" href="crew.html">Crew</a>
</li>
<li class="nav-item text-center">
<a class="nav-link" href="flights.html">Flights</a>
</li>
<li class="nav-item text-center">
<a class="nav-link" href="events.html">Events</a>
</li>
</ul>
</div>
</nav>
`
document.getElementById("nav-container").insertAdjacentHTML('afterbegin', navigation);
<div id="nav-container"></div>
I have created a landing page for an event. Everything is working fine, but when the navbar is opened in mobile view, it doesn't collapse back when clicked on an item. It stays open covering almost 3/4 of the screen while the page scrolls to the sections finely. I need the nav bar to collapse when an item is clicked.
Here's the HTML for the navbar I've created
<div id="nav-bar" >
<nav class="navbar navbar-expand-lg navbar-light" style="background:#2E935D;">
<img src="assets/images/logonew.png" style="height: 3.35rem; padding-left: 20px;"/> <!-- logo on nav bar-->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <i class="fas fa-bars"></i>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto">
<li class="nav-item"> <a class="nav-link" d onMouseOver="this.style.color='#E99D23'" onMouseOut="this.style.color='#fff'" href="#home">Home<span class="sr-only">(current)</span></a></li>
<li class="nav-item"> <a class="nav-link" onMouseOver="this.style.color='#E99D23'" onMouseOut="this.style.color='#fff'" href="#info">Info</a> </li>
<li class="nav-item"> <a class="nav-link" onMouseOver="this.style.color='#E99D23'" onMouseOut="this.style.color='#fff'" href="#schedule">Schedule</a> </li>
<li class="nav-item"> <a class="nav-link" onMouseOver="this.style.color='#E99D23'" onMouseOut="this.style.color='#fff'" href="#rules">Rules</a> </li>
<li class="nav-item"> <a class="nav-link" onMouseOver="this.style.color='#E99D23'" onMouseOut="this.style.color='#fff'" href="#about">About</a> </li>
<li class="nav-item"> <a class="nav-link" onMouseOver="this.style.color='#E99D23'" onMouseOut="this.style.color='#fff'" href="#register">Register</a> </li>
<li class="nav-item"> <a class="nav-link" onMouseOver="this.style.color='#E99D23'" onMouseOut="this.style.color='#fff'" href="#contact">Contact Us</a> </li>
<li class="nav-item"><a style="color: #fff;" onMouseOver="this.style.color='#E99D23'" onMouseOut="this.style.color='#fff'" href="https://examplelink.com" target="_blank"><i class="fab fa-facebook" style="font-size:30px;"></i></a></li>
</ul>
</div>
</nav>
</div>
Are there any mistakes or issues in the code? How can I achieve the desired behavior of the navbar?
Thank you in advance.
This worked for me
// Close Bootstrap 3 navbar when a nav item is clicked
$('.navbar-collapse ul li a:not(.dropdown-toggle)').bind('click touchstart', function () {
setTimeout(function () {
$('.navbar-toggle:visible').click();
}, 100);
});
found here. I also had to add a delay.
I have a problem with my navbar: I create my js element and copy and paste te code form bootswatch in the render() element. Now I can see the navbar but it doesn't expand in any way. I install bootswatch, bootstrap, react-bootstrap in my code; improt the css file in the app.js file, but no sin of life. And in the same way the highlighted current link opened doesn't seems to move when I change page. I'm working on this language for the first time for a university project, so I'm scared it can create me some problem in the future.
Here's the code:
import React, { Component } from 'react';
export default class Navbar extends Component {
render() {
return (
<nav className="navbar navbar-expand-lg navbar-dark bg-primary">
<a className="navbar-brand" href="/">Fastbook</a>
<button className="navbar-toggler" type="button"
data-toggle="collapse"
data-target="#navbarColor01"
aria-controls="navbarColor01"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span className="navbar-toggler-icon"></span>
</button>
<div className="collapse navbar-collapse" id="navbarColor01">
<ul className="navbar-nav mr-auto">
<li className="nav-item active">
<a className="nav-link" href="/">Home<span className="sr-only">(current)</span></a>
</li>
<li className="nav-item">
<a className="nav-link" href="./Rooms">Prenota</a>
</li>
<li className="nav-item">
<a className="nav-link" href="#">Diventa Oste</a>
</li>
<li className="nav-item">
<a className="nav-link" href="#">About</a>
</li>
</ul>
</div>
</nav>
)
}
}
If I remove ./ from the href attribute then it works fine. Why?
<nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top navbar-toggleable-md" id="navbar1">
<div class="container-fluid">
<a class="navbar-brand" href="#top">
<img src="./img/logo.png" alt="" class="img-fluid logo">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto">
<li class="nav-item ">
<a class="nav-link" href="./#features">Features <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="./#about">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="./#services">Services</a>
</li>
<li class="nav-item">
<a class="nav-link" href="./#video-play">Showreel</a>
</li>
<li class="nav-item">
<a class="nav-link" href="./#gallery">Gallery</a>
</li>
<li class="nav-item">
<a class="nav-link" href="./#team">Team</a>
</li>
<li class="nav-item">
<a class="nav-link" href=./ "#news">News</a>
</li>
<li class="nav-item">
<a class="nav-link" href="./#contact">Contact</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Shop</a>
</li>
<li class="nav-item apply-now text-white">
<a class="nav-link text-white" href="./form-fee-easy.html">Apply Now</a>
</li>
</ul>
</div>
</div>
$('body').scrollspy({
target: '#navbar1'
});