How to make li class active dynamically in laravel? - php

My HTML code is
<div id="sidebar"><i class="icon icon-home"></i>Dashboard
<ul>
<li class="active"><i class="icon icon-home"></i> <span>Scam Type</span> </li>
<li> <i class="icon icon-signal"></i> <span>Scam Database</span> </li>
<li> <i class="icon icon-inbox"></i> <span>Scam Story</span> </li>
<li><i class="icon icon-th"></i> <span>Keyword</span></li>
<li><i class="icon icon-th"></i> <span>Category</span></li>
<li><i class="icon icon-th"></i> <span>Sub Category</span></li>
</ul>
</div>
Here i gave li class active as like in bootstrap and its not working, but i don't know how to give in laravel and i am very beginner of laravel, so please avoid minus votes and give me the right solution for it.. How Should i change my code to get li class active dynamically?

You can use ternary operator. For example, you can check URI for the current route:
<li{{ request()->is('scam-types') ? ' class="active"' : '' }}>
You can also use * as wildcard:
<li{{ request()->is('scam-type-number-*') ? ' class="active"' : '' }}>
Or you can check route name:
<li{{ request()->route()->getName() === 'ScamType.index' ? ' class="active"' : '' }}>

Try Below Code to write each li tag for check some text in URL
if (strpos($_SERVER['REQUEST_URI'], "ScamType") !== false){
echo "active";
}
Write above code in class.
Ex.
<li class="{{ if (strpos($_SERVER['REQUEST_URI'], "ScamType") !== false){ echo "active"; } }}"><i class="icon icon-home"></i> <span>Scam Type</span> </li>

From above answer I have try and doesnt work because class="active" must be class=active
<li><a class="{{ request()->routeIs('about.index*') ? 'active-menu' : '' }}" href="{{route('about.index')}}"><i class="fa fa-desktop"></i> About</a></li>

routeIs('Route_Name*') ? 'active-menu' : '' }}">
In Route Name just write Route name defined in Routes

Related

Why link become active without adding the class name

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!

Why my active link on sidebar is not functioning?

I already tried this 2 types of code which is {{Request::is('residential') ? 'active' : ''}} and {{ 'contractor' == request()->path() ? 'active' : '' }} But still nothing is happened. This is my whole code for sidebar.blade.php
<div id="sidebar-nav" class="sidebar">
<div class="sidebar-scroll">
<nav>
<ul class="nav">
#if(auth()->user()->role == 'admin')
<li class="{{Request::is('residential') ? 'active' : ''}}">
<i class="lnr lnr-apartment"></i><span>Residence</span>
</li>
<li class="{{ 'contractor' == request()->path() ? 'active' : '' }}">
<i class="lnr lnr-magic-wand"></i><span>Contractor</span>
</li>
#endif
</ul>
</nav>
</div>
</div>
web.php
Route::group(['middleware' => 'auth','checkRole:admin'], function () {
Route::get('/residential','ResidentialController#index');
Route::get('/contractor', 'ContractorController#index')->name('contractor')
}
What I suppose to do? I hope someone can help me to figure this out.

how to add class active in menu laravel if use treeview

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

Laravel 5.1 customizing the paginator styling

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

Set non-active class with uri-segment CodeIgniter

i'm trying to use uri segment to add class active and non-active for my navigation menu. this is my code.
<li <?php echo $uri1 == "admin" ? "class='active'" : "class=''"; ?>>
<i class="fa fa-fw fa-dashboard"></i> Dashboard
</li>
<li <?php echo $uri1 == "admin" || $uri2 == "admin/categories" ? "class='active'" : "class=''"; ?>>
<i class="fa fa-fw fa-cubes"></i> Categories
</li>
but when i tried this one, they both got active class on their list even it's not their current page. And the case is: how to set one non-active class if it's not their current page. Will appreciate any help, thanks before!
My guess is you used the || insted of &&. Try this:
<li <?php echo $uri1 == "admin" ? "class='active'" : "class=''"; ?>>
<i class="fa fa-fw fa-dashboard"></i> Dashboard
</li>
<li <?php echo $uri1 == "admin" && $uri2 == "admin/categories" ? "class='active'" : "class=''"; ?>>
<i class="fa fa-fw fa-cubes"></i> Categories
</li>

Categories