I want to show my dropdown if a certain condition is met:
let managePermissionButton = () => {
window.alert("->-> " + props.user.name)
props.user.permissions.map((permission) => {
if (permission.name === permissions) {
window.alert("Im in")
return <li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Manage Permissions
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item"><Link className='nav-link' to='/addPermission'>Manage Permissions From Group</Link></a>
<div class="dropdown-divider"></div>
<a class="dropdown-item"><Link className='nav-link' to='/excludePermission'>Exclude Permission From User</Link></a>
</div>
</li>
}
})
}
The "Im in" alert appears on screen when my code enters on my if statement, but is does not render my dropdown and I don´t know why.
Here is my rendering:
return (
<div>
<ul>
<nav className="navbar navbar-expand-lg ">
<ul className="navbar-nav mr-auto">
<li className='nav-item'>
<Link className='nav-link' to='/home'>Home</Link>
</li>
<li className='nav-item'>
<Link className='nav-link' to='/customers'>Customers</Link>
</li>
{managePermissionButton()}
</ul>
<button type="button" onClick={() => onClick(props)} class="btn btn-default btn-circle">Logout</button>{}
</nav>
</ul>
</div>
);
add a return statement before props.user.permissions.map((permission)
let managePermissionButton = () => {
window.alert("->-> " + props.user.name)
return props.user.permissions.map((permission) => {
if (permission.name === permissions) {
window.alert("Im in")
return <li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Manage Permissions
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item"><Link className='nav-link' to='/addPermission'>Manage Permissions From Group</Link></a>
<div class="dropdown-divider"></div>
<a class="dropdown-item"><Link className='nav-link' to='/excludePermission'>Exclude Permission From User</Link></a>
</div>
</li>
}
})
}
Related
I'm using bootstrap version 4 and added in a Navbar but it came out looking like this and I am not sure why. I pasted the needed links and double checked however I still can't find the problem. I'm also new to using bootstrap so I would be grateful if anyone can help me.
A screenshot of how it is looking
Here's my code:
This is _document.js
import Document , {Html, Head, Main, NextScript} from 'next/document'
class MyDocument extends Document
{
render()
{
return (
<Html lang="en">
<head>
<meta name="Online shop" content="Online shop web app" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.0.0/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"></link>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" ></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.12.9/dist/umd/popper.min.js" ></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.0.0/dist/js/bootstrap.min.js" ></script>
</head>
<body>
<Main />
<NextScript />
</body>
</Html>
)
}
}
export default MyDocument;
This is Navbar.js
import React from 'react'
import Link from 'next/link'
const Navbar = () => {
return (<div>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown link
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
</ul>
</div>
</nav>
</div>)
}
export default Navbar;
I can't find where I went wrong.
I try to add active class to a menu when I click on its sub-menu. I have menu bootstrap menu below.
// active navigation
const currentLocation = location.href;
const menuItem = document.querySelectorAll('.nav-link');
const menuLength = menuItem.length;
for (let i = 0; i < menuLength; i++) {
if (menuItem[i].href === currentLocation) {
menuItem[i].classList.add("active");
}
}
.active {
color: #FF0000;
border-bottom: 2px solid #FF0000;
}
<ul class="navbar-nav m-auto">
<li class="nav-item ">
<a class="nav-link active" href="index.html">Home</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
About
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item " href="about.html">About me</a>
<a class="dropdown-item" href="myportfolio.html">My portfolio</a>
<a class="dropdown-item" href="contact.html">Contact</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="demo.html">Demo</a>
</li>
</ul>
I want to make a parent menu active even I click on its sub-menu and redirect to any page.
Anyone can help, please?
You need to add a click event using addEventListener...
const dropdown = document.querySelector("#navbarDropdownMenuLink");
const dropdownItem = document.querySelectorAll(".dropdown-item");
for (let i = 0; i < dropdownItem.length; i++) {
dropdownItem[i].addEventListener("click", function() {
dropdown.classList.add("active");
});
}
.active {
color: #FF0000;
border-bottom: 2px solid #FF0000;
}
<ul class="navbar-nav m-auto">
<li class="nav-item ">
<a class="nav-link active" href="index.html">Home</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
About
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item " href="#">About me</a>
<a class="dropdown-item" href="#">My portfolio</a>
<a class="dropdown-item" href="#">Contact</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Demo</a>
</li>
</ul>
Some useful resources
.addEventListener() Documetation
click event Documetation
I suppose you want to activate the menu that contains the link of the location after reload/redirect of the page after a click within the menu. This should do that (the snippet 'fakes' location). The comparison of links to the current location is done using the URL api.
// active navigation
const fakeLocation = new URL("/myportfolio.html", "https://example.com/").pathname;
// ^ this would be location.pathname in your code
// loop the menu-li's
document.querySelectorAll('li.nav-item')
.forEach(link => {
const links = [...link.querySelectorAll("a")];
// ^ find all links within the menu
link.classList.remove("active");
// ^remove all 'active'
links.forEach(lnk => lnk.classList.remove("active"));
// ^ remove all 'active' from a.href too
const shouldBeActive = links.find(lnk =>
new URL(lnk.href).pathname === fakeLocation);
// ^ find the href (path) that equals the current path
// note: to find the path of lnk we use the URL api
// if element is found, 'activate' the href and the parent li
if (shouldBeActive) {
shouldBeActive.classList.add("active");
shouldBeActive.closest("li").classList.add("active");
}
});
.active {
color: #FF0000;
border-bottom: 2px solid #FF0000;
background-color: #eee;
}
<base href="https://example.com/">
<ul class="navbar-nav m-auto">
<!-- currently active -->
<li class="nav-item active">
<a class="nav-link active" href="index.html">Home</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
About
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item " href="about.html">About me</a><br>
<a class="dropdown-item" href="myportfolio.html">My portfolio</a><br>
<a class="dropdown-item" href="contact.html">Contact</a><br>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="demo.html">Demo</a>
</li>
</ul>
<nav id="mynav" class="navbar navbar-expand-lg navbar-light sticky-top">
<div id="mainnav" class="container-fluid" >
<a class="navbar-brand pt-0 pb-0" href="index.html">
<img src="./assets/pranav logo1 (1).png" class="img-fluid d-inline-block align-top logo" alt="" loading="lazy">
</a>
<button class="navbar-toggler mr-5" id="mynavbtn" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse mob" id="navbarNavDropdown">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link js-scroll-trigger" href="index.html">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="about.html">About</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="services.html" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Services
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item js-scroll-trigger" href="services.html">Web Designing</a>
<a class="dropdown-item js-scroll-trigger" href="services.html">Software Development</a>
<a class="dropdown-item js-scroll-trigger" href="services.html">Digital Marketing</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="portfolio.html">Portfolio</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="contact-us.html">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
$(document).ready(function(){
var backScroll =window.pageYOffset;
window.onscroll = function (){
var currentScroll = window.pageYOffset;
if(backScroll >currentScroll) {
document.getElementById("mynav").style.top="0";
}else{
document.getElementById("mynav").style.top="-100px";
}
backScroll = currentScroll;
}
});
(Wrong Output)The navbar is hidden (top:-100px)
Expected Output
On desktop code works properly when downward scroll is detected navbar is hidden (top:100px) and when upward scroll is detected navbar will be display but In mobile device When I clicked on hamburger menu it collapse but also hiding logo and hamberger section.
I uploaded please you will get it.
it is my first question in stackoverflow and my first code in HTML/JS. I'm using NodeJS, bootstrap, express and ejs.
I'm trying to shutdown a Raspberry PI from the navigation bar. The code is:
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
<div class="container">
<a class="navbar-brand" href="#">Foot.io</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="/">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="/Rules">Rules</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/System">System</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fas fa-power-off"></i>
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" id="Reboot" href="#">Reboot</a>
<a class="dropdown-item" id="Shutdown" href="#">Shutdown</a>
</div>
</li>
</ul>
</div>
</div>
And the script tag is:
<script>
document.getElementById("Reboot").addEventListener("click", function(){console.log("rebooting...");});
document.getElementById("Shutdown").addEventListener("click", function(){console.log("shuting down...");});</script>
All of this code is included in a partial called "navigation.ejs"
I also try making a blank HTML with a simple button and it doesn't works.
How can I add the boostrap "active" class to my navbar on an external header, my header code is this
<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
<a class="navbar-brand" href="#"><img src="../assets/img/logo_white.png" style="height: 35px;"></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
About
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="about/about-us.html">About Us</a>
<a class="dropdown-item" href="about/staff.html">Staff Team</a>
<a class="dropdown-item" href="about/partners.html">Partners</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Resources
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="resources/downloads.html">Downloads</a>
<a class="dropdown-item" href="resources/charts.html">Charts</a>
<a class="dropdown-item" href="resources/metar.html">METAR Decoder</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="academy/index.html">Academy</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Fly</a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://forums.multicrew.co.uk/">Forums</a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://multicrew.setmore.com/">Book</a>
</li>
</ul>
</div>
</nav>
For example if I navigate to the page about/about-us I would want the active class to be added to both the li dropdown menu "about" and then the actual dropdown "about-us" bearing in mind that I am using an external header the file being /header.html. How could I do it?
If I'm right in saying I would need to use jQuery or php, how would I implement this?
EDIT
I have tried to use the Vitaa ActiveNavigation jQuery plugin found here but to no luck
Thanks