I am having trouble to adding class "menu-open" and "active" if I use a Multi-level menu.
I succeeded in adding active class in single menu.
Single Menu
<li class="nav-item">
<a href="{{ route('listTemuan') }}" class="nav-link {{ Route::currentRouteNamed('listTemuan') ? 'active' : '' }}">
<i class="fa fa-table nav-icon"></i>
<p>
List Temuan
</p>
</a>
</li>
I don't understand how to make it in Multi-level menu.
This is for my Multi-level menu:
<li class="nav-item has-treeview"> //I want to add class menu-open in here
<a href="#" class="nav-link"> //I want to add class active in here
<i class="fa fa-gear nav-icon"></i>
<p>
Setting
<i class="right fa fa-angle-left"></i>
</p>
</a>
<ul class="nav nav-treeview">
<li class="nav-item">
<a href="{{ route('UserPekerja') }}" class="nav-link {{ Route::currentRouteNamed('UserPekerja') ? 'active' : '' }}">
<i class="fa fa-circle-o nav-icon"></i>
<p>User Pekerja</p>
</a>
</li>
</ul>
</li>
Use your route name to accomplish it like below code
#if(\Request::route()->getName() == 'route name')
class="nav-item has-treeview open"
#else class="nav-item has-treeview"
#endif
use same segment with appropriate checking
#if(\Request::route()->getName() == 'expected route name')
class="nav-link active"
#else class="nav-link"
#endif
Related
I'm using Laravel 9 for the project. I'm having problem on active menu on current page. Menu become active only when I added the route to href. Active class added automatically on list class.
When I added
{{ route('any-route-name') }}
to my link as below sample
<li class="nav-item">
<a class="nav-link" href="{{ route('any-route-name') }}"> <i class="fa fa-building nav-icon"></i> Companies</a>
</li>
an active class added to list. Did an inspect element, active class added to the list as below sample
<li class="nav-item active">
<a class="nav-link" href="{{ route('any-route-name') }}"> <i class="fa fa-building nav-icon"></i> Companies</a>
</li>
did inspection on view page source but active class not exist. The moment I remove the
{{ route('any-route-name') }}
active class no more added. Can any one explain/assist me on this. I don't have any JS to add active class after page rendered.
is('admin/cities')) ? 'active' : '' }}">
**Approach 2. Starting with the URL**
is('admin/cities*')) ? 'active' : '' }}">
Try this code
<li class="nav-item">
<a class="nav-link #if(Request::segment(1) == 'any-route-name') active #endif" href="{{ route('any-route-name') }}"> <i class="fa fa-building nav-icon"></i> Companies</a>
</li>
Hope this help!
Call to undefined method Illuminate\Session\Store::user() (View: C:\xampp\htdocs\vms_ut\resources\views\layouts\navbar.blade.php) (View: C:\xampp\htdocs\vms_ut\resources\views\layouts\navbar.blade.php)
View
<ul class="navbar-nav">
<li>Home</li>   
#if (Session::user()->level == 'Admin')
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button">
Master <span class="caret"></span>
</a>
<ul class="dropdown-menu" role="menu">
<li>Data</li>
<li>Warehouse</li>
</ul>
</li>
#else (Session::user()->level == 'Penyedia')
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button">
Master <span class="caret"></span>
</a>
<ul class="dropdown-menu" role="menu">
<li>Data</li>
</ul>
</li>
#endif
</ul>
view
enter image description here
please help me
You mean Auth instead of Session?
Change this line:
#if (Session::user()->level == 'Admin')
To this line
#if (Auth::user()->level == 'Admin')
You can use session facade as such:
use Illuminate\Support\Facades\Session ;
Am using same navbar for shop products and shop product. #if statement isn't working. Here is navbar:
<ul class="navbar-nav ml-auto">
<li class="nav-item">
#if (\Request::path('/shop'))
<a class="nav-link js-scroll-trigger" href="#page-top">Shop</a>
#elseif (\Request::path('/product'))
<a class="nav-link js-scroll-trigger" href="/shop">Shop</a>
#endif
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="#contact">Contact</a>
</li>
</ul>
Here is routes:
Route::view('/product', 'shop.product');
Route::get('/shop', 'ShopController#index')->name('shop.index');
You can use request()->is() function of request. as below:
#if (request()->is('shop'))
<a class="nav-link js-scroll-trigger" href="#page-top">Shop</a>
#elseif (request()->is('product'))
<a class="nav-link js-scroll-trigger" href="/shop">Shop</a>
#endif
I am trying to use AdminLTE3 as admin panel in laravel and I have nav-item links which doesn't activate when I click them. I don't know how to fix this. I used the starter.html from adminLTE3 and I have all the required assets for adminLTE3 but my nav-item links are not activated, How can I fix this, I would really appreciate for any help. my side bar code is :
<nav class="mt-2">
<ul class="nav nav-pills nav-sidebar flex-column" data-widget="treeview" role="menu" data-accordion="false">
<!-- Add icons to the links using the .nav-icon class
with font-awesome or any other icon font library -->
<li class="nav-item has-treeview menu-open">
<a href="#" class="nav-link active">
<i class="nav-icon fa fa-tachometer-alt"></i>
<p>
Dashboard
<i class="right fa fa-angle-left"></i>
</p>
</a>
<ul class="nav nav-treeview">
<li class="nav-item">
<a href="{{route('home')}}" class="nav-link">
<i class="fab fa-elementor nav-icon"></i>
<p>Main</p>
</a>
</li>
</ul>
</li>
<li class="nav-item has-treeview">
<a href="#" class="nav-link">
<i class="nav-icon fa fa-book"></i>
<p>
Posts
<i class="right fa fa-angle-left"></i>
</p>
</a>
<ul class="nav nav-treeview">
<li class="nav-item">
<a href="{{route('posts.index')}}" class="nav-link">
<i class="nav-icon fa fa-book"></i>
<p>All Posts</p>
</a>
</li>
</ul>
</li>
<li class="nav-item has-treeview">
<a href="#" class="nav-link">
<i class="nav-icon fa fa-strikethrough"></i>
<p>
Services
<i class="right fa fa-angle-left"></i>
</p>
</a>
<ul class="nav nav-treeview">
<li class="nav-item">
<a href="{{route('services.index')}}" class="nav-link">
<i class="fa fa-asterisk nav-icon"></i>
<p>All Service</p>
</a>
</li>
</ul>
</li>
<li class="nav-item">
<a href="{{route('gallery.index')}}" class="nav-link">
<i class="nav-icon fa fa-th"></i>
<p>
Galleries
</p>
</a>
</li>
<li class="nav-item">
<a href="{{route('logout')}}" class="nav-link">
<i class="nav-icon fa fa-code"></i>
<p>
Logout
</p>
</a>
</li>
</ul>
</nav>
I tried the suggestion provided by kapitan
nav-link {{ Route::current()->getName() == 'posts.index' ? 'active' : '' }}
but problem is when I click any nav-item it hides like this
when I click the service drop down then it shows like this
For simplicity sake:
<a href="#" class="nav-link {{ Route::current()->getName() == 'my.route.name' ? 'active' : '' }}">
As you can see, this is a long cut method, you can improve this further. But this is a good starting point for you.
UPDATE:
Untested, but can you please try this:
<a href="#" class="nav-link {{ Request::is('my/url','my/url/*') ? 'active' : '' }}">
UPDATE 2 :
<li class="nav-item has-treeview {{ Request::is('my/url','my/url/*') ? 'active' : '' }}">
<a href="#" class="nav-link">
<i class="nav-icon fa fa-strikethrough"></i>
<p>
Services
<i class="right fa fa-angle-left"></i>
</p>
</a>
<ul class="nav nav-treeview {{ Request::path() == 'my/url/here' ? 'menu-open' : '' }}">
<li class="nav-item">
<a href="{{route('services.index')}}" class="nav-link {{ Request::is('my/url/here') ? 'active' : '' }}">
<i class="fa fa-asterisk nav-icon"></i>
<p>All Service</p>
</a>
</li>
</ul>
</li>
I want to make my index page with both guest and auth functions.
When guests visit, they could try logging in; And after login, it will show the user's info such as username.
Route routes/web.php:
Route::get('vendor', function () {
return view('vendor.home');
})->name('vendor')->middleware('web');
in blade template i use Auth::check() to authentication but failed.if i use middleware(['web','auth:vendor']) if guest will redirect to login page
#if(Auth::guest())
<li> <strong><i class="fa fa-user"></i> Login </strong> </li>
<li> <strong>Register</strong> </li>
#else
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">
{{ Auth::user()->name }} <span class="caret"></span>
</a>
<ul class="dropdown-menu" role="menu">
<li>
Log Out
</li>
</ul>
</li>
#endif
{{ dd(Auth::check()) }}
Every time I logged in successfully, it will still show login button instead of user name button, after I REFRESH the index page.
this result
try replace Auth:: with \Auth:: or auth()
#if(\Auth::guest())
<li> <strong><i class="fa fa-user"></i> Login </strong> </li>
<li> <strong>Register</strong> </li>
#else
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">
{{ \Auth::user()->name }} <span class="caret"></span>
</a>
<ul class="dropdown-menu" role="menu">
<li>
Log Out
</li>
</ul>
</li>
#endif
{{ dd(\Auth::user()) }}
This my answer
#if(Auth::guard('vendor')->check())
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">
{{ Auth::guard('vendor')->user()->name }} <span class="caret"></span>
</a>
<ul class="dropdown-menu" role="menu">
<li>
Dashboard
</li>
<li>
<a href="{{ route('vendor.logout') }}" >Log Out</a>
</li>
</ul>
</li>
#else
<li> <strong><i class="fa fa-lock"></i> Login </strong> </li>
<li> <strong>Register</strong> </li>
#endif