Sidebar menu not working in Laravel+vue+adminlte - javascript

I have installed AminLte v3 using npm in my Laravel + vue project ad evrything is working great but when i click on the Side navbar main menu which is tagged as
<li class="nav-item has-treeview">
<a href="#" class="nav-link">
<i class="nav-icon fas fa-users"></i>
<p>
Members
<i class="fas fa-angle-left right"></i>
<span class="badge badge-warning right">new:2</span>
</p>
</a>
<ul class="nav nav-treeview">
<li class="nav-item">
<router-link :to="{name : 'members'}" class="nav-link">
<i class="fas fa-user-check nav-icon"></i>
<p>All</p>
</router-link>
</li>
<li class="nav-item">
<router-link :to="{name:'membersLatest'}" class="nav-link">
<i class="fas fa-user-plus nav-icon"></i>
<span class="badge badge-danger right">2</span>
<p>Latest</p>
</router-link>
</li>
<li class="nav-item">
<router-link :to="{name:'membersPending'}" class="nav-link">
<i class="fas fa-user-clock nav-icon"></i>
<p>Pending</p>
</router-link>
</li>
<li class="nav-item">
<router-link :to="{name:'membersSuspended'}" class="nav-link">
<i class="fas fa-user-lock"></i>
<span class="badge badge-danger right">2</span>
<p>Suspended</p>
</router-link>
</li>
</ul>
</li>
It is redirecting me to # router path which is coming from
<a href="#" class="nav-link">
<i class="nav-icon fas fa-users"></i>
<p>
Members
<i class="fas fa-angle-left right"></i>
<span class="badge badge-warning right">new:2</span>
</p>
</a>
This part and it is not opening sub-menus inside the main-menu and I am including the navBar from a another vue component.
Can anybody give an idea how am I going to solve this?

When you are hitting on another route instead of admitlte routes, the treeview selector is unable to find the element. When you push the url to redirect into adminlte , the treeview won't work because the selector is defined before element mounted.
To fix this problem define a mounted hook in the sidebar component.
mounted(){
$('[data-widget="treeview"]').Treeview('init');
}

in the bootstrap.js file put require('admin-lte') below
require('bootstrap')

Related

How to set active class on current nav item

I am facing problem while setting active class on nav item.
Here is my code on template
<nav class="mt-2">
<ul class="nav nav-pills nav-sidebar flex-column" data-widget="treeview" role="menu" data-accordion="false">
<li class="nav-item">
<a href="{{ url('/dashboard') }}" class="nav-link">
<i class="nav-icon fas fa-tachometer-alt"></i>
<p>
Dashboard
</p>
</a>
</li>
<li class="nav-item">
<a href="{{ url('/dashboard/logo') }}" class="nav-link">
<i class="nav-icon fab fa-bandcamp"></i>
<p>
Add/Change Logo
</p>
</a>
</li>
<li class="nav-item has-treeview">
<a href="#" class="nav-link">
<i class="nav-icon fas fa-image"></i>
<p>
Banner
<i class="fas fa-angle-left right"></i>
</p>
</a>
<ul class="nav nav-treeview">
<li class="nav-item">
<a href="{{ url('/dashboard/banner') }}" class="nav-link">
<i class="nav-icon fas fa-plus"></i>
<p>Add Banner</p>
</a>
</li>
<li class="nav-item">
<a href="{{url('/dashboard/banner/edit')}}" class="nav-link">
<i class="nav-icon fas fa-edit"></i>
<p>Edit Banner</p>
</a>
</li>
</ul>
</li>
</ul>
</nav>
I tried
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function () {
var url = window.location;
$('ul.nav li.nav-item a[href="' + url + '"]').parent().addClass('active');
$('ul.nav li.nav-item a').filter(function () {
return this.href == url;
}).parent().addClass('active').parent().parent().addClass('active');
});
</script>
But this code setting the "active" class on list tag but not in anchor tag.
Instead of using .parent(), try using .closest('a').
closest() will traverse UP the DOM tree until it finds the specified selector - in the above example, the first <a> tag above the element.
Virtually all of your .parent() can be replaced with .closest() - but use as desired. There is no "right" or "wrong", just what works or is easiest for you.
You can use any normal css/jQuery selector with closest() - from a tagName:
.closest('a')
to a className:
.closest('a.nav-item')
etc.
Reference:
https://api.jquery.com/closest/

