Submenu of a menu doesn't open - javascript

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<header>
<nav class="navbar navbar-expand-sm navbar-light bg-light">
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="nav navbar-nav ml-auto">
<li class="nav-item dropdown mr-2 cursor-pointer" dropdown>
<a class="btn nav-link dropdown-toggle" dropdownToggle>
</a>
<div class="dropdown-menu dropdown-menu-right" *dropdownMenu>
<a class="btn dropdown-item" *ngFor="let language of languages" (click)="setLanguage(language)">
<span style="vertical-align: super;"></span>
</a>
</div>
</li>
<!-- utente con avatar -->
<li class="nav-item dropdown mr-2 cursor-pointer" dropdown>
<a class="btn nav-link float-right mt-1 pr-4" dropdownToggle>
<span class="float-left mt-1">
<i class="fa fa-user" style="font-size: 1.5rem;"></i>
<!-- prevedere user image -->
</span>
<span class="float-right mt-1 ml-1">
<div><b>user</b></div>
<div *ngIf="currentUser.roles && currentUser.roles.length == 1">desc</div>
<div *ngIf="currentUser.roles && currentUser.roles.length > 1">role</div>
</span>
</a>
<!-- menu -->
<div class="dropdown-menu dropdown-menu-right" *dropdownMenu>
<!-- logo confidi -->
<div class="dropdown-item text-center user-image">
<img [src]="userService.getUserPicture(currentUser?.image?.content)" class="img-fluid" alt="">
</div>
<!-- ultimo accesso -->
<div class="dropdown-item">
<div class="font-weight-bold">access </div>
<div>date</div>
</div>
<!-- matricola -->
<div class="dropdown-item">
<div class="font-weight-bold">numer </div>
<div>user</div>
</div>
<!-- ruoli -->
<div class="nav-item dropdown mr-2 cursor-pointer" dropdown>
<a class="btn nav-link dropdown-toggle font-weight-bold" dropdownToggle>roles</a>
<div class="dropdown-menu dropdown-menu-right" *dropdownMenu>
<a class="btn dropdown-item" *ngFor="let role of currentUser.roles; let i = index">
code - desc
</a>
</div>
</div>
<a class="dropdown-item logout-link" (click)="logout()">
<i class="fa fa-lock"></i> <span class="font-weight-bold">logout</span></a>
</div>
</li>
</ul>
</div>
</nav>
</header>
I have a dropdown-menu that contains multiple dropdown-item and an item that I want to be a submenu(that contains a list of item).
I add the submenu on my menu but when I try to open it does not open.
Here is the stackblitz
https://angular6-bootstrap4-navbar-j8ar1z.stackblitz.io
As you see there is a submenu called roles that doesn't open. How can I fix it?


The problem lies in your HTML - you cannot nest <li> tag inside of another <li> tag.
The HTML <li> element is used to represent an item in a list. It must be contained in a parent element: an ordered list (<ol>), an unordered list (<ul>), or a menu (<menu>).
Source: MDN web docs
You can put <ul> inside of <li> though. It is actually a proper way to create a nested list.
Another thing is that you are trying to use nested dropdown and these seem to still be an experimental feature of ngx-bootstrap
Basic working example:
<!-- template.html !-->
<ul >
<li dropdown [autoClose]="false" container="body">
<a dropdownToggle class="dropdown-item dropdown-toggle"
(click)="false">Languages <span class="caret"></span></a>
<ul id="dropdown-nested" *dropdownMenu class="dropdown-menu"
role="menu" aria-labelledby="button-nested">
<li role="menuitem" *ngFor="let lang of languages"><a class="dropdown-item" href="#/dropdowns#nested-dropdowns">{{lang}}</a></li>
</ul>
</li>
<li dropdown [autoClose]="false" container="body">
<a dropdownToggle class="dropdown-item dropdown-toggle"
(click)="false">User <span class="caret"></span></a>
<ul id="dropdown-nested" *dropdownMenu class="dropdown-menu"
role="menu" aria-labelledby="button-nested">
<li role="menuitem"><a class="dropdown-item" href="#/dropdowns#nested-dropdowns">Settings</a></li>
<li role="menuitem" dropdown triggers="mouseover" placement="right" container="body">
<a dropdownToggle class="dropdown-item dropdown-toggle"
(click)="false">Roles<span class="caret"></span></a>
<ul *dropdownMenu class="dropdown-menu" role="menu">
<li role="menuitem" *ngFor="let role of currentUser.roles"><a class="dropdown-item" href="#/dropdowns#nested-dropdowns">{{role}}</a></li>
</ul>
</li>
<li role="menuitem"><a class="dropdown-item" href="#/dropdowns#nested-dropdowns">Logout</a></li>
</ul>
</li>
</ul>
// Component.ts
import { Component } from '#angular/core';
#Component({
selector: 'my-app',
templateUrl: './app.component.html'
})
export class AppComponent {
public menu: {}[] = [];
languages = ['pl', 'en', 'de', 'es'];
currentUser = {roles: ['admin', 'inboxUser', 'developer']}
}
Example on Stackblitz

