Call to undefined method App\User::gravatar() - database

<!-- 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

React Routers Giving 404 Error on Web but works perfectly fine on localhost

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

No Provider for TemplateRef! (ng2 bootstrap)

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>

creating horizontal menu with angularjs

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>

Twitter Bootsrap - Dropdown Menu not showing on mobile devices

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.

how to dynamically add active tab functionality?

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>

Resources