I want to change side bar menu to make it open and active when it requested. Here is my code:
<li class="nav-item has-treeview {{Request::is('backend/*') ? 'menu-open':''}}">
<a href="#" class="nav-link {{(request()->segment(1) == 'backend') ? 'active':''}}">
{{$menu->name}}
#if(count($menu->children) > 0)
<i class="fas fa-angle-left right"></i>
#endif
</a>
<ul class="nav nav-treeview #if($menu->parent_id === 0 && count($menu->children) > 0 ) dropdown #endif">
<li class="nav-item has-treeview {{Request::is('backend*') ? 'menu-open':''}}">
#foreach($menu->children as $menu)
<a href="{{ url('backend/'.$menu->slug) }}" class="nav-link {{request()->is('backend/library-setting*') ? 'active':''}}">
{{$menu->name}}
#if (count($menu->children) > 0)
<i class="fas fa-angle-left right"></i>
#endif
</a>
#if(count($menu->children) > 0)
<ul class="#if($menu->parent_id !== 0 && (count($menu->children) > 0)) nav nav-treeview show #endif dropdown" aria-labelledby="dropdownBtn">
#foreach($menu->children as $menu)
<li class="nav-item has-treeview">
<a href="{{ url('backend/'.$menu->slug) }}" class="nav-link {{ Request::is('backend/'.$menu->slug) ? ' active':''}}">
{{$menu->name}}
#if(count($menu->children) > 0)
<i class="fas fa-angle-left right"></i>
#endif
</a>
</li>
#endforeach
</ul>
#endif
#endforeach
</li>
</ul>
</li>
The problem with your code is, You have not mentioned Request::is('backend/*') inside the #if. If you put it inside the #if statement. It will work. Try like below,
<li #if(Request::is('backend/*')) class="active" #endif>
Blog
</li>
Related
why I can't setlocale from file web.php routes, this's code:
Route::get('language/{lang}', function ($lang) {
App()->setLocale($lang);
session()->put('locale', $lang);
return redirect()->back();
})->name('langroute');
and this one is menu select:
<li class="nav-item btn-rotate dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLang" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<img width="25" src="{{ asset('assets_front/images/'.App::getLocale().'.png') }}" class="img-responsive img-bandera" alt="#lang('idioma') #lang('navigation.languages-'. App::getLocale())">
<p>
<span class="d-lg-none d-md-block">{{ trans_choice('words.idioma', 1) }}</span>
</p>
</a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownMenuLang">
#foreach (Config::get('app.languages') as $language)
#if ($language != App::getLocale())
<a class="dropdown-item" href="{{ route('langroute', $language) }}">
<img width="25" src="{{ asset('assets_front/images/'.$language.'.png') }}" class="img-responsive img-bandera" alt="#lang('idioma') #lang('navigation.languages-'. App::getLocale())">
#lang('navigation.languages-'. $language)
</a>
#endif
#endforeach
</div>
</li>
what I'm wrong?
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>
In below code role row is active but while i click in roles create inside roles page which is not mentioned in the sidebar the column is inactive
image for the create page is https://prnt.sc/qhspxs
image for the index page is https://prnt.sc/qhsq5o
<li class="treeview {{Request::is('admin/administration/*') ? 'active':''}}" >
<a href="#">
<i class="fa fa-user-plus"></i> <span>Administration</span>
<span class="pull-right-container">
<i class="fa fa-angle-left pull-right"></i>
</span>
</a>
<ul class="treeview-menu">
<li class="{{'admin/administration/roles' == request()->path() ? 'active' : ''}}"><i class="fa fa-users"></i> Roles</li>
<li class="{{'admin/administration/users' == request()->path() ? 'active' : ''}}"><i class="fa fa-users"></i> Users</li>
<li class="{{'admin/administration/company' == request()->path() ? 'active' : ''}}"><i class="fa fa-users"></i> Companies</li>
</ul>
</li>
You should check if request path is in array of possible routes
Try following code
<li class="treeview {{Request::is('admin/administration/*') ? 'active':''}}" >
<a href="#">
<i class="fa fa-user-plus"></i> <span>Administration</span>
<span class="pull-right-container">
<i class="fa fa-angle-left pull-right"></i>
</span>
</a>
<ul class="treeview-menu">
<li class="{{in_array(request()->path(),['admin/administration/roles','admin/administration/roles/create','admin/administration/roles/edit']) ? 'active' : ''}}"><i class="fa fa-users"></i> Roles</li>
<li class="{{'admin/administration/users' == request()->path() ? 'active' : ''}}"><i class="fa fa-users"></i> Users</li>
<li class="{{'admin/administration/company' == request()->path() ? 'active' : ''}}"><i class="fa fa-users"></i> Companies</li>
</ul>
</li>
Get the current route and check if it is equal to the Selected Option:
<li>
Administration
<ul style="<?php if (Request::is('administration/*')) echo "display:block"; ?>">
<li class ="{{ Route::currentRouteNamed('administration.index') ? 'active' : '' }}">
> View Tasks
</li>
</ul>
</li>
I have a dynamic menu and sub menu in my website and want to make not clickable menu to only those menu that have sub menu.
here is code
#foreach($levels as $category)
<li class="text-black-50">
<a href="/category/{{ $category->slug }}" title="">
{{ $category->name }}
</a>
</li>
#if($category->children->count() > 0 )
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
#foreach($category->children as $child)
<li>
{{ $child->name }}
</li>
#endforeach
</ul>
</li>
#else
#endif
#endforeach
I quick solution over your code is don't use href att when the menu has a submenu. Using your code:
#foreach($levels as $category)
<li class="text-black-50">
#if($category->children->count() > 0 )
<a href="/category/{{ $category->slug }}" title="">
{{ $category->name }}
</a>
#else
<a style="pointer-events: none; cursor: default;">
{{ $category->name }}
</a>
#endif
</li>
#if($category->children->count() > 0 )
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
#foreach($category->children as $child)
<li>
{{ $child->name }}
</li>
#endforeach
</ul>
</li>
#else
#endif
#endforeach
I hope It's helps!
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>