I want to add a custom active class to side menu that has the current route. I know that I can get current url by url()->current() and compare it to route('something'), but my challenge is when I want to get the active class both on a parent and child menu item when a child item is selected.
My code for a menu item without any children is:
<li class=" #if(url()->current()==route('home')) custom_active_menu #endif ">
you can use if with multiple or statements for the parent. i use Request class generally, so that i can use a pattern with just an asterisk instead of multiple or statement. however you can use use anything as you wish. an exmaple using Request class
<li class="{{ \Request::is('menu/*') || \Request::is('menu') ? 'active' : '' }}">
<a href="#">
<i class="metismenu-icon pe-7s-bandaid"></i>
Menu
<i class="metismenu-state-icon pe-7s-angle-down caret-left"></i>
</a>
<ul>
<li>
<a href="{{ route('menu.index') }}" class="{{ \Request::is('menu') ? 'active' : '' }}">
<i class="metismenu-icon"></i>
Menu Index
</a>
</li>
<li>
<a href="{{ route('menu.create') }}" class="{{ \Request::is('menu/create') ? 'active' : '' }}">
<i class="metismenu-icon"></i>
Menu Create
</a>
</li>
</ul>
</li>
here i am checking for a pattern in request url using \Request::is('menu/*'), which means this li will always be active if the request url matches any pattern starting by menu/ like menu/create or menu/1/edit. with an or statement i am checking for exact request url menu.
with child, it' just a simple if statement. if the current url matches with the menu url add the class active.
with your example, i would do something like for parent
<li class=" #if (url()->current() == route('home') || url()->current() == route('another_route')) custom_active_menu #endif ">
and for child just a single if
<li class=" #if (url()->current() == route('home')) custom_active_menu #endif ">
Related
Hi I am encountering a bug where checking a string variable whether it matches certain string is not working, even though from checking the variable through the vue browser plugin shows that the string has the value of "&laqua; Previous".
I am just trying to paginate the returned value by looping and deciding to show or not show based on the string variable not being both "&laqua; Previous" and "Next »". And it keeps on failing although the string value clearly has the above values.
One thing I had also noticed is that &laqua is the double left angle quote and » is the double right angle quote. This clearly has to do something with the problem.
Pagination.vue
<template>
<nav>
<ul class="pagination justify-content-center">
<li class="page-item" v-for="(d, index) in data" :key="index">
<a
class="page-link"
href="#"
v-show="d.label !== '« Previous' && d.label !== 'Next »'"
>
{{ d.label }}
</a>
</li>
<!-- <li class="page-item active">
<a class="page-link" href="#">2 <span class="sr-only">(current)</span></a>
</li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item">
<a class="page-link" href="#">
<i class="fa fa-angle-right"></i>
<span class="sr-only">Next</span>
</a>
</li> -->
</ul>
</nav>
</template>
<script>
export default {
name: "Pagination",
props: {
data: Array,
},
}
</script>
i am trying to Set Current Category to active when i reload my page but unfortunately it's not working please help me thanks.
html view
<ul class='visible-links nav nav-tabs' role="tablist">
#foreach($productCategories as $productCategory)
<li>
<a class="tab-a active-a productcategory {{ Request::is('') ? 'active' : '' }}" data-id="{{$productCategory->id}}" data-toggle="tab" href="{{$productCategory->id}}" role="tab" data-toggle="tab">{{$productCategory->name}}
</a>
</li>
#endforeach
</ul>
Route
Route::get('products/get-product', 'ProductController#getproduct')->name('products.getproduct');
Route::get('/products/{slug}', 'ProductController#index')->name('products');
you can try this :
assuming this is from route Route::get('/products/{slug}'...
<ul class='visible-links nav nav-tabs' role="tablist">
#foreach($productCategories as $productCategory)
<li>
<a class="tab-a active-a productcategory
{{ request()->route('slug') == $productCategory->slug ? 'active' : '' }}"
data-id="{{$productCategory->id}}" data-toggle="tab" href="{{$productCategory->id}}"
role="tab" data-toggle="tab">{{$productCategory->name}}
</a>
</li>
#endforeach
</ul>
//Request::route() or the helper request()->route()
if you are using model binding in the controller you can use request()->route('slug')->id == $productCategory->id
make sure that active class is triggering active tab, or else the active-a is the class triggering active tab
<!-- BEGIN HEADER MENU -->
<div class="nav-collapse collapse navbar-collapse navbar-responsive-collapse">
<ul class="nav navbar-nav">
<li class="dropdown dropdown-fw dropdown-fw-disabled active open selected">
<i class="icon-home"></i> Home
<ul class="dropdown-menu dropdown-menu-fw">
<li>
<i class="icon-bar-chart"></i> View Photo
</li>
<li class="active">
<i class="icon-bulb"></i> About
</li>
<li>
<i class="icon-graph"></i> Contact
</li>
</ul>
</li>
<li class="dropdown dropdown-fw dropdown-fw-disabled">
<i class="icon-home"></i> Upload
<ul class="dropdown-menu dropdown-menu-fw">
<li>
<i class="icon-bar-chart"></i> Upload Photo
</li>
<li>
<i class="icon-bulb"></i> View Photo List
</li>
</ul>
</li>
</ul>
</div>
I am still new to this but basically, I have 5 pages (View Photo, About, Contact, Upload Photo, View Photo List). Currently, I want to show this HTML in all 5 pages so that it will be standardized. If I change the "picture/about" in one page to "photograph/about" for example, the 5 pages will need to reflect this change. This gets more complex as the number of pages increases.
Is there any way or technique in Laravel to solve this issue? Thanks.
Create a template file like Laravel provides app.blade.php in resources/template/ directory, use extends, sections etc for designing, please read Laravel Documentation for Templates
You can use partials for this.
If your issue is adding the active class to the correct link then you can just use request()->is() to check the current url:
<li class="{{ request()->is('picture/externalphotoviewer') ? 'active' : '' }}">
<a href="{{ url('picture/externalphotoviewer') }}">
<i class="icon-bar-chart"></i> View Photo </a>
</li>
<li class="{{ request()->is('picture/about') ? 'active' : '' }}">
<a href="{{ url('picture/about') }}">
<i class="icon-bulb"></i> About </a>
</li>
<li class="{{ request()->is('picture/contact') ? 'active' : '' }}">
<a href="{{ url('picture/contact') }}">
<i class="icon-graph"></i> Contact </a>
</li>
Simply create a blade file inside your resources/views directory and then use #include e.g.
reasources/views/partials/header.blade.php:
<div class="nav-collapse collapse navbar-collapse navbar-responsive-collapse">
<ul class="nav navbar-nav">
<li class="dropdown dropdown-fw dropdown-fw-disabled active open selected">
<a href="javascript:;" class="text-uppercase">
<i class="icon-home"></i> Home </a>
<ul class="dropdown-menu dropdown-menu-fw">
<li class="{{ request()->is('picture/externalphotoviewer') ? 'active' : '' }}">
<a href="{{ url('picture/externalphotoviewer') }}">
<i class="icon-bar-chart"></i> View Photo </a>
</li>
<li class="{{ request()->is('picture/about') ? 'active' : '' }}">
<a href="{{ url('picture/about') }}">
<i class="icon-bulb"></i> About </a>
</li>
<li class="{{ request()->is('picture/contact') ? 'active' : '' }}">
<a href="{{ url('picture/contact') }}">
<i class="icon-graph"></i> Contact </a>
</li>
</ul>
</li>
<li class="dropdown dropdown-fw dropdown-fw-disabled">
<a href="javascript:;" class="text-uppercase">
<i class="icon-home"></i> Upload </a>
<ul class="dropdown-menu dropdown-menu-fw">
<li>
<a href="{{ url('photo/create') }}">
<i class="icon-bar-chart"></i> Upload Photo </a>
</li>
<li>
<a href="{{ url('photo') }}">
<i class="icon-bulb"></i> View Photo List </a>
</li>
</ul>
</li>
</ul>
</div>
Then replace the header code in your other blade files with:
#include('partials.header')
NB
If you change the location of the header you will need to update the #include's as well e.g.
e.g. resources/views/layouts/main/header.blade.php would be #include('layouts.main.header')
Hope this helps!
My route is:
Route::get('header','HomeController#header')->name('header');
My functionality is:
public function header()
{
$header=ParentCategory::latest()->get();
return view('includes.header',compact('header'));
}
My view foreach loop is here:
#foreach($header as $pc)
<li class=" aligned-left parent dropdown " >
<a href="index7fa3.html?route=product/category&path=18"
class="dropdown-toggle" data-toggle="dropdown">
<span class="menu-title">{{$pc->name}}</span><b class="caret"></b></a>
#endforeach
I don't want to write their route which name is header, mention in browser I want to work my foreach loop without route name, header.
You can check for your variable first before looping through it:
#if($header)
#foreach($header as $pc)
<li class=" aligned-left parent dropdown " >
<a href="index7fa3.html?route=product/category&path=18"
class="dropdown-toggle" data-toggle="dropdown">
<span class="menu-title">{{$pc->name}}</span><b class="caret"></b>
</a>
</li>
#endforeach
#endif
Im using laravel to develop a website. There is a side panel for navigating between the different pages of the website. Some pages are grouped together in an accordion (or dropdown). When I click on one of the options within the accordion it navigates to the page but the accordion closes immediately. How do I keep it open??
here is how the accordion is
<li class="treeview">
<a href="#">
<span>Group of pages</span>
<ul class="treeview-menu"
style="display: none;">
<li>
Page 1
</li>
<li>
Page 2
</li>
</ul>
</li>
Any help is appreciated.
ps. It might be worth it to add that I am using AdminLTE as a template.
Need to add Active class in li
<li class="treeview {{ ((Request::is('a-page')) || (Request::is('a-second-page')) ? 'active' : '') }}">
<a href="#">
<span>Group of pages</span>
<ul class="treeview-menu">
<li class="{{ ((Request::is('a-page')) ? 'active' : '') }}">
Page 1
</li>
<li class="{{ ((Request::is('a-second-page')) ? 'active' : '') }}">
Page 2
</li>
</ul>
</li>
OR
<li class="treeview {{ ((Route::currentRouteName() == 'a-route') || (Route::currentRouteName() == 'a-second-route') ? 'active' : '') }}">
<a href="#">
<span>Group of pages</span>
<ul class="treeview-menu">
<li class="{{ ((Route::currentRouteName() == 'a-route') ? 'active' : '') }}">
Page 1
</li>
<li class="{{ ((Route::currentRouteName() == 'a-second-route') ? 'active' : '') }}">
Page 2
</li>
</ul>
</li>