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>
Related
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>
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 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>
I have a application with extends a view with name "notification". How you can see in the picture.
That fragment is just a list, don't extends anything, How I pass a variable to that list? Something fixed. Any suggestion?
<li class="dropdown notifications-menu">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<i class="livicon" data-name="bell" data-loop="true" data-color="#e9573f"
data-hovercolor="#e9573f" data-size="28"></i>
<span class="label label-warning">7</span>
</a>
<ul class=" notifications dropdown-menu drop_notify">
<li class="dropdown-title">Você tem novas notificações</li>
<li>
<!-- inner menu: contains the actual data -->
<ul class="menu">
#foreach($notificacao as $value)
<li>
<i class="livicon default" data-n="asterisk" data-s="20" data-c="white"
data-hc="white"></i>
Você tem novas perguntas
<small class="pull-right">
<span class="livicon paddingright_10" data-n="timer" data-s="10"></span>
{{$value->created_at->diffForHumans()}}
</small>
</li>
#endforeach
</ul>
</li>
<li class="footer">
View all
</li>
</ul>
</li>