Hi there I have the following card that has 3 selectable buttons button.
<ul class="nav nav-tabs border-0" role="tablist" id="FlightType" onclick="SelectedFlightType()">
<li class="nav-item">
<button class="nav-link active" id="oneway-tab" data-bs-toggle="tab"
data-bs-target="#oneway" type="button" role="tab" aria-controls="oneway"
aria-selected="true">
<span
class="d-inline-block icon-20 rounded-circle bg-white align-middle me-2"></span>One-way
</button>
</li>
<li class="nav-item">
<button class="nav-link" id="return-tab" data-bs-toggle="tab"
data-bs-target="#return" type="button" role="tab" aria-controls="return"
aria-selected="false">
<span
class="d-inline-block icon-20 rounded-circle bg-white align-middle me-2"></span>Return
</button>
</li>
<li class="nav-item">
<button class="nav-link" id="multiCity-tab" data-bs-toggle="tab"
data-bs-target="#multiCity" type="button" role="tab"
aria-controls="multiCity" aria-selected="false">
<span
class="d-inline-block icon-20 rounded-circle bg-white align-middle me-2"></span>Multi-city
</button>
</li>
</ul>
And I have this button
<input id="btnSave" class="btn btn-search" type="button" value="Search" onclick="Search();" />
When I click on the button I'm calling Search() function which will redirect to a different page accrording selected button in the ul element.
I want to return the Id of the selected button and use it in the Search() function like this
var value = Search()
if(value == 'option1')
{
//do something
}
else if(value == 'option2')
{
//do another thing
}
else
{
// do the rest thing
}
This is what I have tried so far
function valueFunction() {
// var e = e || window.event;
var e = window.event;
e = e.target || e.srcElement;
if (e.nodeName === 'BUTTON') {
var ft = e.id;
alert(ft);
return e.id;
}
}
this works fine when I call it in the onclick of the ul element which has the id of "FlightType"
function search(){
var value = valueFunction();
alert(values) //undefined for first option, not responding for the other 2 options
}
var value = Search()
if (value == 'option1') {
//do something
} else if (value == 'option2') {
//do another thing
} else {
// do the rest thing
}
function valueFunction() {
// var e = e || window.event;
var e = window.event;
e = e.target || e.srcElement;
if (e.nodeName === 'BUTTON') {
var ft = e.id;
alert(ft);
return e.id;
}
}
<ul class="nav nav-tabs border-0" role="tablist" id="FlightType" onclick="SelectedFlightType()">
<li class="nav-item">
<button class="nav-link active" id="oneway-tab" data-bs-toggle="tab" data-bs-target="#oneway" type="button" role="tab" aria-controls="oneway" aria-selected="true">
<span class="d-inline-block icon-20 rounded-circle bg-white align-middle me-2"></span>One-way
</button>
</li>
<li class="nav-item">
<button class="nav-link" id="return-tab" data-bs-toggle="tab" data-bs-target="#return" type="button" role="tab" aria-controls="return" aria-selected="false">
<span class="d-inline-block icon-20 rounded-circle bg-white align-middle me-2"></span>Return
</button>
</li>
<li class="nav-item">
<button class="nav-link" id="multiCity-tab" data-bs-toggle="tab" data-bs-target="#multiCity" type="button" role="tab" aria-controls="multiCity" aria-selected="false">
<span class="d-inline-block icon-20 rounded-circle bg-white align-middle me-2"></span>Multi-city
</button>
</li>
</ul>
<input id="btnSave" class="btn btn-search" type="button" value="Search" onclick="Search();" />
plz direct me, I'm stuck for hrs.
why don't you use the select html tag for this (with the option tags inside, each one has its own value)?
In an other way, your function valueFunction can't return you the id of buttons because you don't look for them if the DOM. The event is generated by the input you have clicked on
by seeing your code i understood you have a few buttons implemented , all having id so you can just pass that id while onlick
<input id="btnSave" class="btn btn-search" type="button" value="Search" onclick="Search('btnsave');" />
// in js code
function Search(id){
if(value == id)
{
//do something
}
else if(value == id)
{
//do another thing
}
else
{
// do the rest thing
}
}
Related
I've completed some javascript courses but actually using it on functional web items is very humbling.
I have a navbar with same-page page links. I would like to change the nav items to active both when they are clicked, and when the page is scrolled to that section of the page. I would also like to change the innerHTML of the active nav items.
My javascript is clearly a mess. I'd like to try to at least get this solved and then it's back to practicing JS.
<div class="collapse navbar-collapse" style="background-color: #1e3d58;" id="navbarToggler">
<ul class="navbar-nav text-center mx-auto mb-2 mb-sm-0">
<li class="nav-item">
<a class="nav-link" href="#home">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#about">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#skills">Skills</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#contact">Contact</a>
</li>
</ul>
<div class="d-none d-sm-flex mt-sm-2 mt-md-0 justify-content-center">
<a class="btn btn-social-icon btn-linkedin" href="#"><i class="fab fa-2x fa-github-square"></i></a>
<a class="btn btn-social-icon btn-linkedin" href="http://www.linkedin.com/in/"><i
class="fab fa-2x fa-linkedin"></i></a>
</div>
</div>
.nav-item {
padding: 0px 2vw 0px 2vw;
}
.nav-link {
color: #e8eef1 !important;
}
nav .fab {
color: #e8eef1;
margin: 0px -8px 0px -8px;
}
nav {
max-height: 60px;
}
document.querySelector(function () {
document.querySelector(".nav-item").click(function () {
document.querySelector(".nav-item").each(function () {
document.querySelector(this).querySelector("a").removeClass("active");
});
document.querySelector(this).querySelector("a").classList.add("active");
});
});
document.querySelector(function () {
for (document.querySelector(".nav-item")) {
if document.querySelector("a").hasClass("active")
then document.querySelector("a").innerHTML = "<" + document.querySelector('a') + "/>"
};
});
The js would be something like:
let navItems = document.querySelectorAll('li.nav-item a');
navItems.forEach((el) => {
el.addEventListener('click',() => {
if (!el.classList.contains('active') {
navItems.forEach((others) => {
//Remove the update to innerHTML for all of the items however you plan on doing that, I would suggest just adding or removing a class to update their style
others.classList.remove('active');
};
el.classList.add('active');
};
});
});
I was able to find a solution to this that solved all 3 problems.
The active class changes when nav item is clicked
The active class changes when page is scrolled to page section
The textContent of the navbar item links are changed when the a link class is active
Javascript
const sections = document.querySelectorAll('section');
const navLi = document.querySelectorAll('#navbarToggler li a')
window.addEventListener('scroll', ()=> {
let current = "";
sections.forEach( section => {
const sectionTop = section.offsetTop;
const sectionHeight = section.clientHeight;
if(scrollY >= (sectionTop - sectionHeight/3)){
current = section.getAttribute('id');
}
})
navLi.forEach( a => {
a.classList.remove('active');
if(a.classList.contains(current)){
a.classList.add('active')
}
})
})
window.addEventListener('scroll'||'click', ()=> {
navLi.forEach( a => {
const navText= a.textContent;
if (a.classList.contains('active')){
if(a.textContent == "Home"){
a.textContent = "<Home/>"
}
if(a.textContent == "About"){
a.textContent = "<About/>"
}
if(a.textContent == "Skills"){
a.textContent = "<Skills/>"
}
if(a.textContent == "Contact"){
a.textContent = "<Contact/>"
}
}
else {
if(a.textContent == "<Home/>"){
a.textContent = "Home"
}
if(a.textContent == "<About/>"){
a.textContent = "About"
}
if(a.textContent == "<Skills/>"){
a.textContent = "Skills"
}
if(a.textContent == "<Contact/>"){
a.textContent = "Contact"
}
}
})
})
HTML
<nav class="navbar navbar-expand-md navbar-dark fixed-top" style="background-color: #1e3d58;">
<div class=" container">
<a class="navbar-brand" href="#home"><strong>.Vince-clicks{}</strong></a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarToggler"
aria-controls="navbarToggler" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" style="background-color: #1e3d58;" id="navbarToggler">
<ul class="navbar-nav text-center mx-auto mb-2 mb-sm-0">
<li class="nav-item">
<a class="nav-link home active" href="#home">Home</a>
</li>
<li class="nav-item">
<a class="nav-link about" href="#about">About</a>
</li>
<li class="nav-item">
<a class="nav-link skills" href="#skills">Skills</a>
</li>
<li class="nav-item">
<a class="nav-link contact" href="#contact">Contact</a>
</li>
</ul>
<div class="d-none d-sm-flex mt-sm-2 mt-md-0 justify-content-center">
<a class="btn btn-social-icon btn-linkedin" href="#"><i class="fab fa-2x fa-github-square"></i></a>
<a class="btn btn-social-icon btn-linkedin" href="http://www.linkedin.com/in/"><i
class="fab fa-2x fa-linkedin"></i></a>
</div>
</div>
</div>
</nav>
Each page section also has an appropriate id.
Hope this helps others who had the same issue.
How do I change the background color of this menu only when expanded?
When inactive I want the background as shown, however, when the menu is active I'd like the color to change to a light grey. I can't work out how to do this without changing the whole background for both states.
Here is my code:
<nav
class="navbar navbar-expand-xl navbar-light fixed-top wrap pt-3"
id="mainNav"
>
<button
class="hamburger hamburger--squeeze"
type="button"
data-toggle="collapse"
data-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span class="hamburger-box">
<span class="hamburger-inner"></span>
</span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto pt-2">
<li class="nav-item active">
<a class="nav-link" href="#"
>Illustration <span class="sr-only">(current)</span></a
>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Graphic Design</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</nav>
I already have this scroll function for all screens:
window.addEventListener('scroll', function (event) {
event.preventDefault();
if (window.scrollY <= 50) {
nav.style.backgroundColor = 'transparent';
} else {
nav.style.backgroundColor = '#fff';
nav.style.opacity = '0.9';
nav.style.transition = '0.4s ease';
}
If you are using this css plugin you can remove the scroll event and use a click event handler:
document.querySelectorAll(".hamburger").forEach(function(hamburger) {
hamburger.addEventListener("click", function() {
var nav = document.querySelector('#mainNav');
if (this.classList.contains('is-active') == false) {
nav.style.backgroundColor = 'red';
nav.style.opacity = '0.9';
nav.style.transition = '0.4s ease';
} else {
nav.style.backgroundColor = 'transparent';
}
this.classList.toggle("is-active");
}, false);
});
The snippet:
document.querySelectorAll(".hamburger").forEach(function(hamburger) {
hamburger.addEventListener("click", function() {
var nav = document.querySelector('#mainNav');
if (this.classList.contains('is-active') == false) {
nav.style.backgroundColor = 'red';
nav.style.opacity = '0.9';
nav.style.transition = '0.4s ease';
} else {
nav.style.backgroundColor = 'transparent';
}
this.classList.toggle("is-active");
}, false);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/jonsuh/hamburgers#master/dist/hamburgers.min.css">
<nav class="navbar navbar-expand-xl navbar-light fixed-top wrap pt-3" id="mainNav">
<button class="hamburger hamburger--squeeze" type="button" data-toggle="collapse"
data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false"
aria-label="Toggle navigation">
<span class="hamburger-box">
<span class="hamburger-inner"></span>
</span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto pt-2">
<li class="nav-item active">
<a class="nav-link" href="#">Illustration <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Graphic Design</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</nav>
Try to update the default css for toggle button and styling active by this css tag:
[aria-expanded="true"] {
/* your custom style here */
}
addNavBarEventListners();
function addNavBarEventListners() {
for (i = 0; i < document.getElementsByClassName("navbar").length; i++) {
item = document.getElementsByClassName("navbar")
item[i].addEventListener("mouseenter", navItemMouseEnterAction);
item[i].addEventListener("mouseleave", navItemMouseExitAction);
}
}
function navItemMouseEnterAction(event) {
this.style.backgroundColor = 'blue';
this.style["boxShadow"] = "0 0 20px #999999";
this.style.color = 'black';
}
function navItemMouseExitAction(event) {
this.style.backgroundColor = 'transparent';
this.style["boxShadow"] = "0 0 0px #999999";
this.style.color = 'white';
}
Try this:
let navLinks = document.getElementsByClassName('nav-link');
Array.from(navLinks).forEach(navLink => {
navLink.addEventListener("mouseenter", navItemMouseEnterAction);
navLink.addEventListener("mouseleave", navItemMouseExitAction);
})
function navItemMouseEnterAction() {
this.style.backgroundColor = 'blue';
this.style["boxShadow"] = "0 0 20px #999999";
this.style.color = 'black';
}
function navItemMouseExitAction(event) {
this.style.backgroundColor = 'transparent';
this.style["boxShadow"] = "0 0 0px #999999";
this.style.color = 'white';
}
<div style="background-color: red;">
<a class="nav-link" href="#">Home</a>
<a class="nav-link" href="#">Link</a>
<a class="nav-link" href="#">About</a>
<a class="nav-link" href="#">Test</a>
</div>
Instead of sleecting navbar select all nav-links.
EDIT:
Your code didn't work because you were selecting .navbar class which stands in the beginning of the nav, what you want to select is actually the .nav-links which are presented on <a> tag.
Here is a bootstrap navbar sample code:
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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 me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
<form class="d-flex">
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success" type="submit">Search</button>
</form>
</div>
</div>
</nav>
More about about Bootstrap navbars can be found here: https://getbootstrap.com/docs/5.0/components/navbar/
You were selecting the <nav> itself instead of .nav-links that was your mistake!
The rest of the code looks fine! I would just change the document.getElementsByClassName('..') inside for loop and declare it out, so that you dont have to reassign another variable inside the loop, so your code would look something like this:
let elements = document.getElementsByClassName('nav-link');
for(let i = 0; i < elements.length; i++) {
...
}
In your addNavBarEventListners(); function, you have assigned variable i value of 1 in for loop i.e:
for (i = 1; i < document.getElementsByClassName("navbar").length; i++)
Change the value of variable i to 0.
Change:
for (i = 1; i < document.getElementsByClassName("navbar").length; i++)
to:
for (i = 0; i < document.getElementsByClassName("navbar").length; i++)
I need to adapt the following code so that the mousehover works with multiple levels in a menu with Bootstrap 4 and JQuery. The mousehover works when the menu has only one level, but after opening the first level it also opens the second one (dropdown-submenu).
Here my HTML code...
<nav class="navbar navbar-expand-lg navbar-default fixed-top">
<div class="container">
<a class="navbar-brand" href="/">
<img src="/img/logo.png" alt="Brand">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<i class="fas fa-bars text-primary"></i>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="/">Home</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" role="button" id="item1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Item 1 <small><i class="fas fa-angle-down ml-1"></i></small>
</a>
<ul class="dropdown-menu p-0" aria-labelledby="item1">
<li><a class="dropdown-item " href="">Item Level 1</a></li>
<li><a class="dropdown-item " href="">Item Level 1</a></li>
<li><a class="dropdown-item " href="">Item Level 1</a></li>
</ul>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" role="button" id="item2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Item 2 <small><i class="fas fa-angle-down ml-1"></i></small>
<div class="ripple-container"></div></a>
<ul class="dropdown-menu p-0" aria-labelledby="item2">
<li><a class="dropdown-item " href="">Item Level 1</a></li>
<li class="dropdown-submenu">
<a class="nav-link dropdown-toggle dropdown-item" href="#" role="button" id="itemlevel1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Item Level 1 <small><i class="fas fa-angle-right"></i></small>
</a>
<ul class="dropdown-menu p-0" aria-labelledby="itemlevel1">
<li><a class="dropdown-item " href="">Item Level 2</a></li>
</ul>
</li>
</ul>
</li>
<li class="nav-item ">
<a class="nav-link" href="">Item 3
</a>
</li>
</ul>
</div>
</div>
</nav>
And here my JS code...
//Dropdown hover
const $dropdown = $(".dropdown");
const $dropdownToggle = $(".dropdown-toggle");
const $dropdownMenu = $(".dropdown-menu");
const $dropdownSubMenu = $(".dropdown-submenu");
const showClass = "show";
$(window).on("load resize", function() {
if (this.matchMedia("(min-width: 768px)").matches) {
$dropdown.hover(
function() {
const $this = $(this);
$this.addClass(showClass);
$this.find($dropdownToggle).attr("aria-expanded", "true");
$this.find($dropdownMenu).addClass(showClass);
$this.find($dropdownSubMenu).addClass(showClass);
},
function() {
const $this = $(this);
$this.removeClass(showClass);
$this.find($dropdownToggle).attr("aria-expanded", "false");
$this.find($dropdownMenu).removeClass(showClass);
$this.find($dropdownSubMenu).removeClass(showClass);
}
);
} else {
$dropdown.off("mouseenter mouseleave");
}
});
The solution:
//Dropdown hover
const $dropdown = $(".navbar-nav > .dropdown");
const $dropdownToggle = $(".navbar-nav > .dropdown > .dropdown-toggle");
const $dropdownMenu = $(".navbar-nav > .dropdown > .dropdown-menu");
const $dropdown2 = $(".dropdown-submenu");
const $dropdownToggle2 = $(".dropdown-submenu > .dropdown-toggle");
const $dropdownMenu2 = $(".dropdown-submenu > .dropdown-menu");
const showClass = "show";
$(window).on("load resize", function() {
if (this.matchMedia("(min-width: 768px)").matches) {
$dropdown.hover(
function() {
const $this = $(this);
$this.addClass(showClass);
$this.find($dropdownToggle).attr("aria-expanded", "true");
$this.find($dropdownMenu).addClass(showClass);
},
function() {
const $this = $(this);
$this.removeClass(showClass);
$this.find($dropdownToggle).attr("aria-expanded", "false");
$this.find($dropdownMenu).removeClass(showClass);
}
);
$dropdown2.hover(
function() {
const $this = $(this);
$this.addClass(showClass);
$this.find($dropdownToggle2).attr("aria-expanded", "true");
$this.find($dropdownMenu2).addClass(showClass);
},
function() {
const $this = $(this);
$this.removeClass(showClass);
$this.find($dropdownToggle2).attr("aria-expanded", "false");
$this.find($dropdownMenu2).removeClass(showClass);
}
);
} else {
$dropdown.off("mouseenter mouseleave");
$dropdown2.off("mouseenter mouseleave");
$(function () {
// Multi Level dropdowns on Click for Mobile
$("ul.dropdown-menu [data-toggle='dropdown']").on("click", function (event) {
event.preventDefault();
event.stopPropagation();
$(this).siblings().toggleClass("show");
if (!$(this).next().hasClass('show')) {
$(this).parents('.dropdown-menu').first().find('.show').removeClass("show");
}
$(this).parents('li.nav-item.dropdown.show').on('hidden.bs.dropdown', function (e) {
$('.dropdown-submenu .show').removeClass("show");
});
});
})
}
});
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>
}
})
}