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!
Related
how to show navbar only when i opening special view. example i have create this is app.blade.php
#guest
<li class="nav-item">
<a class="nav-link" href="{{ route('login') }}">{{ __('Login') }}</a>
</li>
#if (Route::has('register'))
<li class="nav-item">
<a class="nav-link" href="{{ route('register') }}">{{ __('Register') }}</a>
</li>
#endif
#Post
<div>post New</div>
#endPost
#else
#endguest
i want to showing those navbar only if i opening post.blade.php ini my view
Get the route name whois to load post.blade.php this view and then checked if the current route Route::currentRouteName(); match your routes.
//Example
#if('load_view_route_name' == Route::currentRouteName())
//Your Nav or Other elements
#endif
How can I set active selected tab and and also open the sub tab if the page I'm on is a sub page on my sidebar? For example if I open Contractor Association page, the Users tab should expand the highlight Contractor Association tab. Right now every time I open a new page the sidebar is will reset back
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link {{ (request()->is('home')) ? 'text-primary' : '' }}"
href="{{ route('dev-admin.home') }}">
<i class="ni ni-tv-2"></i> {{ __('Dashboard') }}
</a>
</li>
<li class="nav-item">
<a class="nav-link {{ (strpos(Route::currentRouteName(), 'dev-admin.home') == 0) ? 'text-primary' : '' }}"
href="#users" data-toggle="collapse" role="button" aria-expanded="true" aria-controls="users">
<i class="fa fa-users"></i>
<span class="nav-link-text">{{ __('Users') }}</span>
</a>
<div class="collapse {{ (request()->is('dev-admin/developer-admins*') ? 'show' : '' }}"
id="users">
<ul class="nav nav-sm flex-column">
<li class="nav-item">
<a class="nav-link {{ (request()->is('developer-admins')) ? 'text-primary' : '' }}"
href="{{ route('dev-admin.developer-admins.index') }}">
{{ __('Admins') }}
</a>
<a class="nav-link {{ (request()->is('dev-admin/defect-types*')) ? 'text-primary' : '' }}"
href="{{ route('dev-admin.clerk-of-works.index') }}">
{{ __('Clerks of Work') }}
</a>
<a class="nav-link {{ (request()->is('developer-admins')) ? 'text-primary' : '' }}"
href="{{ route('dev-admin.developer-contractor-associations.index') }}">
{{ __('Contractor Association') }}
</a>
</li>
</ul>
</div>
</li>
</ul>
you can write the code like in side bar all the section
<li class="#if(Route::is('developer-admins')) {{ 'active' }} #endif"
<a href="{{ route('dev-admin.developer-admins.index') }}">
{{ __('Admins') }}
</a></li>
and also you can use like
<li class="{{ set_active(['login*']) }}">
Login
</li>
<li class="{{ set_active(['register*']) }}">
Signup
</li>
I am using bellow code for many project which is used into production ready web app and api.
Add bellow line into html class attributes for highlighting active route.
{{ request()->is('dashboard/report') ? 'active' : '' }}
This is really handy for active class.
So I fix it and also show/open tab for selected page by doing something like this, it appears the url I gave is incomplete, thanks everyone for the suggestion..
<div class="collapse {{ (request()->is('dev-admin/developer-admins*') || request()->is('dev-admin/clerks-of-works*') || request()->is('dev-admin/developer-contractor-associations*')) ? 'show' : '' }}"
id="users">
<ul class="nav nav-sm flex-column">
<li class="nav-item">
<a class="nav-link {{ (request()->is('dev-admin/developer-admins*')) ? 'text-primary' : '' }}"
href="{{ route('dev-admin.developer-admins.index') }}">
{{ __('Admins') }}
</a>
<a class="nav-link {{ (request()->is('dev-admin/clerks-of-works*')) ? 'text-primary' : '' }}"
href="{{ route('dev-admin.clerk-of-works.index') }}">
{{ __('Clerks of Work') }}
</a>
</li>
</ul>
</div>
Expected Output(show most of the time)
<li class="m-menu__item m-menu__item--active " aria-haspopup="true" data-menu-submenu-toggle="hover">
<a href="http://127.0.0.1:8000/invoices" class="m-menu__link m-menu__toggle">
<i class="m-menu__link-icon flaticon-clipboard"></i>
<span class="m-menu__link-text">
Invoices
</span>
</a>
</li>
Broken Html(sometimes throws output with broken tags)
<li class="m-menu__item m-menu__item--active " aria-haspopup="true" data-menu-submenu-toggle="hover">
<a href="http://127.0.0.1:8000/invoices" class="m-menu__link m-menu__toggle">
<i class="m-menu__link-icon flaticon-clipboard"></i>
<s </span>
</a>
</li>
blade code
<li class="m-menu__item #if(isset($sidebar) && $sidebar == 'invoice') m-menu__item--active #endif" aria-haspopup="true" data-menu-submenu-toggle="hover">
<a href="{{ asset('invoices') }}" class="m-menu__link m-menu__toggle">
<i class="m-menu__link-icon flaticon-clipboard"></i>
<span class="m-menu__link-text">
Invoices
</span>
</a>
</li>
tried enabling errors, logging disabling cache but still no luck
is there some error in blade rendering
Try to improve your code, but may not fix the bug.
<li class="m-menu__item {{ isset($sidebar) && $sidebar == 'invoice' ? 'm-menu__item--active' : '' }}" aria-haspopup="true" data-menu-submenu-toggle="hover">
<a href="{{ url('/invoices') }}" class="m-menu__link m-menu__toggle">
<i class="m-menu__link-icon flaticon-clipboard"></i>
<span class="m-menu__link-text">
Invoices
</span>
</a>
</li>
use asset() function only to load asset files (JS, CSS, images)
use url('uri') on anchor or route('route-name') even better
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
Is there a way to customize the paginator view in Laravel 5.1.
I want to add a first and last link in addition to the out of the box previous and next links.
I want to change the previous and next links to display icons instead of text but display text for screen readers.
I want to limit the number of page links to display only 5.
Below is what I'm trying to achieve.
<ul class="pagination no-margin pull-right">
<li class="disabled">
First
</li>
<li class="disabled">
<a href="#">
<span class="sr-only">Previous</span>
<i class="fa fa-caret-left" aria-hidden="true"></i>
</a>
</li>
<li class="active">
1
</li>
<li class="">
2
</li>
<li class="">
3
</li>
<li class="">
4
</li>
<li class="">
5
</li>
<li>
<a href="#">
<span class="sr-only">Next</span>
<i class="fa fa-caret-right" aria-hidden="true"></i>
</a>
</li>
<li >
Last
</li>
</ul>
In instead of
$users->render()
use
#include('pagination', ['paginator' => $users])
create pagination.blade in views directory
add this code in pagination file
#if ($paginator->lastPage() > 1)
<ul class="pagination">
<li class="{{ ($paginator->currentPage() == 1) ? ' disabled' : '' }}">
Previous
</li>
#for ($i = 1; $i <= $paginator->lastPage(); $i++)
<li class="{{ ($paginator->currentPage() == $i) ? ' active' : '' }}">
{{ $i }}
</li>
#endfor
<li class="{{ ($paginator->currentPage() == $paginator->lastPage()) ? ' disabled' : '' }}">
<a href="{{ $paginator->url($paginator->currentPage()+1) }}" >Next</a>
</li>
</ul>
#endif
you can add your style in this file
get the last page $paginator->lastPage() and first page is 1
You can modify this file for customizing the paginator styling
\vendor\laravel\framework\src\Illuminate\Pagination\BootstrapThreePresenter.php