How to count the number of class of a page to display it in a menu?

I have a Drupal 8.8.4 site with Bootstrap 3.4.1 theme
I have created a store view page to display the tasks to be performed by merchants.
On this page, each task corresponds to a view block :
The orange blocks have the class "task-list-warning".
The red blocks have the class "task-list-danger".
enter image description here
There is a menu link to display this page and I added 2 badges :
With the class "task-badge-warning".
With the class "task-badge-danger".
I want to display the number of tasks on the page, in the menu link badges :
The number of class "task-list-warning" in the "task-badge-warning".
The number of class "task-list-danger" in the "task-badge-danger".
enter image description here
The store menu is a TWIG file containing the following code :
<nav role="navigation" aria-labelledby="menu-page-boutique" id="menu-page-boutique" class="contextual-region">
<ul class="nav navbar-nav m-0">
<li class="dropdown">
<i class="fas fa-plus-circle fa-lg"></i> Gérer votre {{ store_entity.type.entity.label }}
<ul class="dropdown-menu">
<li class="task">
<i class="fas fa-tasks fa-lg"></i> <b>Liste des tâches</b> <span class="badge badge-warning task-badge-warning">0</span> <span class="badge badge-danger task-badge-danger">0</span>
</li>
<li>
<i class="fas fa-cash-register fa-lg"></i> Point de vente
</li>
<li>
<i class="fas fa-exchange-alt fa-lg"></i> Migrer
</li>
<li>
<i class="fas fa-glasses fa-lg"></i> Voir
</li>
<li>
<i class="fas fa-feather-alt fa-lg"></i> Modifier
</li>
<li>
<i class="fas fa-trash-alt fa-lg"></i> Supprimer
</li>
<li>
<i class="fas fa-globe fa-lg"></i> Traductions
</li>
<li>
<i class="fas fa-sitemap fa-lg"></i> L'équipe
</li>
<li>
<i class="fas fa-link fa-lg"></i> Relations
</li>
<li>
<i class="fas fa-gift fa-lg"></i> Produits
</li>
<li>
<i class="fas fa-percentage fa-lg"></i> Promotions
</li>
<li>
<i class="fas fa-credit-card fa-lg"></i> Modes de paiement
</li>
<li>
<i class="fas fa-truck fa-lg"></i> Modes de livraison
</li>
<li>
<i class="fas fa-shopping-cart fa-lg"></i> Commandes
</li>
<li>
<i class="fas fa-clipboard-list fa-lg"></i> Inventaire
</li>
<li>
<i class="fas fa-calculator fa-lg"></i> Rapports de vente
</li>
<li>
<i class="fas fa-heartbeat fa-lg"></i> Mentions j'aime
</li>
<li>
<i class="fas fa-flag-checkered fa-lg"></i> Référencement
</li>
</ul>
</li>
</ul>
</nav>
How can I do this ?
THE PROBLEM
I started a module for Drupal 8 :
https://git.drupalcode.org/sandbox/zenimagine-3076032/tree/master
It only works if I'm on the task page. But if I go to another page, the counter in the menu does not work.
enter image description here
How to display the task counter on all pages where the menu is present ?
The menu is displayed on all pages with the url :
https://www.example.com/fr/store/ID_STORE
https://www.example.com/en/store/ID_STORE
https://www.example.com/fr/store/ID_STORE/*
https://www.example.com/en/store/ID_STORE/*

Vue.js : How to make dynamic menu?