Related

How To Keep Sidebar Open When Click Sub Menu

I use bootstrap 5, i want when a sidebar item is clicked it will be active and when a sub sidebar item is clicked it will also be active
And when reloading the item that was selected earlier it is still stored
Here my code
<div class="row row-offcanvas row-offcanvas-left vh-100" style="width: 1700px">
<div class="col-md-3 col-lg-2 sidebar-offcanvas h-100 overflow-auto bg-light pl-0" id="sidebar" role="navigation">
<ul class="nav flex-column sticky-top pl-2 mt-0">
<li>
<a href="/home">
<i class="nc-icon nc-bank"></i>
<p>Dashboard</p>
</a>
</li>
{{-- Menu Manajemen Karyawan --}}
<li>
<a class="nav-link" href="#submenu1" data-toggle="collapse" data-target="#submenu1">
<i class="nc-icon nc-tile-56"></i>
Manajemen Karyawan
</a>
<ul class="sub-menu list-unstyled flex-column collapse pl-2" id="submenu1" aria-expanded="false">
<li style="margin-top: -15px">
<a href="{{ route('karyawan.index') }}">
<i class="nc-icon nc-badge"></i>
<p>Karyawan </p>
<p></p>
</a>
</li>
<li style="margin-top: -15px">
<a href="#">
<i class="nc-icon nc-ruler-pencil"></i>
<p>Pengkinian Data </p>
<p></p>
</a>
</li>
<li class="dropdown" style="margin-top: -15px">
<a href="" data-toggle="dropdown" aria-expanded="false">
<i class="nc-icon nc-chart-bar-32"></i>
<p class="dropdown-toggle" id="navbarDropdownMenuLink">Pergerakan Karir </p>
<p></p>
</a>
<div class="dropdown-menu dropdown-primary dropdown-menu-right">
<a class="dropdown-item" href="{{ route('mutasi.index') }}">Mutasi</a>
<a class="dropdown-item" href="{{ route('demosi.index') }}">Demosi</a>
<a class="dropdown-item" href="{{ route('promosi.index') }}">Promosi</a>
<a class="dropdown-item" href="{{ route('karyawan.penonaktifan') }}">Penonaktifan</a>
</div>
</li>
</ul>
</li>
</ul>
</div>
</div>
can anyone help ?

JQuery dropdown toggle not working on mobile but works perfect locally

