<!-- Main Sidebar Container -->
<aside class="main-sidebar sidebar-dark-primary elevation-4">
<!-- Brand Logo -->
<a href="{{ url('/home') }}" class="brand-link">
<img src="{{ asset('/backend/dist/img/AdminLTELogo.png')}}" alt="AdminLTE Logo" class="brand-image img-circle elevation-3"
style="opacity: .8">
<span class="brand-text font-weight-light">AdminLTE 3</span>
</a>
<?php $currentUser = Auth::user();?>
<!-- Sidebar -->
<div class="sidebar">
<!-- Sidebar user panel (optional) -->
<div class="user-panel mt-3 pb-3 mb-3 d-flex">
<div class="image">
<img src="{{ $currentUser->gravatar() }}" class="img-circle elevation-2" alt="{{ $currentUser->name }}">
</div>
<div class="info">
{{ $currentUser->name }}
</div>
</div>
<!-- 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 -->
<li class="nav-item has-treeview menu-open">
<a href="#" class="nav-link active">
<i class="nav-icon fa fa-dashboard"></i>
<p>
Dashboard
<i class="right fa fa-angle-left"></i>
</p>
</a>
<ul class="nav nav-treeview">
<li class="nav-item">
<a href="./index.html" class="nav-link active">
<i class="fa fa-circle-o nav-icon"></i>
<p>Dashboard v1</p>
</a>
</li>
<li class="nav-item">
<a href="./index2.html" class="nav-link">
<i class="fa fa-circle-o nav-icon"></i>
<p>Dashboard v2</p>
</a>
</li>
<li class="nav-item">
<a href="./index3.html" class="nav-link">
<i class="fa fa-circle-o nav-icon"></i>
<p>Dashboard v3</p>
</a>
</li>
</ul>
</li>
<li class="nav-item">
<a href="pages/widgets.html" class="nav-link">
<i class="nav-icon fa fa-th"></i>
<p>
Widgets
<span class="right badge badge-danger">New</span>
</p>
</a>
</li>
<li class="nav-item has-treeview">
<a href="#" class="nav-link">
<i class="nav-icon fa fa-pie-chart"></i>
<p>
Charts
<i class="right fa fa-angle-left"></i>
</p>
</a>
<ul class="nav nav-treeview">
<li class="nav-item">
<a href="pages/charts/chartjs.html" class="nav-link">
<i class="fa fa-circle-o nav-icon"></i>
<p>ChartJS</p>
</a>
</li>
<li class="nav-item">
<a href="pages/charts/flot.html" class="nav-link">
<i class="fa fa-circle-o nav-icon"></i>
<p>Flot</p>
</a>
</li>
<li class="nav-item">
<a href="pages/charts/inline.html" class="nav-link">
<i class="fa fa-circle-o nav-icon"></i>
<p>Inline</p>
</a>
</li>
</ul>
</li>
<li class="nav-item has-treeview">
<a href="#" class="nav-link">
<i class="nav-icon fa fa-tree"></i>
<p>
UI Elements
<i class="fa fa-angle-left right"></i>
</p>
</a>
<ul class="nav nav-treeview">
<li class="nav-item">
<a href="pages/UI/general.html" class="nav-link">
<i class="fa fa-circle-o nav-icon"></i>
<p>General</p>
</a>
</li>
<li class="nav-item">
<a href="pages/UI/icons.html" class="nav-link">
<i class="fa fa-circle-o nav-icon"></i>
<p>Icons</p>
</a>
</li>
<li class="nav-item">
<a href="pages/UI/buttons.html" class="nav-link">
<i class="fa fa-circle-o nav-icon"></i>
<p>Buttons</p>
</a>
</li>
<li class="nav-item">
<a href="pages/UI/sliders.html" class="nav-link">
<i class="fa fa-circle-o nav-icon"></i>
<p>Sliders</p>
</a>
</li>
</ul>
</li>
<li class="nav-item has-treeview">
<a href="#" class="nav-link">
<i class="nav-icon fa fa-edit"></i>
<p>
Blog
<i class="fa fa-angle-left right"></i>
</p>
</a>
<ul class="nav nav-treeview">
<li class="nav-item">
<a href="#" class="nav-link">
<i class="fa fa-circle-o nav-icon"></i>
<p>All Posts</p>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="fa fa-circle-o nav-icon"></i>
<p>Add New</p>
</a>
</li>
</ul>
</li>
<li class="nav-item has-treeview">
<a href="#" class="nav-link">
<i class="nav-icon fa fa-table"></i>
<p>
Tables
<i class="fa fa-angle-left right"></i>
</p>
</a>
<ul class="nav nav-treeview">
<li class="nav-item">
<a href="pages/tables/simple.html" class="nav-link">
<i class="fa fa-circle-o nav-icon"></i>
<p>Simple Tables</p>
</a>
</li>
<li class="nav-item">
<a href="pages/tables/data.html" class="nav-link">
<i class="fa fa-circle-o nav-icon"></i>
<p>Data Tables</p>
</a>
</li>
</ul>
</li>
<li class="nav-header">EXAMPLES</li>
<li class="nav-item">
<a href="pages/calendar.html" class="nav-link">
<i class="nav-icon fa fa-calendar"></i>
<p>
Calendar
<span class="badge badge-info right">2</span>
</p>
</a>
</li>
<li class="nav-item has-treeview">
<a href="#" class="nav-link">
<i class="nav-icon fa fa-envelope-o"></i>
<p>
Mailbox
<i class="fa fa-angle-left right"></i>
</p>
</a>
<ul class="nav nav-treeview">
<li class="nav-item">
<a href="pages/mailbox/mailbox.html" class="nav-link">
<i class="fa fa-circle-o nav-icon"></i>
<p>Inbox</p>
</a>
</li>
<li class="nav-item">
<a href="pages/mailbox/compose.html" class="nav-link">
<i class="fa fa-circle-o nav-icon"></i>
<p>Compose</p>
</a>
</li>
<li class="nav-item">
<a href="pages/mailbox/read-mail.html" class="nav-link">
<i class="fa fa-circle-o nav-icon"></i>
<p>Read</p>
</a>
</li>
</ul>
</li>
<li class="nav-item has-treeview">
<a href="#" class="nav-link">
<i class="nav-icon fa fa-book"></i>
<p>
Pages
<i class="fa fa-angle-left right"></i>
</p>
</a>
<ul class="nav nav-treeview">
<li class="nav-item">
<a href="pages/examples/invoice.html" class="nav-link">
<i class="fa fa-circle-o nav-icon"></i>
<p>Invoice</p>
</a>
</li>
<li class="nav-item">
<a href="pages/examples/profile.html" class="nav-link">
<i class="fa fa-circle-o nav-icon"></i>
<p>Profile</p>
</a>
</li>
<li class="nav-item">
<a href="pages/examples/login.html" class="nav-link">
<i class="fa fa-circle-o nav-icon"></i>
<p>Login</p>
</a>
</li>
<li class="nav-item">
<a href="pages/examples/register.html" class="nav-link">
<i class="fa fa-circle-o nav-icon"></i>
<p>Register</p>
</a>
</li>
<li class="nav-item">
<a href="pages/examples/lockscreen.html" class="nav-link">
<i class="fa fa-circle-o nav-icon"></i>
<p>Lockscreen</p>
</a>
</li>
</ul>
</li>
<li class="nav-item has-treeview">
<a href="#" class="nav-link">
<i class="nav-icon fa fa-plus-square-o"></i>
<p>
Extras
<i class="fa fa-angle-left right"></i>
</p>
</a>
<ul class="nav nav-treeview">
<li class="nav-item">
<a href="pages/examples/404.html" class="nav-link">
<i class="fa fa-circle-o nav-icon"></i>
<p>Error 404</p>
</a>
</li>
<li class="nav-item">
<a href="pages/examples/500.html" class="nav-link">
<i class="fa fa-circle-o nav-icon"></i>
<p>Error 500</p>
</a>
</li>
<li class="nav-item">
<a href="pages/examples/blank.html" class="nav-link">
<i class="fa fa-circle-o nav-icon"></i>
<p>Blank Page</p>
</a>
</li>
<li class="nav-item">
<a href="starter.html" class="nav-link">
<i class="fa fa-circle-o nav-icon"></i>
<p>Starter Page</p>
</a>
</li>
</ul>
</li>
<li class="nav-header">MISCELLANEOUS</li>
<li class="nav-item">
<a href="https://adminlte.io/docs" class="nav-link">
<i class="nav-icon fa fa-file"></i>
<p>Documentation</p>
</a>
</li>
<li class="nav-header">LABELS</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="nav-icon fa fa-circle-o text-danger"></i>
<p class="text">Important</p>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="nav-icon fa fa-circle-o text-warning"></i>
<p>Warning</p>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="nav-icon fa fa-circle-o text-info"></i>
<p>Informational</p>
</a>
</li>
</ul>
</nav>
<!-- /.sidebar-menu -->
</div>
<!-- /.sidebar -->
</aside>
ErrorException (E_ERROR)
Call to undefined method App\User::gravatar() (View: D:\xampp\htdocs\asset_manage\resources\views\layouts\backend\sidebar.blade.php) (View: D:\xampp\htdocs\asset_manage\resources\views\layouts\backend\sidebar.blade.php) (View: D:\xampp\htdocs\asset_manage\resources\views\layouts\backend\sidebar.blade.php)
enter image description here
enter image description here
enter image description here
Can you set the Gravatar value in the view parameter in your controller?
return view('YOUR_BLADE', ['gravatar' => $currentUser->gravatar()]);
If you have a column in users table named 'gravatar' then you can simply use in this way to get gravatar data of current user.
{{ Auth::user()->gravatar }}
Related
i have created a react app. but it have some react routers issue when i navigate the URL to another page locally it works perfectly fine but when i navigate by the link of http it gives a 404 error.
The navbar is changed in mobile device and in other devices.
here it is on other devices
and here it is on mobile devices
when i navigate the route to go on another page it shows the error of :
here is my code on mobile devices
<nav className="mobileTopBar">
<div className="container bg-grey m-0 text-light">
<div className="col-lg-7 pt-3">
<div className="row">
<div className="col-6">
<img src={MobileLogo} className="ms-2" alt="logo that will show on mobile screens only" />
</div>
<div className="col-6">
<div className="row pt-2">
<p className="col-1 top-pra fw-bolder text-white ms-1"> <i class="fas fa-phone-alt text-white"></i> </p>
<p className="col-1 top-pra fw-bolder text-white ms-1"> <i class="fab fa-whatsapp text-white"></i> </p>
<p className="col-1 top-pra fw-bolder"> <a className="col-1 text-decoration-none text-light" href="https://www.facebook.com/hosters.pk" target="_blank"> <i className="fab fa-facebook-f"> </i> </a> </p>
<p className="col-1 top-pra fw-bolder"> <a className="col-1 text-decoration-none text-light" href="https://www.youtube.com/channel/UCQAxN4p6gnl-T0M0UnIOr4w" target="_blank"> <i class="fab fa-youtube"></i> </a> </p>
<p className="col-1 top-pra fw-bolder ms-1"> <i className="fab fa-linkedin-in"></i> </p>
</div>
</div>
</div>
</div>
<div className="col-lg-5 ps-2 pb-3">
<div class="container-fluid text-start p-0 text-dark">
<button class="navbar-toggler me-5 btn bg-light" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<i class="fas fa-list navbar-toggler-icon text-dark"></i>
</button>
<div class="collapse navbar-collapse me-5" id="navbarSupportedContent">
<ul class="navbar-nav ms-auto mb-2 mb-lg-0">
<li class="nav-item dropdown">
<span class="nav-link text-white ms-2" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false"> Hosting
<p class="fs-10px d-inline ms-1">
<i class="fas fa-chevron-down"></i>
</p>
</span><ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="text-decoration-none" href="/windows">
<li>
<span class="dropdown-item " href="#">Windows Hosting</span>
</li>
</a>
<a class="text-decoration-none" href="/hosting">
<li>
<span class="dropdown-item " href="#">Shared Hosting</span>
</li>
</a>
<a class="text-decoration-none" href="/reseller">
<li>
<span class="dropdown-item " href="#">Reseller Hosting</span>
</li>
</a>
<a class="text-decoration-none" href="/vps">
<li>
<span class="dropdown-item " href="#">VPS Hosting</span>
</li>
</a>
<a class="text-decoration-none" href="/dedicate">
<li>
<span class="dropdown-item " href="#">Dedicated Hosting</span>
</li>
</a>
</ul>
</li>
<li class="nav-item text-dark">
<span href="#" class="nav-link mx-2 text-decoration-none">
<a class="text-decoration-none text-white" target="_blank" href="https://hoster.pk/clientarea/cart.php?a=add&domain=register"> Domain </a>
</span>
</li>
<li class="nav-item dropdown">
<span class="nav-link text-white ms-2" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false"> Partners
<p class="fs-10px d-inline ms-1">
<i class="fas fa-chevron-down"></i>
</p>
</span>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="text-decoration-none" href="/reseller"><li>
<span class="dropdown-item " href="#">Reseller Hosting</span>
</li>
</a>
<a href="https://SSLS.pk" class="text-decoration-none" target="_blank">
<li>
<span class="dropdown-item " href="#">SSL Reseller</span>
</li>
</a>
<a class="text-decoration-none" href="/Domain">
<li>
<span class="dropdown-item " href="#">Domain Reseller</span>
</li>
</a>
</ul>
</li>
<li class="nav-item">
<span class="nav-link mx-2 " href="#">
<a class="text-decoration-none text-white" href="/affiliate"> Affiliate </a>
</span>
</li>
<li class="nav-item">
<span href="https://hoster.pk/blog/" class="nav-link mx-2 er text-decoration-none">
<a target="_blank" class="text-decoration-none text-white" href="https://hoster.pk/blog/"> Blog </a>
</span>
</li>
</ul>
<button class="btn nav-btn bg-green rounded-pill px-4 p-2 lh-lg text-white fw-bolder" type="submit">
<p class="m-0">
<a target="_blank" class="text-decoration-none text-light" href="https://hoster.pk/clientarea/">CLIENTAREA</a>
</p>
</button>
</div>
</div>
</div>
</div>
</nav>
and on other devices
<nav class="navbar navbar-expand-lg bg-white p-0 m-0 navbar-light">
<div class="container-fluid text-center p-0">
<span class="navbar-brand p-0 m-0" href="#">
<a class="text-decoration-none " href="/">
<img alt="pictures" src={OtherDeviceLogo} className="w-50" />
</a>
</span>
<div className="w-60 float-start OtherDevice">
<div className="my-1">
<form className='card-form p-1 bg-l-grey mx-1' action="https://hoster.pk/clientarea/cart.php?a=add&domain=register" method="post" target='_blank'>
<input type="text" name="query" size="20" className='card-input border-0 px-4 bg-l-grey w-100' placeholder='Find Your Perfect Domain' />
<button type="submit" value="Go" className='card-button btn bg-green w-25 text-white fw-bolder'> Go </button>
</form>
</div>
</div>
<button class="navbar-toggler me-5" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon text-green">
</span>
</button>
<div class="collapse navbar-collapse me-5" id="navbarSupportedContent">
<ul class="navbar-nav ms-auto mb-2 mb-lg-0">
<li class="nav-item dropdown">
<span class="nav-link text-dark d-flex" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false"> Hosting
<p class="fs-10px d-inline ms-1">
<i class="fas fa-chevron-down"></i>
</p>
</span>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="text-decoration-none" href="/windows">
<li>
<span class="dropdown-item " href="#">Windows Hosting</span>
</li>
</a>
<a class="text-decoration-none" href="/hosting">
<li>
<span class="dropdown-item " href="#">Shared Hosting</span>
</li>
</a>
<a class="text-decoration-none" href="/reseller">
<li>
<span class="dropdown-item " href="#">Reseller Hosting</span>
</li>
</a>
<a class="text-decoration-none" href="/vps">
<li>
<span class="dropdown-item " href="#">VPS Hosting</span>
</li>
</a>
<a class="text-decoration-none" href="/dedicate">
<li>
<span class="dropdown-item " href="#">Dedicated Hosting</span>
</li>
</a>
</ul>
</li>
<li class="nav-item">
<span href="#" class="nav-link text-dark mx-2 text-decoration-none">
<a class="text-decoration-none" target="_blank" href="https://hoster.pk/clientarea/cart.php?a=add&domain=register"> Domain </a>
</span>
</li>
<li class="nav-item dropdown">
<span class="nav-link text-dark" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">Partners <p class="fs-10px d-inline ms-1">
<i class="fas fa-chevron-down"></i>
</p>
</span>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="text-decoration-none" href="/reseller"><li>
<span class="dropdown-item " href="#">Reseller Hosting</span>
</li>
</a>
<a href="https://SSLS.pk" class="text-decoration-none" target="_blank">
<li>
<span class="dropdown-item " href="#">SSL Reseller</span>
</li>
</a>
<a class="text-decoration-none" href="/Domain">
<li>
<span class="dropdown-item" href="#">Domain Reseller</span>
</li>
</a>
</ul>
</li>
<li class="nav-item">
<span class="nav-link mx-2 " href="#">
<a class="text-decoration-none" href="/affiliate"> Affiliate </a>
</span>
</li>
<li class="nav-item">
<span href="https://hoster.pk/blog/" class="nav-link mx-2 er text-decoration-none">
<a target="_blank" class="text-decoration-none" href="https://hoster.pk/blog/"> Blog </a>
</span>
</li>
</ul>
<button class="btn nav-btn bg-green rounded-pill px-4 p-2 lh-lg text-white fw-bolder" type="submit">
<p class="m-0">
<a target="_blank" class="text-decoration-none text-light" href="https://hoster.pk/clientarea/">CLIENTAREA</a>
</p>
</button>
</div>
</div>
</nav>
thanks in advance :)
If you install React Router Dom, you have to change
from <a class="text-decoration-none" href="/windows">
to <Link class="text-decoration-none" to="/windows">
Enter this link for more https://reactrouter.com/docs/en/v6/getting-started/overview#navigation
I am using ng2 bootstrap and updated angular cli 1.0 version after that got above error here is my code. could you plz solve this problem
☰
<ul class="nav navbar-nav ml-auto">
<li class="nav-item dropdown" dropdown (onToggle)="toggled($event)">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false"
dropdownToggle>
<i class="icon-bell"></i> <span class="badge badge-pill badge-danger">5</span>
</a>
<div class="dropdown-menu dropdown-menu-right" dropdownMenu aria-labelledby="simple-dropdown">
<a class="dropdown-item" href="#"><i class="fa fa-envelope"></i> You have 4 videos to Validate</a>
<a class="dropdown-item" href="#"><i class="fa fa-trophy"></i> Need to Declare winners for week 34</a>
</div>
</li>
<li class="nav-item dropdown" dropdown (onToggle)="toggled($event)">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false"
dropdownToggle>
<img src="assets/img/avatars/6.jpg" class="img-avatar" alt="admin#tfc.com">
<span class="hidden-md-down">Super Admin</span>
</a>
<div class="dropdown-menu dropdown-menu-right" dropdownMenu aria-labelledby="simple-dropdown">
<a class="dropdown-item" href="#"><i class="fa fa-key"></i> Change Password</a>
<a class="dropdown-item" href="#"><i class="fa fa-lock"></i> Logout</a>
</div>
</li>
</ul>
According to the docs it looks like your missing the * on the dropdownMenu. It should be
<div class="dropdown-menu dropdown-menu-right" *dropdownMenu aria-labelledby="simple-dropdown">
So *dropdownMenu requires the *, but the dropdown directive does not.
Example from docs:
<div class="btn-group" dropdown>
<button dropdownToggle type="button" class="btn btn-primary dropdown-toggle">
Button dropdown <span class="caret"></span>
</button>
<ul *dropdownMenu class="dropdown-menu" role="menu">
<li role="menuitem"><a class="dropdown-item" href="#">Action</a></li>
<li role="menuitem"><a class="dropdown-item" href="#">Another action</a></li>
<li role="menuitem"><a class="dropdown-item" href="#">Something else here</a></li>
<li class="divider dropdown-divider"></li>
<li role="menuitem"><a class="dropdown-item" href="#">Separated link</a>
</li>
</ul>
</div>
I want to create a menu like this but without using ng-repeat:
<ul class="sidebar-navi">
<li ng-repeat="item in items" ng-click="showChilds(item)">
<i class="fa fa-angle-left sidebar-nav-indicator sidebar-nav-mini-hide"></i><i class="fa fa-cogs sidebar-nav-icon"></i>{{item.name}}
<ul>
<li ng-show="item.active">
<span>First</span>
</li>
<li ng-show="item.active">
<span>Second</span>
</li>
</ul>
</li>
</ul>
the problem is that I didn't find a way to pass parameter to this function showChilds (the current li) I tried to work with id but it didn't work:
<ul class="sidebar-navi">
<li id="first" ng-click="showChilds(first)">
<i class="fa fa-angle-left sidebar-nav-indicator sidebar-nav-mini-hide"></i><i class="fa fa-cogs sidebar-nav-icon"></i>1
<ul>
<li ng-show="first.active">
<span>First</span>
</li>
<li ng-show="first.active">
<span>Second</span>
</li>
</ul>
</li>
<li id="second" ng-click="showChilds(second)">
<i class="fa fa-angle-left sidebar-nav-indicator sidebar-nav-mini-hide"></i><i class="fa fa-cogs sidebar-nav-icon"></i>2
<ul>
<li ng-show="second.active">
<span>First</span>
</li>
<li ng-show="second.active">
<span>Second</span>
</li>
</ul>
</li>
</ul>
and my controller will contain only this function
$scope.showChilds = function (item) {
item.active = !item.active
}
I don't want to use $scope.items anymore
I have updated your HTML. If you are not using ng-repeat then you can use ng-init to initialize one variable and toggle that variable on ng-click to show/hide sub menus. Your updated sample is here
<ul class="sidebar-navi">
<li id="first" ng-click="first = !first" ng-init="first = false">
<i class="fa fa-angle-left sidebar-nav-indicator sidebar-nav-mini-hide"></i><i class="fa fa-cogs sidebar-nav-icon"></i>1
<ul>
<li ng-show="first">
<span>First</span>
</li>
<li ng-show="first">
<span>Second</span>
</li>
</ul>
</li>
<li id="second" ng-click="second = !second" ng-init="second = false">
<i class="fa fa-angle-left sidebar-nav-indicator sidebar-nav-mini-hide"></i><i class="fa fa-cogs sidebar-nav-icon"></i>2
<ul>
<li ng-show="second">
<span>First</span>
</li>
<li ng-show="second">
<span>Second</span>
</li>
</ul>
</li>
</ul>
Can anyone help me figure out why my menu is not displaying on my mobile device.
The collapsible menu is displaying fine in the browser but on a mobile (or narrow browser window), no links are displayed when you click the 3 bars that should display the links.
I am using jhipster so my code is split between multiple files.
All menus are working fine bar the menu options that should appear on a mobile device.
Any help is greatly appreciated
My header.html is as follows
<header class="clearfix">
<i class="fa fa-bars"></i>
<!-- Logo -->
<div class="logo">
<a href="#/">
<span translate="global.title">Cloud Ranger</span>
</a>
</div>
<div class="menu-button" toggle-off-canvas data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</div>
<div class="top-nav">
<ul class="nav-right pull-right list-unstyled">
<li class="dropdown langs text-normal" ng-controller="LanguageController">
<a href="javascript:;" class="dropdown-toggle" data-toggle="dropdown"><span translate="global.menu.language">Language</span>
</a>
<ul class="dropdown-menu with-arrow pull-right list-langs" role="menu">
<li data-ng-show="lang !== 'English' ">
English</li>
</ul>
</li>
</ul>
</div>
</header>
My navbar.html is as follows
<div id="nav-wrapper" >
<div ng-switch="isAuthenticated()">
<ul id="nav" role="navigation" ng-controller="NavbarController"
data-collapse-nav data-highlight-active data-slim-scroll>
<li ui-sref-active="active" ng-switch-when="false"><a
href="#/login"> <i class="fa fa-user"></i> <span
class="icon-bg bg-danger"></span> <span class="hidden-tablet"
translate="global.menu.account.login">Login</span>
</a></li>
<li ui-sref-active="active" ng-switch-when="false"><a
href="#/register"> <i class="fa fa-user"></i> <span
class="icon-bg bg-danger"></span> <span class="hidden-tablet"
translate="global.menu.account.register">Register</span>
</a></li>
<li ui-sref-active="active" ng-switch-when="true"><a
ui-sref="home"> <i class="fa fa-home"> <span
class="icon-bg bg-danger"></span></i> <span class="hidden-tablet"
translate="global.menu.home">Dashboard</span>
</a></li>
<li ui-sref-active="active" ng-switch-when="true"><a
ui-sref="credential"><i class="fa fa-cloud"><span
class="icon-bg bg-orange"></span></i><span class="hidden-tablet"
translate="global.menu.entities.credential">Credential</span></a></li>
<li ui-sref-active="active" ng-switch-when="true"><a
ui-sref="schedule"><i class="fa fa-calendar"><span
class="icon-bg bg-warning"></span></i><span class="hidden-tablet"
translate="global.menu.entities.schedules">Schedules</span></a></li>
<li ui-sref-active="active" ng-switch-when="true"><a
ui-sref="userTask"><i class="fa fa-tasks"><span
class="icon-bg bg-info"></span></i><span class="hidden-tablet"
translate="global.menu.entities.userTask">Tasks</span></a></li>
<li ui-sref-active="active" ng-switch-when="true"><a
ui-sref="taskExecutionLog"><i class="fa fa-bar-chart-o"><span
class="icon-bg bg-primary"></span></i><span class="hidden-tablet"
translate="global.menu.admin.logs">Logs</span></a></li>
<li>
<a href="#/password"><i class="fa fa-user"><span class="icon-bg bg-danger"></span></i><span
translate="global.menu.account.settings">Account></span></a>
<ul>
<li ui-sref-active="active"><a ui-sref="password"><i class="fa fa-caret-right"></i><span translate="global.menu.account.password">Password</span></a></li>
<li ui-sref-active="active"><a ui-sref="settings"><i class="fa fa-caret-right"></i><span translate="global.menu.account.settings">Settings</span></a></li>
<li ui-sref-active="active"><i class="fa fa-caret-right"></i><span translate="global.menu.account.logout">Logout</span></li>
</ul>
</li>
</ul>
</div>
</div>
Hello Demo have you looked through your CSS file and checked that the collapsible menu is not been disabled for smaller screens through the means of the #media queries, for instance #media (min-width: xxpx) can be used to define different style rules for different media types/devices. Hope this helps.
Everytime I click on a tab I want it to become active. How should I achieve this?
<ul class="nav nav-pills pull-left" role="pilllist">
<li class="active" data-placement="right" title="Voucher Details"><a data-toggle="pill" role="pill" ng-href="#/">Pay Vouchers</a>
</li>
<li><a ng-href="#/paycode" data-toggle="pill" role="pill" data-placement="right" title="Paycode Details">Pay Types</a>
</li>
<li><a ng-href="#/deduction" data-toggle="pill" role="pill" data-placement="right" title="Deduction Details">Deductions</a>
</li>
<li><a ng-href="#/tax" data-toggle="pill" role="pill" data-placement="right" title="Tax Deduction Details">Taxes</a>
</li>
<li><a ng-href="#/timeoff" data-toggle="pill" role="pill" data-placement="right" title="Time Off Details">Paid Time Offs</a>
</li>
<li id="hid"><a ng-href="#/grosspay" data-toggle="pill" role="pill" data-placement="right" title="Gross Pay Details">Payroll Details</a>
</li>
</ul>
One way to do it is to have a variable which stores the current tab in your scope . For example:
// In the controller
$scope.tab = 0;
// In the HTML
<ul class="nav nav-pills pull-left" role="pilllist">
<li ng-class="{active: tab===0}">
<a ng-click="tab=0" ng-href="#/" data-placement="right" title="Voucher Details">Pay Vouchers</a>
</li>
<li ng-class="{active: tab==1}">
<a ng-click="tab=1" ng-href="#/paycode" role="pill" data-placement="right" title="Paycode Details">Pay Types</a>
</li>
<li ng-class="{active: tab==2}">
<a ng-click="tab=2" ng-href="#/deduction" role="pill" data-placement="right" title="Deduction Details">Deductions</a>
</li>
<li ng-class="{active: tab==3}">
<a ng-click="tab=3" ng-href="#/tax" role="pill" data-placement="right" title="Tax Deduction Details">Taxes</a>
</li>
<li ng-class="{active: tab==4}">
<a ng-click="tab=4" ng-href="#/timeoff" role="pill" data-placement="right" title="Time Off Details">Paid Time Offs</a>
</li>
<li id="hid" ng-class="{active: tab==5}">
<a ng-click="tab=5" ng-href="#/grosspay" role="pill" data-placement="right" title="Gross Pay Details">Payroll Details</a>
</li>
</ul>