Could someone help me with creating menus dynamically from a database? Lets say all the data from the database is already supplied by me, but I want to show a dynamic menu if a user is logged in or not.
I created some Vue components
App.vue
<template>
<div id="app">
<navbar></navbar>
<div class="page-container">
<leftmenu></leftmenu>
<container></container>
</div>
</div>
</template>
<script>
import Menu from './components/Menu.vue'
import LeftMenu from './components/Leftmenu.vue'
import Container from './components/Container.vue'
export default {
components: {
'navbar': Menu,
'leftmenu': LeftMenu,
'container': Container,
}
}
</script>
The LeftMenu component is in charge of making the menu that will make use of the database data:
Leftmenu.vue
<template>
<div class="page-sidebar-wrapper">
<div class="page-sidebar navbar-collapse collapse">
<ul class="page-sidebar-menu page-header-fixed " data-keep-expanded="false" data-auto-scroll="true"
data-slide-speed="200" style="padding-top: 20px">
<li class="sidebar-toggler-wrapper hide">
<div class="sidebar-toggler">
<span></span>
</div>
</li>
<li class="nav-item start active open">
<a href="javascript:;" class="nav-link nav-toggle">
<i class="icon-home"></i>
<span class="title">Dashboard</span>
<span class="selected"></span>
<span class="arrow open"></span>
</a>
<ul class="sub-menu">
<router-link
to="/home"
tag="li">
<a class="nav-link">
<i class="icon-layers"></i>
<span class="title">Home</span>
<span class="badge badge-danger">5</span>
</a>
</router-link>
<router-link
to="/grafik"
tag="li">
<a class="nav-link">
<i class="icon-layers"></i>
<span class="title">Grafik</span>
<span class="badge badge-danger">5</span>
</a>
</router-link>
<router-link
to="/form"
tag="li">
<a class="nav-link">
<i class="icon-layers"></i>
<span class="title">Form</span>
<span class="badge badge-danger">5</span>
</a>
</router-link>
<router-link
to="/uploadfile"
tag="li">
<a class="nav-link">
<i class="icon-layers"></i>
<span class="title">Upload File</span>
<span class="badge badge-danger">5</span>
</a>
</router-link>
<router-link
to="/login"
tag="li">
<a class="nav-link">
<i class="icon-layers"></i>
<span class="title">Login</span>
<span class="badge badge-danger">5</span>
</a>
</router-link>
</ul>
</li>
<li class="nav-item ">
<a href="javascript:;" class="nav-link nav-toggle">
<i class="icon-settings"></i>
<span class="title">System</span>
<span class="arrow"></span>
</a>
<ul class="sub-menu">
<li class="nav-item ">
<a href="ui_metronic_grid.html" class="nav-link ">
<span class="title">Login</span>
</a>
</li>
<li class="nav-item ">
<a href="ui_metronic_grid.html" class="nav-link ">
<span class="title">Ganti Password</span>
</a>
</li>
<li class="nav-item ">
<a href="ui_metronic_grid.html" class="nav-link ">
<span class="title">Ganti Profil</span>
</a>
</li>
<li class="nav-item ">
<a href="ui_metronic_grid.html" class="nav-link ">
<span class="title">Logout</span>
</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
</template>
<script>
import _ from 'lodash'
export default {
created() {
if(_.isEmpty(this.$auth.getAuthenticatedUser())) {
alert('empty')
} else {
alert('user authenticated')
}
}
}
</script>
this.$auth.getAuthenticatedUser() is already done but will return an empty object if my localStorage is empty. It will but filled if I am logged in.
I am using this bit of code for it:
this.$http.get('api/getmenu')
.then(response => {
this.data = response.body
})
In which component should I query the database to obtain the data to render a menu for the logged in user?
If I place a function to query the database inside my App.vue component, then the application will show an error.
What should I put in the Leftmenu component ?

RouterLinkActive does work in ngFor