I have a nav menu with dropdown lists. When running locally and clicking the element the dropdown menu list appears perfect. When actually attempting on a mobile device it does nothing. Any suggestions why this maybe happening and how to fix?
I have figured that the script injecting the header.html is breaking the toggle? If I put the entire header.html code in index.html the dropdown works on mobile .... any suggestions / alternatives to how I am injecting the header.html code, other than PHP.
Html (index.html)
<!-- Header -->
<header id="main-header" class="header-main header-dark fixed-top header-fluid">
<script>
fetch('/includes/header.html')
.then(response => response.text())
.then(value => {
document.getElementById('main-header').innerHTML = value
});
</script>
</header>
<!-- Header End -->
Worth noting I am injecting the header via JQuery - see screenshot below
Feel free to demo at http://credit.fleetfactors.co.uk, try on desktop, mobile and desktop (inspect as mobile device)...
Scripts
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="static/js/jquery-3.5.1.min.js"></script>
<script src="static/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="static/vendor/counter/jquery.countTo.js"></script>
<!-- typed -->
<script src="static/vendor/typed/typed.js"></script>
<!-- owl-carousel -->
<script src="static/vendor/owl-carousel/js/owl.carousel.min.js"></script>
<!-- magnific -->
<script src="static/vendor/magnific/jquery.magnific-popup.min.js"></script>
<script src="static/vendor/isotope/isotope.pkgd.min.js"></script>
<!-- svg-injector -->
<script src="static/vendor/svginjector/svg-injector.min.js"></script>
<!-- jarallax -->
<script src="static/vendor/jarallax/jarallax-all.js"></script>
<!-- count-down -->
<script src="static/vendor/count-down/jquery.countdown.min.js"></script>
<!-- working form -->
<script src="static/vendor/mail/js/form.min.js"></script>
<script src="static/vendor/mail/js/script.js"></script>
JQuery
CRE.MegaMenu = function() {
var mDropdown = $(".px-dropdown-toggle")
mDropdown.on("click", function() {
$(this).parent().toggleClass("open-menu-parent");
$(this).next('.dropdown-menu').toggleClass("show");
$(this).toggleClass("open");
});
}
Includes (header.html)
<div class="header-top header-border-bottom small">
<div class="container">
<div class="d-flex justify-content-between align-items-center">
<!-- Left -->
<div class="d-flex align-items-center justify-content-center d-none d-lg-block">
<ul class="nav">
<li class="nav-item me-3 text-white">
<span>
<i class="fa fa-envelope me-2"></i>
Email: sales#fleetfactors.co.uk
</span>
</li>
<li class="nav-item">
<a href="#" class="navbar-link text-white">
<i class="fas fa-headset me-2"></i>
Call: 01642 770 664
</a>
</li>
</ul>
</div>
<!-- Right -->
<div class="d-flex align-items-center justify-content-center w-100 w-lg-auto">
<!-- Language -->
<div class="dropdown ms-0 ms-lg-3">
<a class="dropdown-toggle text-white" href="#" role="button" id="dropdown_language" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="fa-fw me-2 bi bi-globe"></i>Global</a>
<div class="dropdown-menu mt-2 shadow" aria-labelledby="dropdown_language" style="margin: 0px;">
<span class="dropdown-item-text">Select Site</span>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#"><i class="fa-fw me-2 bi bi-cart4"></i> Fleet Shop</a>
<a class="dropdown-item" href="#"><i class="fa-fw me-2 bi bi-upc-scan"></i> E-Cat</a>
</div>
</div>
<!-- Top link -->
<ul class="nav ms-auto ms-lg-3">
<li class="nav-item">
Contact
</li>
<li class="nav-item">
<i class="fa-solid fa-folder-open me-2"></i>Downloads
</li>
</ul>
<!-- Top social -->
<div class="nav header-social justify-content-end d-none d-lg-block">
<a class="h-social-link" href="#"><i class="bi bi-facebook"></i></a>
<a class="h-social-link" href="#"><i class="bi bi-twitter"></i></a>
<a class="h-social-link" href="#"><i class="bi bi-linkedin"></i></a>
</div>
</div>
</div>
</div>
</div>
<!-- End Top Header -->
<nav class="navbar navbar-expand-lg navbar-dark">
<div class="container">
<!-- Logo -->
<a class="navbar-brand" href="index.html">
<img class="logo-dark" src="/static/img/fleet-logo-dark.svg" width="160px" title="" alt="">
<img class="logo-light" src="/static/img/fleet-logo-light.svg" width="160px" title="" alt="">
</a>
<!-- Logo -->
<!-- Mobile Toggle -->
<button class="navbar-toggler ms-auto me-2" 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"></span>
</button>
<!-- End Mobile Toggle -->
<!-- Menu -->
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav m-auto">
<li class="nav-item">
<a href="https://fleetfactors.co.uk" class="nav-link">
Home
</a>
</li>
<li class="dropdown nav-item">
Company
<label class="px-dropdown-toggle mob-menu"></label>
<ul class="dropdown-menu left list-unstyled">
<li><a class="dropdown-item" href="/company/about-us.html">About Us</a></li>
<li><a class="dropdown-item" href="/company/team.html">Our Team</a></li>
<li><a class="dropdown-item" href="/company/corporate-social-values.html">Corporate Social Values</a></li>
<li><a class="dropdown-item" href="/company/qhse.html">QHSE</a></li>
<li><a class="dropdown-item" href="/careers.html">Careers</a></li>
<li><a class="dropdown-item" href="/news.html">News & Events</a></li>
</ul>
</li>
<li class="dropdown nav-item">
Services
<label class="px-dropdown-toggle mob-menu"></label>
<ul class="dropdown-menu left list-unstyled">
<li><a class="dropdown-item" href="/brands.html">Brands</a></li>
<li><a class="dropdown-item" href="/services/stores-management.html">Stores Management</a></li>
<li><a class="dropdown-item" href="/services/commercial-parts.html">Bus, Truck & Trailer Parts</a></li>
<li><a class="dropdown-item" href="/services/consumables.html">Consumables</a></li>
<li><a class="dropdown-item" href="/services/lubricants.html">Lubricant Products</a></li>
<li><a class="dropdown-item" href="/services/refinish.html">Refinish Products</a></li>
<li><a class="dropdown-item" href="/services/ppe.html">PPE Products & Embroidery</a></li>
<li><a class="dropdown-item" href="/services/janitorial.html">Janitorial Products</a></li>
</ul>
</li>
<li class="dropdown nav-item">
Resources
<label class="px-dropdown-toggle mob-menu"></label>
<ul class="dropdown-menu left list-unstyled">
<li><a class="dropdown-item" href="/resources/brand-guidelines.html">Brand Guidelines</a></li>
<li><a class="dropdown-item" href="/resources/promotions.html">Promotions</a></li>
<li><a class="dropdown-item" href="/resources/brochures.html">Brochures</a></li>
<li><a class="dropdown-item" href="/resources/accreditations.html">Accreditations</a></li>
</ul>
</li>
<li class="dropdown nav-item">
Support
<label class="px-dropdown-toggle mob-menu"></label>
<ul class="dropdown-menu left list-unstyled">
<li><a class="dropdown-item" href="/support/returns-policy.html">Returns</a></li>
<li><a class="dropdown-item" href="/support/delivery-policy.html">Delivery</a></li>
<li><a class="dropdown-item" href="/branch-locator.html">Branch Locator</a></li>
<li><a class="dropdown-item" href="/contact-us.html">Contact Us</a></li>
</ul>
</li>
</ul>
</div>
<!-- End Menu -->
<div class="nav flex-nowrap align-items-center">
<!-- Nav Search-->
<div class="nav-item">
<a class="nav-link pe-0 collapsed display-7 py-0 me-3" data-bs-toggle="collapse" href="javascript:void(0)" data-bs-target="#search-open" aria-expanded="false">
<i class="bi bi-search display-8"> </i>
</a>
</div>
<!-- Nav Button -->
<div class="nav-item d-none d-xl-block">
Login to Fleet Shop<i class="bi bi-arrow-right-short ms-2"></i>
</div>
</div>
</div>
</nav>

