My question is: how can I give mm-active class to the sidebar navigation on click event? (mm-active is class of jQuery metisMenu). The mm-active class must be at li tag, not on second level menu.
This is my sidebar navigation HTML structure which is inside of include folder.
<nav id="sidebarMenu" class="px-0 pe-0 pt-0 sidebar sidebar-sticky animate__fadeInUpBig animate__animated scroller">
<div class="position-sticky sidebar-scroll">
<h6 class="sidebar-heading d-flex justify-content-between align-items-center px-3 mt-3 mb-1">
<span>Menu</span>
</h6>
<ul class="nav flex-column" id="metismenu">
<li class="nav-item mm-active">
<a class="nav-link" href="#" aria-expanded="true">
<span data-feather="home"></span>
<span class="category-name">Dashboard</span>
<span class="fa arrow"></span>
</a>
<ul class="nav nav-second-level" aria-expanded="true">
<li class="nav-item"><a class="nav-link" href="/home"><span data-feather="circle"></span> Analytics</a></li>
<li class="nav-item"><a class="nav-link" href="/dashboard-demographic"><span data-feather="circle"></span> Demographic</a></li>
<li class="nav-item"><a class="nav-link" href="/dashboard-project"><span data-feather="circle"></span> Project</a></li>
<li class="nav-item"><a class="nav-link" href="/dashboard-hospital"><span data-feather="circle"></span> Hospital</a></li>
<li class="nav-item"><a class="nav-link" href="/dashboard-hrm"><span data-feather="circle"></span> HRM Dashboard</a></li>
<li class="nav-item"><a class="nav-link" href="/dashboard-real-estate"><span data-feather="circle"></span> Real Estate</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link" href="#" aria-expanded="true">
<span data-feather="settings"></span>
<span class="category-name">E-Commerce</span>
<span class="fa arrow"></span>
</a>
<ul class="nav nav-second-level mm-collapse" aria-expanded="true">
<li class="nav-item"><a class="nav-link" href="/ecommerce-dashboard"><span data-feather="circle"></span> Dashboard</a></li>
<li class="nav-item"><a class="nav-link" href="/ecommerce-products"><span data-feather="circle"></span> Products</a></li>
<li class="nav-item"><a class="nav-link" href="/ecommerce-product-detail"><span data-feather="circle"></span> Product Detail</a></li>
<li class="nav-item"><a class="nav-link" href="/ecommerce-add-product"><span data-feather="circle"></span> Add Product</a></li>
<li class="nav-item"><a class="nav-link" href="/ecommerce-orders"><span data-feather="circle"></span> Orders</a></li>
<li class="nav-item"><a class="nav-link" href="/ecommerce-cart"><span data-feather="circle"></span> Cart</a></li>
<li class="nav-item"><a class="nav-link" href="/ecommerce-checkout"><span data-feather="circle"></span> Checkout</a></li>
</ul>
</li>
</ul>
</div>
</nav>
If it is in blade you can mix in some php like this:
<nav id="sidebarMenu" class="px-0 pe-0 pt-0 sidebar sidebar-sticky animate__fadeInUpBig animate__animated scroller">
<div class="position-sticky sidebar-scroll">
<h6 class="sidebar-heading d-flex justify-content-between align-items-center px-3 mt-3 mb-1">
<span>Menu</span>
</h6>
<ul class="nav flex-column" id="metismenu">
#php
$activeDashboard = [
'home',
'dashboard-demographic',
'dashboard-project',
'dashboard-hospital',
'dashboard-hrm',
'dashboard-real-estate',
];
$isDashboard = Request::is($activeDashboard);
#endphp
<li class="nav-item {{ $isDashboard ? 'mm-active' : null }}">
<a class="nav-link" href="#" aria-expanded="{{ $isDashboard ? true : false }}">
<span data-feather="home"></span>
<span class="category-name">Dashboard</span>
<span class="fa arrow"></span>
</a>
<ul class="nav nav-second-level" aria-expanded="{{ $isDashboard ? true : false }}">
<li class="nav-item"><a class="nav-link" href="/home"><span data-feather="circle"></span> Analytics</a></li>
<li class="nav-item"><a class="nav-link" href="/dashboard-demographic"><span data-feather="circle"></span> Demographic</a></li>
<li class="nav-item"><a class="nav-link" href="/dashboard-project"><span data-feather="circle"></span> Project</a></li>
<li class="nav-item"><a class="nav-link" href="/dashboard-hospital"><span data-feather="circle"></span> Hospital</a></li>
<li class="nav-item"><a class="nav-link" href="/dashboard-hrm"><span data-feather="circle"></span> HRM Dashboard</a></li>
<li class="nav-item"><a class="nav-link" href="/dashboard-real-estate"><span data-feather="circle"></span> Real Estate</a></li>
</ul>
</li>
#php
$activeEcommerce = [
'ecommerce-dashboard',
'ecommerce-products',
'ecommerce-product-detail',
'ecommerce-add-product',
'ecommerce-orders',
'ecommerce-cart',
'ecommerce-checkout',
];
$isEcommerce = Request::is($activeEcommerce);
#endphp
<li class="nav-item {{ $isEcommerce ? 'mm-active' : null }}">
<a class="nav-link" href="#" aria-expanded="{{ $isEcommerce ? true : false }}">
<span data-feather="settings"></span>
<span class="category-name">E-Commerce</span>
<span class="fa arrow"></span>
</a>
<ul class="nav nav-second-level mm-collapse" aria-expanded="{{ $isEcommerce ? true : false }}">
<li class="nav-item"><a class="nav-link" href="/ecommerce-dashboard"><span data-feather="circle"></span> Dashboard</a></li>
<li class="nav-item"><a class="nav-link" href="/ecommerce-products"><span data-feather="circle"></span> Products</a></li>
<li class="nav-item"><a class="nav-link" href="/ecommerce-product-detail"><span data-feather="circle"></span> Product Detail</a></li>
<li class="nav-item"><a class="nav-link" href="/ecommerce-add-product"><span data-feather="circle"></span> Add Product</a></li>
<li class="nav-item"><a class="nav-link" href="/ecommerce-orders"><span data-feather="circle"></span> Orders</a></li>
<li class="nav-item"><a class="nav-link" href="/ecommerce-cart"><span data-feather="circle"></span> Cart</a></li>
<li class="nav-item"><a class="nav-link" href="/ecommerce-checkout"><span data-feather="circle"></span> Checkout</a></li>
</ul>
</li>
</ul>
</div>
</nav>
Related
If I define my block on the li tag, TBS only shows the first item in the array.
<ul class="nav navbar-nav">
<li class="dropdown nav-item">
Logs<span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li><a class="file" href="/logs/#[logs.key; block=li]">[logs.key]</a></li>
</ul>
</li>
<li class="nav-item">Settings</li>
<li class="nav-item"><span class="navbar-text" id="grepspan"></span></li>
<li class="nav-item"><span class="navbar-text" id="invertspan"></span></li>
</ul>
If I define the block on the a tag, it shows all the items in the array.
<ul class="nav navbar-nav">
<li class="dropdown nav-item">
Logs<span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<a class="file" href="/logs/#[logs.key; block=a]">[logs.key]</a>
</ul>
</li>
<li class="nav-item">Settings</li>
<li class="nav-item"><span class="navbar-text" id="grepspan"></span></li>
<li class="nav-item"><span class="navbar-text" id="invertspan"></span></li>
</ul>
What am I doing wrong here?
I hava a dynamic menu using VueJs and Laravel. It works fine.
But when I display one of them, all options are displayed.
The menu starts in foreach loop to check menu and assigned options.
Is there any way to restrict this?
My code is the next:
File sidebar.blade.php
<div class="sidebar">
<nav class="sidebar-nav">
<ul class="nav">
<li #click="menu=0" class="nav-item">
<a class="nav-link active" href="#"><i class="icon-speedometer"></i> Escritorio</a>
</li>
<li class="nav-title">
Menú de opciones
</li>
<li class="nav-item nav-dropdown">
#foreach($menus as $menu)
<a class="nav-link nav-dropdown-toggle" href="#"><i class="{{ $menu->icono_menu }}"></i>{{ $menu->nombre }}</a>
#foreach($permisos as $permiso)
#if($menu->id==$permiso->idmenu)
<ul class="nav-dropdown-items">
<li #click="menu={{ $permiso->codigo }}" class="nav-item">
<a class="nav-link" href="#"><i class="{{ $permiso->icono_opcion }}"></i> {{ $permiso->nombre }}</a>
</li>
</ul>
#endif
#endforeach
#endforeach
</li>
<li #click="menu=27" class="nav-item">
<a class="nav-link" href="#"><i class="icon-book-open"></i> Ayuda <span class="badge badge-danger">PDF</span></a>
</li>
<li #click="menu=28" class="nav-item">
<a class="nav-link" href="#"><i class="icon-info"></i> Acerca de...<span class="badge badge-info">IT</span></a>
</li>
</ul>
</nav>
<button class="sidebar-minimizer brand-minimizer" type="button"></button>
</div>
I am working with Angular8 and want to use Bootstrap4 navbar.
But Dropdown-Menu not working
Here is Angular.json code
"scripts": [
"node_modules/jquery/dist/jquery.min.js",
"node_modules/popper.js/dist/umd/popper.min.js",
"node_modules/bootstrap/dist/js/bootstrap.min.js"
]
Here is my navbar.component.html code
<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" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown Menu
</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>
Here is my output in Browser
Anything am I missing ?
Change your navbar.component.html to this:
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button">
<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" [class.show]="navbarOpen">
<a class="nav-link dropdown-toggle" (click)="toggleNavbar()">
Dropdown Menu
</a>
<div class="dropdown-menu" [class.show]="navbarOpen" 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>
And in your navbar.component.ts write above the constructor:
public navbarOpen: boolean = false;
and under your constructor write:
public toggleNavbar() {
this.navbarOpen = !this.navbarOpen;
}
Please NEVER use jQuery in Angular2+ Projects.
1. You don't need it
2. In my opinion it would be anti-pattern
If you do it like that, it should work. Give me some feedback whether it helped you.
enter image description here and check it
This code works fine
import {
Directive,
ElementRef,
HostBinding,
HostListener,
, Renderer2
} from '#angular/core';
#Directive({
selector: '[appToggleMenu]'
})
export class ToggleMenuDirective {
#HostBinding('class.show') isToggle: boolean = false;
constructor(
private el: ElementRef,
private render: Renderer2
) { }
#HostListener('click') toggleClick() {
this.isToggle = !this.isToggle;
const ui = this.el.nativeElement.querySelector('.dropdown-menu');
if (ui) {
if (this.isToggle) {
this.render.addClass(ui, 'show')
} else {
this.render.removeClass(ui, 'show');
}
}
}
}
html:
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid ">
<a class="navbar-brand" href="#">Navbar</a>
<div>
<button class="navbar-toggler" type="button">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav" appToggleMenu>
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" href="#">Home</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" role="button">
Dropdown link
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</nav>
I am not sure how is this happening. On my landing page, I've got a simple statement that returns the user information by using the method "Auth::user()" and alas, it works.
Nevertheless, when applying a layout to my file, I get the "Trying to get property of non-object" exception. I've been playing with it a little then I made it so I can keep the session, but after reloading or moving to another page (which use the same layout, by the way), the session immediately closes itself.
What could be the issue behind this behaviour?
Update: I've found the problem. It seems to be this layout in particular which sets a navbar; it has an iframe that I thought was the problem, but when removing the iframe content (which is inside a modal, that I remove as well), the error keeps hapening - It closes the user's session and throws the exception.
#yield('nav')
<nav class="navbar navbar-dark bg-dark navbar-expand-lg sticky-top">
<a class="navbar-brand" href="/">Printed</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 mr-auto">
<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="#">Conóce</a>
</li>
<li class="nav-item">
<a class="nav-link" href="" data-toggle="modal" data-target="#contacto">Contacto</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">
Catálogo
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="/productos">Productos</a>
<a class="dropdown-item" href="/servicios">Servicios</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Promociones</a>
</div>
</li>
<li class="nav-item">
Portafolio de Proyectos
</li>
</ul>
#if(Auth::check() == false)
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Ingresar</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="{{route('login')}}">Iniciar Sesión</a>
<a class="dropdown-item" href="{{route('register')}}">Registrarse</a>
</div>
</li>
#endif
#if(Auth::check())
<li class="nav-item">
Hello, {{Auth::user()->email}} !
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Opciones</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="">Panel de Usuario</a>
<a class="dropdown-item" href="{{Auth::logout()}}">Cerrar Sesión</a>
</div>
</li>
#endif
</div>
</nav>
Edit: Good news, I've discovered my issue. It seems to be this part in particular that somehow "triggers" itself. Could it be that I'm missing a closure on the tags somewhere?
<a class="dropdown-item" href="{{Auth::logout()}}">Cerrar Sesión</a>
Im using the laravel auth. When a guest user access to the app we should see the links:
Item 1, Item 2, Login and Item 3
When he login, for example with the name John, he should see the links:
Item 1, Item 2, John, Item 3
But its not working, when the user logins just appears the links:
John, Item 3
The Item1 and Item2 dont appears. Do you know why?
<ul class="navbar-nav">
#guest
<li class="nav-item">
<a class="nav-link" href="">Item 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Item 2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{{ route('login') }}">Login</a>
</li>
#else
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="userDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fa fa-user" aria-hidden="true"></i> {{ Auth::user()->name }}
</a>
<div class="dropdown-menu" aria-labelledby="userDropdown">
<a class="dropdown-item text-gray" href="{!! url('/item1'); !!}">Login Item 1</a>
<div class="dropdown-divider text-gray"></div>
<a class="dropdown-item text-gray" href="{{ route('logout') }}"
onclick="event.preventDefault();
document.getElementById('logout-form').submit();">
Logout
</a>
<form id="logout-form" action="{{ route('logout') }}" method="POST">
{{ csrf_field() }}
</form>
</div>
</li>
#endguest
<li class="nav-item d-none d-lg-block px-0">
<a class="btn btn-outline-primary btn-sm font-weight-bold" href="">
Item 3
</a>
</li>
</ul>
#guest is used for non-login user.
You should change it to
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="">Item 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Item 2</a>
</li>
#guest
<li class="nav-item">
<a class="nav-link" href="{{ route('login') }}">Login</a>
</li>
#endguest
#if(\Auth::check())
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="userDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fa fa-user" aria-hidden="true"></i> {{ Auth::user()->name }}
</a>
<div class="dropdown-menu" aria-labelledby="userDropdown">
<a class="dropdown-item text-gray" href="{!! url('/item1'); !!}">Login Item 1</a>
<div class="dropdown-divider text-gray"></div>
<a class="dropdown-item text-gray" href="{{ route('logout') }}"
onclick="event.preventDefault();
document.getElementById('logout-form').submit();">
Logout
</a>
<form id="logout-form" action="{{ route('logout') }}" method="POST">
{{ csrf_field() }}
</form>
</div>
</li>
#endif
<li class="nav-item d-none d-lg-block px-0">
<a class="btn btn-outline-primary btn-sm font-weight-bold" href="">
Item 3
</a>
</li>
</ul>
Everything between #guest and #else will only appear if the user is not logged in.
Putting Item 1 and Item 2 right after the #guest directive means, you want Item 1 and Item 2 to appear if the user it is not logged in
Change you code to
<li class="nav-item">
<a class="nav-link" href="">Item 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Item 2</a>
</li>
#guest
<li class="nav-item">
<a class="nav-link" href="{{ route('login') }}">Login</a>
</li>
#else
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="userDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fa fa-user" aria-hidden="true"></i> {{ Auth::user()->name }}
</a>
<div class="dropdown-menu" aria-labelledby="userDropdown">
<a class="dropdown-item text-gray" href="{!! url('/item1'); !!}">Login Item 1</a>
<div class="dropdown-divider text-gray"></div>
<a class="dropdown-item text-gray" href="{{ route('logout') }}"
onclick="event.preventDefault();
document.getElementById('logout-form').submit();">
Logout
</a>
<form id="logout-form" action="{{ route('logout') }}" method="POST">
{{ csrf_field() }}
</form>
</div>
</li>
#endauth
<li class="nav-item d-none d-lg-block px-0">
<a class="btn btn-outline-primary btn-sm font-weight-bold" href="">
Item 3
</a>
</li>
</ul>
You can read more about those directives here
Change it to:
<li class="nav-item">
<a class="nav-link" href="">Item 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Item 2</a>
</li>
#guest
<li class="nav-item">
<a class="nav-link" href="{{ route('login') }}">Login</a>
</li>
#endguest
#auth
<li class="nav-item dropdown">
....
</li>
#endauth
<li class="nav-item d-none d-lg-block px-0">
<a class="btn btn-outline-primary btn-sm font-weight-bold" href="">
Item 3
</a>
</li>