Will accept any javascript solution but best answer might be one using angular2
I am trying to create my nav bar dynamically based on a api call.
The issue is I want the parent li to have an active class if another li (child) is active.
The below code works to what I want it to do but doesn't load it dynamically
<nav>
<ul>
<li>
<a (click)="togglePatientSideSearch()"><i class="fa fa-lg fa-fw fa-search"></i> <span class="menu-item-parent">Patient Search</span></a>
</li>
<li data-nav-target="1" [routerLinkActive]="['active']" [routerLinkActiveOptions]="{ exact: false }">
<a (click)="toggleNavMenuParentSelected(1)" title="Dashboard"><i class="fa fa-lg fa-fw fa-home"></i> <span class="menu-item-parent">Payroll</span>
<b class="collapse-sign">
<em class="fa fa-plus-square-o"></em>
</b>
</a>
<ul>
<li [routerLinkActive]="['active']">
<a [routerLink]="['/payroll/summary']" title="Payroll Summary"><span class="menu-item-parent">Summary</span></a>
</li>
<li [routerLinkActive]="['active']">
<a [routerLink]="['/payroll/daily']" title="Payroll Daily"><span class="menu-item-parent">Daily</span></a>
</li>
</ul>
</li>
</nav>
The below code is what doesn't work that I am trying to fix!
<nav>
<ul *ngIf="navigationMenu">
<li *ngFor="let nav of navigationMenu; let i = index;" [attr.data-nav-target]="nav.logo && !nav.children ? null : i" [attr.routerLinkActiveOptions]="nav.logo && !nav.children ? null : { exact: false }" [attr.routerLinkActive]="nav.logo && !nav.children ? null : ['active']" >
<a *ngIf="nav.logo && !nav.children" (click)="navigationClicked(nav)"><i class="{{nav.logo}}"></i> <span class="menu-item-parent">{{nav.name}}</span></a>
<a *ngIf="nav.logo && nav.children" (click)="toggleNavMenuParentSelected(i)" title="Dashboard">
<i class="fa fa-lg fa-fw fa-home"></i> <span class="menu-item-parent">{{nav.name}}</span>
<b class="collapse-sign">
<em class="fa fa-plus-square-o"></em>
</b>
</a>
<ul *ngIf="nav.children">
<li [routerLinkActive]="['active']" *ngFor="let child of nav.children;">
<a [routerLink]="['/home']" title="Home"><span class="menu-item-parent">{{child.name}}</span></a>
</li>
</ul>
</li>
</ul>
</nav>
I am loading the whole nav bar at the same time in one object called navigationMenu. Below is what I want it to look like vs what it is when dynamically loaded! (ignore different names)
You can use:
[routerLinkActiveOptions]="{ exact: true }"
with your:
routerLinkActive="active"
I found the solution that worked for me here:
https://github.com/angular/angular/issues/8397

Angular 2 move component to back (Change z position)

I am trying to make a responsive web app with a side menu that hide and shows via a button when the screen is small. However, I am finding that when the menu shows, it shows "behind" my main component (As shown in the images below). I am using angular 2 with with with some javascript/css from responsive website code
My main app.component.html looks like
<header class="header clearfix">
<button type="button" id="toggleMenu" class="toggle_menu">
<i class="fa fa-bars"></i>
</button>
<h1>Timesheet</h1>
</header>
<nav class="vertical_nav">
<ul id="js-menu" class="menu">
<li class="menu--item">
<a [routerLink]="['/a']" class="menu--link" title="a">
<i class="menu--icon fa fa-fw fa-user"></i>
<span class="menu--label">a</span>
</a>
</li>
<li class="menu--item">
<a [routerLink]="['/b']" class="menu--link" title="b">
<i class="menu--icon fa fa-fw fa-briefcase"></i>
<span class="menu--label">b</span>
</a>
</li>
<li class="menu--item">
<a [routerLink]="['/c']" class="menu--link" title="c">
<i class="menu--icon fa fa-fw fa-cog"></i>
<span class="menu--label">c</span>
</a>
</li>
<li class="menu--item">
<a [routerLink]="['/d']" class="menu--link" title="d">
<i class="menu--icon fa fa-fw fa-database"></i>
<span class="menu--label">d</span>
</a>
</li>
<li class="menu--item">
<a [routerLink]="['/e-csv']" class="menu--link" title="e">
<i class="menu--icon fa fa-fw fa-globe"></i>
<span class="menu--label">e</span>
</a>
</li>
</ul>
</nav>
<div class="wrapper">
<section>
<router-outlet></router-outlet>
</section>
</div>
Just add a CSS style, or do it inline.
CSS
nav.vertical_nav {
z-index: 9;
}
Inline
<nav class="vertical_nav" style="z-index: 9;">

Categories