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>
Related
I need to put session on the same page sidebar. when user click on any button session will get for that tab. like
Search Job
Customers
etc
In the sidebar the button or not link with any page. i am creating a dialogue box for each so their is no page for the links that's why i am facing the problem. when user click any of the sidebar button the name should highlight.
DashboardController
public function disp()
{
Session::put('page', 'search-job');
Session::put('page', 'customer');
return view('front.disp');
}
layout.blade.php
#if(Session::get('page')=="search-job")
<?php $active = "active"; ?>
#else
<?php $active = ""; ?>
#endif
<li class="nav-item {{$active}}">
<a href="javascript:void(0)" class="nav-link nav-toggle">
<span class="title">SEARCH JOBS</span>
</a>
</li>
#if(Session::get('page')=="customer")
<?php $active = "active"; ?>
#else
<?php $active = ""; ?>
#endif
<li class="nav-item {{$active}}">
<a href="javascript:void(0)" class="nav-link nav-toggle">
<span class="title">Customer</span>
</a>
</li>
How to handle on this sidebar
Thanks!
as i understand from the comments you want to have different active sessions then you have 2 options like below:
put them in different indexes like this:
Session::put('page-search-job', true);
Session::put('page-customer', false);
and in view check them like this:
<li class="nav-item {{ Session::get('page-search-job') == true ? 'active' : '' }}">
<a href="javascript:void(0)" class="nav-link nav-toggle">
<span class="title">SEARCH JOBS</span>
</a>
</li>
put it in an array like this:
Session::put('page', [
"search-job"=>true,
"customer"=>false
]);
and in view check them like this:
<li class="nav-item {{ Session::get('page')['search-job'] == true ? 'active' : '' }}">
<a href="javascript:void(0)" class="nav-link nav-toggle">
<span class="title">SEARCH JOBS</span>
</a>
</li>
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
i've tried using Request::is() for print some bootstrap class but unfortunately only work on parent route 'user', but when i using in their child not working 'user/create'
Here is my code
<ul class="dropdown-menu">
<li class="{{ Request::is('posts') ? 'active' : '' }}"><a class="nav-link" href="/posts">Posts</a></li>
<li class="{{ Request::is('posts/create') ? 'active' : '' }}"><a class="nav-link" href="/posts/create">Create New</a></li>
</ul>
u can try using (*) for any routes before or after url :
<ul class="dropdown-menu">
//post/sub_url
<li class="{{ Request::is('posts/*') ? 'active' : '' }}"><a class="nav-link" href="/posts">Posts</a></li>
//match url
<li class="{{ Request::is('posts/create') ? 'active' : '' }}"><a class="nav-link" href="/posts/create">Create New</a></li>
//match any sub_url with any prefix
<li class="{{ Request::is('*/posts/create/*') ? 'active' : '' }}"><a class="nav-link" href="/posts/create">Create New</a></li>
</ul>
Try this Request::segment(1) for parent because for child also segment(1) will be post or i prefer to put in in_array() so need i can add more route to parent active
<ul class="dropdown-menu">
<li class="{{ in_array(Request::segment(1),['post']) ? 'active' : '' }}"><a class="nav-link" href="/posts">Posts</a></li>
<li class="{{ in_array(Request::segment(1),['post']) ? 'active' : '' }}"><a class="nav-link" href="/posts/create">Create New</a></li>
</ul>
In below code role row is active but while i click in roles create inside roles page which is not mentioned in the sidebar the column is inactive
image for the create page is https://prnt.sc/qhspxs
image for the index page is https://prnt.sc/qhsq5o
<li class="treeview {{Request::is('admin/administration/*') ? 'active':''}}" >
<a href="#">
<i class="fa fa-user-plus"></i> <span>Administration</span>
<span class="pull-right-container">
<i class="fa fa-angle-left pull-right"></i>
</span>
</a>
<ul class="treeview-menu">
<li class="{{'admin/administration/roles' == request()->path() ? 'active' : ''}}"><i class="fa fa-users"></i> Roles</li>
<li class="{{'admin/administration/users' == request()->path() ? 'active' : ''}}"><i class="fa fa-users"></i> Users</li>
<li class="{{'admin/administration/company' == request()->path() ? 'active' : ''}}"><i class="fa fa-users"></i> Companies</li>
</ul>
</li>
You should check if request path is in array of possible routes
Try following code
<li class="treeview {{Request::is('admin/administration/*') ? 'active':''}}" >
<a href="#">
<i class="fa fa-user-plus"></i> <span>Administration</span>
<span class="pull-right-container">
<i class="fa fa-angle-left pull-right"></i>
</span>
</a>
<ul class="treeview-menu">
<li class="{{in_array(request()->path(),['admin/administration/roles','admin/administration/roles/create','admin/administration/roles/edit']) ? 'active' : ''}}"><i class="fa fa-users"></i> Roles</li>
<li class="{{'admin/administration/users' == request()->path() ? 'active' : ''}}"><i class="fa fa-users"></i> Users</li>
<li class="{{'admin/administration/company' == request()->path() ? 'active' : ''}}"><i class="fa fa-users"></i> Companies</li>
</ul>
</li>
Get the current route and check if it is equal to the Selected Option:
<li>
Administration
<ul style="<?php if (Request::is('administration/*')) echo "display:block"; ?>">
<li class ="{{ Route::currentRouteNamed('administration.index') ? 'active' : '' }}">
> View Tasks
</li>
</ul>
</li>
<!-- 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!