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!
Related
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>
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>
Hi guys i have trouble in making different icon for url using laravel breadcrump, , here the picture
I want to make icon HRMS and Dashboard is different
Here my blade file
<link rel="stylesheet" type="text/css" href="{{ asset("/css/hrms2.css") }}">
#if (count($breadcrumbs))
<ol class="breadcrumb">
#foreach ($breadcrumbs as $breadcrumb)
#if ($breadcrumb->url && !$loop->last)
<li class="breadcrumb-item" style="">
<a class="bread-color" href="{{ $breadcrumb->url }}">
<i class="fa fa-home"></i> {{ $breadcrumb->title }}</a>
</li>
#else
<li class="breadcrumb-item active">{{ $breadcrumb->title }}</li>
#endif
#endforeach
</ol>
#endif
You need to pass icon name also in $breadcrumb object and use $breadcrumb->icon instead of fa-home
<ol class="breadcrumb">
#foreach ($breadcrumbs as $breadcrumb)
#if ($breadcrumb->url && !$loop->last)
<li class="breadcrumb-item" style=""><a class="bread-color" href="{{ $breadcrumb->url }}"> <i class="fa {{ $breadcrumb->icon }}"></i> {{ $breadcrumb->title }}</a></li>
#else
<li class="breadcrumb-item active">{{ $breadcrumb->title }}</li>
#endif
#endforeach
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>