I want to set m-menu__item--open class on parent menu <li> and m-menu__item--active class on sub-menu item <li> in my Laravel bade based on current page. Below is the HTML extracted from the bade template.
<li class="m-menu__item m-menu__item--open" aria-haspopup="true" m-menu-submenu-toggle="hover">
<a href="javascript:;" class="m-menu__link m-menu__toggle">
<i class="m-menu__link-icon flaticon-layers"></i>
<span class="m-menu__link-text">FAQ</span>
<i class="m-menu__ver-arrow la la-angle-right"></i>
</a>
<div class="m-menu__submenu " m-hidden-height="840">
<span class="m-menu__arrow"></span>
<ul class="m-menu__subnav">
<li class="m-menu__item m-menu__item--active" aria-haspopup="true">
<a href="{{ url('/') }}/admin/faq/list/1" class="m-menu__link ">
<i class="m-menu__link-bullet m-menu__link-bullet--dot">
<span></span>
</i>
<span class="m-menu__link-text">English</span>
</a>
</li>
<li class="m-menu__item m-menu__item" aria-haspopup="true">
<a href="{{ url('/') }}/admin/faq/list/2" class="m-menu__link ">
<i class="m-menu__link-bullet m-menu__link-bullet--dot">
<span></span>
</i>
<span class="m-menu__link-text">Korean</span>
</a>
</li>
<li class="m-menu__item m-menu__item" aria-haspopup="true">
<a href="{{ url('/') }}/admin/faq/list/3" class="m-menu__link ">
<i class="m-menu__link-bullet m-menu__link-bullet--dot">
<span></span>
</i>
<span class="m-menu__link-text">Chinese</span>
</a>
</li>
</ul>
</div>
</li>
as I understand, you want to change your menu classes by the current url..
laravel has is() method in Request class. You may want to use it.
class="{{Request::is('category/products') ? 'm-menu__item--active' : 'm-menu__item--open'}}"
if your current url base-url/category/products then you're gonna get the 'm-menu__item--active' class
Related
In laravel, i am trying to send 4 different types of notifications to a user.Here is my part of code.
<div class="panel-body">
<ul class="nav" role="tablist">
<li role="presentation">
<a href="{{ url('/approvals/capexapproval') }}">
CAPEX
#if(Auth::user()->unreadNotifications->count()>0)
<span class="badge badge-light">
{{count(Auth::user()->unreadNotifications)}}
</span>
#endif
</a>
</li>
<li role="presentation">
<a href="{{ url('/approvals/creditapproval') }}">
CUSTOMER
#if(Auth::user()->unreadNotifications->count()>0)
<span class="badge badge-light">
{{count(Auth::user()->unreadNotifications)}}
</span>
#endif
</a>
</li>
<li role="presentation">
<a href="{{ url('/approvals/vendorapproval') }}">
VENDOR
#if(Auth::user()->unreadNotifications->count()>0)
<span class="badge badge-light">
{{count(Auth::user()->unreadNotifications)}}
</span>
#endif
</a>
</li>
For each menu I need to show the number of messages received and if I read a message of particular inbox the unread notifications count of that particular inbox should be decremented by 1.
<!-- 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!
I have a application with extends a view with name "notification". How you can see in the picture.
That fragment is just a list, don't extends anything, How I pass a variable to that list? Something fixed. Any suggestion?
<li class="dropdown notifications-menu">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<i class="livicon" data-name="bell" data-loop="true" data-color="#e9573f"
data-hovercolor="#e9573f" data-size="28"></i>
<span class="label label-warning">7</span>
</a>
<ul class=" notifications dropdown-menu drop_notify">
<li class="dropdown-title">Você tem novas notificações</li>
<li>
<!-- inner menu: contains the actual data -->
<ul class="menu">
#foreach($notificacao as $value)
<li>
<i class="livicon default" data-n="asterisk" data-s="20" data-c="white"
data-hc="white"></i>
Você tem novas perguntas
<small class="pull-right">
<span class="livicon paddingright_10" data-n="timer" data-s="10"></span>
{{$value->created_at->diffForHumans()}}
</small>
</li>
#endforeach
</ul>
</li>
<li class="footer">
View all
</li>
</ul>
</li>
I've recently gotten some problems. There is an model from which I pull some data and things. There is a menu link that I want to be on every page I enter, so I've put it into the base/master view. But the problem is, I need to enter ->with blabla thing on every public function in every controller. How could I not do that? I mean is there anyway around it? I don't want to do that with thingy on every controller method/function. Here's my code:
#if ( Auth::guest() )
<li style="float: right;padding-right: 0">
<ul class="nav">
<li>
<a href="{{ URL::to('register') }}">
<i class="icon-black icon-plus">
</i>
<strong>
Register
</strong>
</a>
</li>
<li>
<a href="{{ URL::to('login') }}">
<i class="icon-black icon-lock">
</i>
<strong>
Log in
</strong>
</a>
</li>
</li>
</li>
</ul>
#else
<li class="divider-vertical">
</li>
<li style="float: right;padding-right: 0">
<div class="btn-group">
<div class="btn btn-primary">
<i class="icon-user">
</i>
{{ (Auth::user()->name) }}
</div>
<a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#">
<span class="icon-caret-down">
</span>
</a>
<ul class="dropdown-menu">
<li>
<a href="{{ URL::to('account/managment') }}">
<i class="icon-user">
</i>
Account Managment
</a>
</li>
<li>
<a href="{{ URL::to('account/managment/change_credentials') }}">
<i class="icon-lock">
</i>
Change Password
</a>
</li>
<li class="divider">
</li>
<li>
<a href="{{ URL::to('account/logout') }}">
<i class="icon-off">
</i>
Log out
</a>
</li>
</ul>
</div>
#endif
You can define a View Composer :
View::composer(array('your.first.view','your.second.view'), function($view)
{
$view->with('count', User::count());
});
Everytime you call your view, a user count will be bound to it automatically.
Edit:
About where to use it, it's up to you and it depends on your app, but you might use pp/start/global.php if you don't have a better place to put it. It just have to be executed before your those views.
#Antonio's answer is a good way to do this. You can also use View::share(); to accomplish this with a shorter code.
View::share(array(
'foo' => 'bar'
));
I am sure somebody has aleady posted such a question but I could not find a solution.
I am using Ruby on Rails, Brootstrap and I want to be my dropdown menu(whole) in the middle of the page, but the text (links like We, What we do and etc...) in the dropdown-menu should be left-sided.
How can I do it?
<div class="btn-toolbar">
<div class="btn-group">
<button id="action-btn" class="btn dropdown-toggle" data-toggle="dropdown">
About us
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li>
<a href="del">
<strong> We</strong>
</a>
</li>
<li>
<div class="mcol">
<ul class ="sub">
<div class ="subcolumns menuactivity">
What we do
</li>
Countries
</div>
</ul>
<li>
<a href="del">
<strong>References </strong>
</a>
</li>
</ul>
<div class="btn-group">
<button id="action-btn" class="btn dropdown-toggle" data-toggle="dropdown">
News & Events
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li>
<a href="del">
<strong>Calender</strong>
</a>
</li>
<ul class ="sub">
<div class ="subcolumns menuactivity">
<li>
News archive
</li>
</ul>
</div>
</ul>
</div>
If you're using bootstrap as it is by default you can try below
<a class="pull-left" href="details"> What we do </a>
I have updated with an example.
http://jsfiddle.net/acc8t/
I did this by using below css
.sub{margin-left:0px;}
I have founf as well another solution already.
Just to put in css the following code:
.dropdown-menu {
text-align: left;
}
.btn-toolbar{
text-align: center;
padding-bottom:40px;
}