Collapsed navbar push elements outside of parent container when shown (Bootstrap 5)

Intro
I'm using Bootstrap 5 (bundled with webpack 5), with his grid system and the collapse function to create the home page to this site, that has 2 sidebars that collapse into a topbar.
When we get to a mobile format the navs collapse and the columns containing them stack up leaving the 3rd col with the logo at the bottom without overflowing the parent.
Look at my 100% accurate ms paint graphics to understand better
Issue
When we show the collapsed navs, the columns containing them push the 3rd col with the logo out of the row and the container-fluid containing it.
Question
How can i make the navs expanding without pushing the logo? (to clarify the logo needs to stay below the navs
ms paint 100% accurate graphics
<div class="container-fluid">
<div class="row">
<div class="col-lg-1 order-0 my-auto">
<nav class="navbar navbar-expand-lg">
<a class="navbar-brand brand d-lg-none" href="#"
><b>ENV</b>Productions</a
>
<button
class="navbar-toggler"
type="button"
data-bs-toggle="collapse"
data-bs-target="#navbarResponsive"
aria-controls="navbarResponsive"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul
class="navbar-nav flex-column justify-content-between text-center text-lg-start"
>
<li class="nav-item">
<a class="nav-link" href="#about">ABOUT</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#services">SEVICES</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#portfolio">PORTFOLIO</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#contact">CONTACT</a>
</li>
</ul>
</div>
</nav>
</div>
<div class="col-lg-10 order-lg-1 order-last my-auto text-center">
<a class="navbar-brand brand d-none d-lg-block" href="#"
><b>ENV</b>Productions</a
>
<img
src="assets/img/BG_ENV_MONO-800px.png"
alt=""
class="img-fluid"
/>
</div>
<div class="col-lg-1 order-lg-2 my-auto">
<nav class="navbar navbar-expand-lg">
<div
class="collapse navbar-collapse justify-content-end"
id="navbarResponsive"
>
<ul
class="navbar-nav flex-row flex-lg-column justify-content-around justify-content-lg-between"
>
<li class="nav-item text-center">
<a
href="https://www.instagram.com/env.productions/?hl=it"
target="”_blank”"
><i class="fa fa-instagram fa-2x" aria-hidden="true"></i
></a>
</li>
<li class="nav-item text-center">
<a
href="https://www.youtube.com/channel/UCIloBELeZR4x8jmrhIQXQCw/featured"
target="”_blank”"
><i class="fa fa-youtube-play fa-2x" aria-hidden="true"></i
></a>
</li>
<li class="nav-item text-center">
<a
href="https://www.facebook.com/env.productions/"
target="”_blank”"
><i class="fa fa-facebook-f fa-2x" aria-hidden="true"></i
></a>
</li>
<li class="nav-item text-center">
<a
href="https://www.linkedin.com/company/env-productions/"
target="”_blank”"
><i class="fa fa-linkedin fa-2x" aria-hidden="true"></i
></a>
</li>
</ul>
</div>
</nav>
</div>
</div>
</div>

I solved this by making the logo a background-image and merging the collapsible elements under the same parent with js.
There's probably a better solution though and maybe one that let you have the image at a block/inline level.

Dynamic AJAX sidebar menu jquery loaded after page loads in adminlte-3 bootstrap-4 treeview open/hide not working

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. When static data push on '.sidebar' class without ajax, menu open/hide working. But using ajax call treeview 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');

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 ?

Categories