I have the top-bar nav all setup and the dropdowns are displaying as expected. However, when I click on a dropdown link, the dropdown just disappears. The page does not advance to the URI as expected.
I'm stumped...
<section class="top-bar-section second-row">
<ul>
<li class="active"><i class="fa fa-exclamation-triangle"></i><span> Alert Central</span></li>
<li class="has-dropdown">
<i class="fa fa-bar-chart"></i><span> Analytics</span>
<ul class="dropdown">
<li>System Status</li>
<li>My Use</li>
<li>My User's Use</li>
<li>Account Information</li>
</ul>
</li>
<li class="has-dropdown">
<i class="fa fa-magic"></i><span> Filter Management</span>
<ul class="dropdown">
<li>Keywords</li>
<li>Categories</li>
<li>Locations</li>
</ul>
</li>
<li class="has-dropdown">
<i class="fa fa-users"></i><span> User Management</span>
<ul class="dropdown">
<li>Users</li>
<li>Roles</li>
</ul>
</li>
</ul>
</section>
Did you try to add data-topbar in <section> tag ?
<section data-topbar class="top-bar-section second-row">
Related
If I define my block on the li tag, TBS only shows the first item in the array.
<ul class="nav navbar-nav">
<li class="dropdown nav-item">
Logs<span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li><a class="file" href="/logs/#[logs.key; block=li]">[logs.key]</a></li>
</ul>
</li>
<li class="nav-item">Settings</li>
<li class="nav-item"><span class="navbar-text" id="grepspan"></span></li>
<li class="nav-item"><span class="navbar-text" id="invertspan"></span></li>
</ul>
If I define the block on the a tag, it shows all the items in the array.
<ul class="nav navbar-nav">
<li class="dropdown nav-item">
Logs<span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<a class="file" href="/logs/#[logs.key; block=a]">[logs.key]</a>
</ul>
</li>
<li class="nav-item">Settings</li>
<li class="nav-item"><span class="navbar-text" id="grepspan"></span></li>
<li class="nav-item"><span class="navbar-text" id="invertspan"></span></li>
</ul>
What am I doing wrong here?
I hava a dynamic menu using VueJs and Laravel. It works fine.
But when I display one of them, all options are displayed.
The menu starts in foreach loop to check menu and assigned options.
Is there any way to restrict this?
My code is the next:
File sidebar.blade.php
<div class="sidebar">
<nav class="sidebar-nav">
<ul class="nav">
<li #click="menu=0" class="nav-item">
<a class="nav-link active" href="#"><i class="icon-speedometer"></i> Escritorio</a>
</li>
<li class="nav-title">
Menú de opciones
</li>
<li class="nav-item nav-dropdown">
#foreach($menus as $menu)
<a class="nav-link nav-dropdown-toggle" href="#"><i class="{{ $menu->icono_menu }}"></i>{{ $menu->nombre }}</a>
#foreach($permisos as $permiso)
#if($menu->id==$permiso->idmenu)
<ul class="nav-dropdown-items">
<li #click="menu={{ $permiso->codigo }}" class="nav-item">
<a class="nav-link" href="#"><i class="{{ $permiso->icono_opcion }}"></i> {{ $permiso->nombre }}</a>
</li>
</ul>
#endif
#endforeach
#endforeach
</li>
<li #click="menu=27" class="nav-item">
<a class="nav-link" href="#"><i class="icon-book-open"></i> Ayuda <span class="badge badge-danger">PDF</span></a>
</li>
<li #click="menu=28" class="nav-item">
<a class="nav-link" href="#"><i class="icon-info"></i> Acerca de...<span class="badge badge-info">IT</span></a>
</li>
</ul>
</nav>
<button class="sidebar-minimizer brand-minimizer" type="button"></button>
</div>
I am a beginner at laravel and I have Hidden sidebar menu from users it's successfully working but when logout from admin then I face error how to fix it thanks. please see error https://flareapp.io/share/NPL9bz7w
Html view
<!-- Sidebar Menu -->
<nav class="mt-2">
<ul class="nav nav-pills nav-sidebar flex-column" data-widget="treeview"
role="menu" data-accordion="false">
<!-- Add icons to the links using the .nav-icon class
with font-awesome or any other icon font library -->
<!--Admin sidebar menu -->
#if(Auth::user()->type == "admin")
<li class="nav-item">
<a href="{{url('admin')}}" class="nav-link">
<i class="fas fa-comments"></i>
<p>Users Permission</p>
</a>
</li>
<li class="nav-item">
<a href="{{url('manage_users')}}" class="nav-link">
<i class="fas fa-comments"></i>
<p>Manage Users</p>
</a>
</li>
<li class="nav-item">
<a href="{{url('register')}}" class="nav-link">
<i class="fas fa-comments"></i>
<p> User Register</p>
</a>
</li>
<!-- end Admin sidebar menu -->
<!-- User sidebar menu -->
#else
<li class="nav-item">
<a href="{{url('viewprofile')}}" class="nav-link">
<i class="fas fa-user"> </i>
<p>View Profile</p>
</a>
</li>
<li class="nav-item">
<a href="{{url('DashBoard')}}" class="nav-link">
<i class="fas fa-comments"></i>
<p>Chat Room</p>
</a>
</li>
#endif
</ul>
</nav>
<!-- /.sidebar-menu -->
The problem is, you are checking #if(Auth::user()->type == "admin") for check the logged in admin. If the admin is logged out then there is no Auth::user(). I think this is the problem you are facing. So change the condition like this
#if(Auth::check() && Auth::user()->type == "admin")
// Admin menu bar
#elseif (Auth::check())
// User menu bar
#endif
I think this will solve the issue.
Since the user is logged out, the Auth::user() is null.
Because of which, when you try to get its type, it is throwing
Trying to get property 'type' of non-object
You need to check whether the user is logged in, and then check its type.
#if(Auth::check() && Auth::user()->type == "admin")
Auth::check() will return true if the user is logged in
first check if user logged in then check that if user is admin or not:
<!-- Sidebar Menu -->
<nav class="mt-2">
<ul class="nav nav-pills nav-sidebar flex-column" data-widget="treeview"
role="menu" data-accordion="false">
<!-- Add icons to the links using the .nav-icon class
with font-awesome or any other icon font library -->
<!--Admin sidebar menu -->
#auth
#if(Auth::user()->type == "admin")
<li class="nav-item">
<a href="{{url('admin')}}" class="nav-link">
<i class="fas fa-comments"></i>
<p>Users Permission</p>
</a>
</li>
<li class="nav-item">
<a href="{{url('manage_users')}}" class="nav-link">
<i class="fas fa-comments"></i>
<p>Manage Users</p>
</a>
</li>
<li class="nav-item">
<a href="{{url('register')}}" class="nav-link">
<i class="fas fa-comments"></i>
<p> User Register</p>
</a>
</li>
<!-- end Admin sidebar menu -->
<!-- User sidebar menu -->
#else
<li class="nav-item">
<a href="{{url('viewprofile')}}" class="nav-link">
<i class="fas fa-user"> </i>
<p>View Profile</p>
</a>
</li>
<li class="nav-item">
<a href="{{url('DashBoard')}}" class="nav-link">
<i class="fas fa-comments"></i>
<p>Chat Room</p>
</a>
</li>
#endif
#endauth
</ul>
use isset method
#if(isset(Auth::user()->type) && Auth::user()->type== "admin")
you can also use Auth::check()
#if(Auth::check() && Auth::user()->type== "admin")
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 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;
}