This is Angular 1.5 app. I have written the Menu bar in index.html file to keep it common in all views. Right now, Menu bar default value is set to home screen - "Personal". Other webpages' names aren't present in menu bar, instead an icon is present to represent those pages in menu bar.
When the user navigates to any other page, the name of that particular page should get displayed in menu bar and rest pages should be displayed as icon in menu bar.
How do I achieve this
This is how the menu looks like currently-
Here is my <body> of index.html file.
<body>
<div class="page" id="page">
<ul id="progress">
<li class="active progress-li">
Personal
</li>
<li class="progress-li">
<a ng-href="#/school">
<i class="fa fa-building-o" aria-hidden="true"></i>
</a>
</li>
<li class="progress-li">
<a ng-href="#/pre-university">
<i class="fa fa-university" aria-hidden="true"></i>
</a>
</li>
<li class="progress-li">
<a ng-href="#/university">
<i class="fa fa-graduation-cap" aria-hidden="true"></i>
</a>
</li>
<li class="progress-li">
<a ng-href="#/extras">
<i class="fa fa-cubes" aria-hidden="true"></i>
</a>
</li>
<li class="progress-li">
<a ng-href="#/accolades">
<i class="fa fa-trophy" aria-hidden="true"></i>
</a>
</li>
<li class="progress-li-last">
<a ng-href="#/job">
<i class="fa fa-suitcase" aria-hidden="true"></i>
</a>
</li>
</ul>
<main class="cf" ng-view></main>
</div>
<script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>
<script type="text/javascript" src="js/materialize.min.js"></script>
<script src="js/libs/angular/angular.min.js"></script>
<script src="js/libs/angular/angular-route.min.js"></script>
<script src="js/libs/angular/angular-animate.min.js"></script>
<script src="js/libs/angular/angular-cookies.min.js"></script>
</body>
Related
I want to draw dynamic sidebar menu data from database using AJAX in the adminlte 3 dashboard with bootstrap 4 dashboard. When I loaded sidebar menu data dynamically by using AJAX, sidebar open or collapse not working.My JSFiddle URL is given below. When static data push on '.sidebar' class without ajax, menu open/hide working. But using ajax call menu open/hide not working.
$(document).ready(function(){
var url = "";
$.ajax({
url: url,
}).done(function(resp){
//retrive data
var ret = '<nav class="mt-2"><ul class="nav nav-pills nav-sidebar flex-column" data-widget="treeview" role="menu" data-accordion="true"><li class="nav-item"><i class="nav-icon fas fas fa-user"></i><p>Admin<i class="right fas fa-angle-left"></i></p><ul class="nav nav-treeview"><li class="nav-item"><i class="far fa-circle nav-icon"></i><p>Rahim</p></li></ul><ul class="nav nav-treeview"><li class="nav-item"><i class="far fa-circle nav-icon"></i><p>Test</p></li></ul></li></ul></nav>';
$('.sidebar').html(ret);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body class="sidebar-mini sidebar-closed sidebar-collapse" style="height: auto;">
<!-- Site wrapper -->
<div class="wrapper">
<!-- Navbar -->
<nav class="main-header navbar navbar-expand navbar-primary navbar-dark">
<!-- Left navbar links -->
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" data-widget="pushmenu" href="#" role="button"><i class="fas fa-bars"></i></a>
</li>
<!--
<li class="nav-item d-none d-sm-inline-block">
Home
</li>
<li class="nav-item d-none d-sm-inline-block">
Contact
</li>
-->
</ul>
<!-- Right navbar links -->
<ul class="navbar-nav ml-auto">
<li class="nav-item dropdown user-menu">
<a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown">
<img src="public/images/login_man.png" class="user-image img-circle elevation-2" alt="User Image">
<span class="d-none d-md-inline">admin</span>
</a>
<ul class="dropdown-menu dropdown-menu-lg dropdown-menu-right">
<!-- Menu Footer-->
<li class="user-footer">
<!--Profile-->
Sign out
</li>
</ul>
</li>
<!--
<li class="nav-item">
<a class="nav-link" data-widget="fullscreen" href="#" role="button">
<i class="fas fa-expand-arrows-alt"></i>
</a>
</li>
<li class="nav-item">
<a class="nav-link" data-widget="control-sidebar" data-slide="true" href="#" role="button">
<i class="fas fa-th-large"></i>
</a>
</li>
-->
</ul>
</nav>
<!-- /.navbar --><aside class="main-sidebar main-sidebar-custom sidebar-dark-primary elevation-4">
<a href="#" class="brand-link">
<i class="brand-image fas fa-tachometer-alt" style="opacity: .8"></i>
<span class="brand-text font-weight-light">Dashboard</span>
</a>
<div class="sidebar">
</div>
</aside>
<div class="container-fluid">
<div class="content-wrapper" style="min-height: 549px;">
</div>
</div>
</div>
</body>
Just put the code after success function and it will work.
$('[data-widget="treeview"]').Treeview('init');
I am facing a weird issue with AdminLTE admin panel template which is I am using for my Angular 11 app. Its all loading the menu item. No issue with it. But when clicking an item refreshes the page instead of expanding the group.
Here is how it looks
When I clicking on Data Reconciliation for example, it reloads the page again. Then when I click it again, it expands the group
Here is the markup
<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 menu-open">
<a href="#" class="nav-link active">
<i class="nav-icon fas fa-tachometer-alt"></i>
<p>
Dashboard
<i class="right fas fa-angle-left"></i>
</p>
</a>
<ul class="nav nav-treeview">
<li class="nav-item">
<a href="#" class="nav-link">
<i class="nav-icon fas fa-copy"></i>
<p>
Data Reconciliation
<i class="fas fa-angle-left right"></i>
<span class="badge badge-info right">6</span>
</p>
</a>
<ul class="nav nav-treeview">
<li class="nav-item">
<a href="pages/layout/top-nav.html" class="nav-link">
<i class="far fa-circle nav-icon"></i>
<p>Top Navigation</p>
</a>
</li>
<li class="nav-item">
<a href="pages/layout/top-nav.html" class="nav-link">
<i class="far fa-circle nav-icon"></i>
<p>Top Navigation</p>
</a>
</li>
</ul>
</li>
<li class="nav-header">Reports</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="nav-icon fas fa-copy"></i>
<p>
Layout Options
<i class="fas fa-angle-left right"></i>
<span class="badge badge-info right">6</span>
</p>
</a>
<ul class="nav nav-treeview">
<li class="nav-item">
<a href="pages/layout/top-nav.html" class="nav-link">
<i class="far fa-circle nav-icon"></i>
<p>Top Navigation</p>
</a>
</li>
</ul>
</li>
<li class="nav-item">
<a href="./index3.html" class="nav-link">
<i class="far fa-circle nav-icon"></i>
<p>Dashboard v3</p>
</a>
</li>
</ul>
</li>
</ul>
</nav>
What could be the reason? Is this issue have any connection with Angular?
Replace ALL
href="#"
by
[routerLink]=""
This should works.
I am making an example project for my PHP course, I have a sidebar navigation with 2 dropdown menus. Whenever I click on a dropdown button the list items of that menu keep disappearing. You can see the gif below to see what exactly happens.
Click here for the gif
This is the code below, it's only the side navigation. All the other parts like header, footer and content are in other pages and have been included in the index file using include() function of PHP.
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.php">CMS Admin</a>
</div>
<!-- Top Menu Items -->
<ul class="nav navbar-right top-nav">
<li>Visit Website</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-user"></i>
<?php
if(isset($_SESSION['username']))
{
echo $_SESSION['username'];
}
?>
<b class="caret"></b></a>
<ul class="dropdown-menu">
<li>
<i class="fa fa-fw fa-user"></i> Profile
</li>
<li class="divider"></li>
<li>
<i class="fa fa-fw fa-power-off"></i> Log Out
</li>
</ul>
</li>
</ul>
<!-- Sidebar Menu Items - These collapse to the responsive navigation menu on small screens -->
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav side-nav">
<li>
<i class="fa fa-fw fa-dashboard"></i> Dashboard
</li>
<li>
<i class="fa fa-fw fa-sticky-note"></i>Posts <i class="fa fa-fw fa-caret-down"></i>
<ul id="posts_dropdown" class="collapse">
<li>
View All Posts
</li>
<li>
Add Posts
</li>
</ul>
</li>
<li>
<i class="fa fa-fw fa-sitemap"></i> Categories
</li>
<li class="">
<i class="fa fa-fw fa-comments"></i> Comments
</li>
<li>
<i class="fa fa-fw fa-users"></i> Users <i class="fa fa-fw fa-caret-down"></i>
<ul id="demo" class="collapse">
<li>
View All Users
</li>
<li>
Add User
</li>
</ul>
</li>
<li>
<i class="fa fa-fw fa-user-circle-o"></i> Profile
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</nav>
Check your script and link tags, it works fine, here a short example of your code:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.php">CMS Admin</a>
</div>
<!-- Top Menu Items -->
<!-- Sidebar Menu Items - These collapse to the responsive navigation menu on small screens -->
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav side-nav">
<li>
<i class="fa fa-fw fa-dashboard"></i> Dashboard
</li>
<li>
<i class="fa fa-fw fa-sticky-note"></i>Posts <i class="fa fa-fw fa-caret-down"></i>
<ul id="posts_dropdown" class="collapse">
<li>
View All Posts
</li>
<li>
Add Posts
</li>
</ul>
</li>
<li>
<i class="fa fa-fw fa-users"></i> Users <i class="fa fa-fw fa-caret-down"></i>
<ul id="demo" class="collapse">
<li>
View All Users
</li>
<li>
Add User
</li>
</ul>
</li>
<li>
<i class="fa fa-fw fa-user-circle-o"></i> Profile
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</nav>
In my application a sidebar is there and it toggles when we click on it.Also I want to hide and show some table data but when I add code for this the sidebar doesnot toggle.May I know why this happened.
I want to hide table columns but when I did this my sidebar dropdown stops working.
This code is for sidebar toggle is working fine.
function goToUrl(id)
{
if(user_type_id!=3)
{
if(id==0)
{
$('.hideAndShow').toggle();
document.location="Doctor";//News
}
else
if(id==1)
{
$('.hideAndShow').toggle();
document.location="Device";//cases
}
if(id==2)
{
// $('#addJournals').toggle();
// $('#listingJournals').toggle();
$('.hideAndShow').toggle();
document.location="Associate";//journal
}
if(id==3)
{
$('.hideAndShow').toggle();
document.location="Patient";//gallery
}
}
else
{
if(id==0)
document.location="Doctor";
else
if(id==1)
document.location="Device";
if(id==2)
document.location="Associate";
else
if(id==3)
document.location="Patient";
}
}
<aside class="left-side sidebar-offcanvas" style="min-height: 260px;">
<!-- sidebar: style can be found in sidebar.less -->
<section class="sidebar">
<!-- Sidebar user panel -->
<!-- <div class="user-panel">
<div class="pull-left image">
<img src="img/avatar3.png" class="img-circle" alt="User Image">
</div>
<div class="pull-left info">
<p id="imageAdmin"></p>
<i class="fa fa-circle text-success"></i> Online
</div>
</div> -->
<ul class="sidebar-menu">
<!-- <li id='dashboard'>
<a href="/dashboard">
<i class="fa fa-dashboard"></i> <span>Dashboard</span>
</a>
</li> -->
<li class='treeview' id='Doctor'>
<a href="#">
<!-- <i class="fa fa-table"></i> -->
<i id="icon-color" class="fa fa-stethoscope"></i>
<span onclick="goToUrl(0)">Manage Doctor</span>
<i class="fa fa-angle-left pull-right"></i>
</a>
<ul class="treeview-menu">
<li class="hideAndShow">
<a href="/addDoctor?id=0" style="margin-left: 10px;">
<i class="fa fa-angle-double-right"></i> Add
</a>
</li>
<li class="hideAndShow">
<a href="/doctor?id=1" style="margin-left: 10px;">
<i class="fa fa-angle-double-right"></i> Listing
</a>
</li>
</ul>
</li>
<li class='treeview' id='Device'>
<a href="#">
<!-- <i class="fa fa-table"></i> -->
<i id="icon-color" class="fa fa-mobile"></i>
<span onclick="goToUrl(1)">Manage Device</span>
<i class="fa fa-angle-left pull-right"></i>
</a>
<ul class="treeview-menu">
<li class="hideAndShow">
<a href="/addDevice" style="margin-left: 10px;">
<i class="fa fa-angle-double-right"></i> Add
</a>
</li>
<li class="hideAndShow">
<a href="/device?id=1" style="margin-left: 10px;">
<i class="fa fa-angle-double-right"></i> Listing
</a>
</li>
</ul>
</li>
<li class='active' id='Report'>
<a href="/reports">
<!-- <i class="fa fa-table"></i> -->
<i id="icon-color" class="fa fa-list-alt"></i>
<span>Reports</span>
</a>
</li>
</ul>
</section>
<!-- /.sidebar -->
</aside>
but when i add following code sidebar not toggle
$(document).ready(function(){
$("#hi").click(function(){
// $("p").hide();
$('td:nth-child(3)').hide();
});
$("#sh").click(function(){
// $("p").show();
$('td:nth-child(3)').show();
});
});
please help me.
I have a hamburger icon that triggers a pop-out JS window - and I want it add it to a list menu. This code works:
<div class="header-top-first clearfix">
<ul class="social-links clearfix hidden-xs">
<li><img src="../_img/icon_hamburger.png" class="nav-toggler toggle-slide-left"></li>
<li class="twitter"><a target="_blank" href="http://www.twitter.com"><i class="fa fa-twitter"></i></a></li>
<li class="facebook"><a target="_blank" href="http://www.facebook.com"><i class="fa fa-facebook"></i></a></li>
<li class="linkedin"><a target="_blank" href="http://www.linkedin.com"><i class="fa fa-linkedin"></i></a></li>
</ul>
BUT I want the HAMBURGER to NOT be an image, rather an FA icon as shown below. My question is - as it is coded below, the link no longer works?
<div class="header-top-first clearfix">
<ul class="social-links clearfix hidden-xs">
<!-- I am trying to replace the hamburger image here but the pop-open link no longer works -->
<li class="nav-toggler toggle-slide-left"><a href="#" class="nav-toggler toggle-slide-left"><i class="fa fa-bars"></i></li>
<li class="twitter"><a target="_blank" href="http://www.twitter.com"><i class="fa fa-twitter"></i></a></li>
<li class="facebook"><a target="_blank" href="http://www.facebook.com"><i class="fa fa-facebook"></i></a></li>
<li class="linkedin"><a target="_blank" href="http://www.linkedin.com"><i class="fa fa-linkedin"></i></a></li>
</ul>
Any suggestions on how I can add it to the list as fa-bars and still have the pop-open work?
You're missing an </a> tag between </i></li>