We Keep Coding

JS on click collapse bootstrap list

I am using bootstrap 5 I have taken a sample of JavaScript that allows a pop-out sidebar open on the left with the option to close the sidebar once opened.
Inside the sidebar I have a navigation menu with menu-links (in list format)
I want it so when the user has opened the sidebar, if they decide to click to close the sidebar it will also de-collapse/close the menu lists (#submenu1, #submenu2 and #submenu3) if any and all that are open/collapsed.
I am unsure of how to achieve this in JavaScript... surely its something simple?
The javascript also makes some adjustments to the body... this does not need to be changed/effected so ignore the parts of the JS regarding body classes etc...
JS:
document.addEventListener("DOMContentLoaded", function(event) {
const showNavbar = (toggleId, navId, bodyId, headerId) =>{
const toggle = document.getElementById(toggleId),
nav = document.getElementById(navId),
bodypd = document.getElementById(bodyId),
headerpd = document.getElementById(headerId)
// Validate that all variables exist
if(toggle && nav && bodypd && headerpd){
toggle.addEventListener('click', ()=>{
// show navbar
nav.classList.toggle('show')
// change icon
toggle.classList.toggle('bx-x')
// add padding to body
bodypd.classList.toggle('body-pd')
// add padding to header
headerpd.classList.toggle('body-pd')
})
}
}
showNavbar('header-toggle','nav-bar','body-pd','header')
/*===== LINK ACTIVE =====*/
const linkColor = document.querySelectorAll('.nav_link')
function colorLink(){
if(linkColor){
linkColor.forEach(l=> l.classList.remove('active'))
this.classList.add('active')
}
}
linkColor.forEach(l=> l.addEventListener('click', colorLink))
// Your code to run since DOM is loaded and ready
});
HTML:
<div class="header_toggle"> <i class="bx bx-menu" id="header-toggle"></i> </div>
<div class="l-navbar show" id="nav-bar">
<nav class="nav">
<div> <a href"="" shopuserproducts"="" class="nav_logo"> <img style="width: 30px;" src="/Images/favicon.svg"> <span class="nav_logo-name">ABC Test</span> </a>
<li>
<a href="#submenu1" data-bs-toggle="collapse" class="nav_link collapsed" aria-expanded="false"> <i class="bx bxs-car-mechanic"></i> <span class="nav_name">
Commercial Parts</span></a>
<ul class="nav-sub-cat flex-column ms-1 custom-scrollbar-js collapse" id="submenu1" data-bs-parent="#menu" style="">
<li class="w-100">
<span class="d-none d-sm-inline">Suspension</span>
</li>
<li>
<span class="d-none d-sm-inline">Braking</span>
</li>
<li>
<span class="d-none d-sm-inline">Filtration</span>
</li>
<li>
<span class="d-none d-sm-inline">Engine</span>
</li>
<li>
<span class="d-none d-sm-inline">Exhaust</span>
</li>
</ul>
</li>
<li>
<i class="bx bx-spray-can nav_icon"></i><span class="nav_name">Refinish</span>
<ul class="nav-sub-cat flex-column ms-1 custom-scrollbar-js collapse" id="submenu2" data-bs-parent="#menu" style="">
<li class="w-100">
<span class="d-none d-sm-inline">Spray Guns</span>
</li>
<li>
<span class="d-none d-sm-inline">Clearcoat Kits</span>
</li>
<li>
<span class="d-none d-sm-inline">Primers</span>
</li>
<li>
<span class="d-none d-sm-inline">Body Fillers</span>
</li>
<li>
<span class="d-none d-sm-inline">Panel Wipe</span>
</li>
<li>
<span class="d-none d-sm-inline">Tinters</span>
</li>
<li>
<span class="d-none d-sm-inline">Abrasives</span>
</li>
</ul>
</li>
<li>
<a href="#submenu3" data-bs-toggle="collapse" class="nav_link active" aria-expanded="true"> <i class="bx bxs-t-shirt"></i> <span class="nav_name">
PPE & Workwear</span></a>
<ul class="nav-sub-cat flex-column ms-1 custom-scrollbar-js collapse show" id="submenu3" data-bs-parent="#menu" style="">
<li class="w-100">
<span class="d-none d-sm-inline">T-Shirts & Polo's</span>
</li>
<li>
<span class="d-none d-sm-inline">Jackets</span>
</li>
<li>
<span class="d-none d-sm-inline">Hi-Visibility</span>
</li>
<li>
<span class="d-none d-sm-inline">Eye Protection</span>
</li>
<li>
<span class="d-none d-sm-inline">Headwear</span>
</li>
<li>
<span class="d-none d-sm-inline">Gloves</span>
</li>
</ul>
</li>
<hr style="color: white;">
<div class="nav_list">
<i class="bx bx-grid-alt nav_icon"></i> <span class="nav_name">Dashboard</span>
<i class="bx bx-shopping-bag nav_icon"></i> <span class="nav_name">Shop</span>
<i class="bx bx-cart"></i> <span class="nav_name">Cart</span>
<a href="/AccountManage" class="nav_link"> <i class="bx bx-user nav_icon"></i> <span class="nav_name">My
Account</span> </a>
</div>
<i class="bx bx-log-out nav_icon"></i> <span class="nav_name">SignOut</span>
</div></nav>
</div>

How to seperate Angular html and Script code

I have a angular frontend project, I have a dashboard component where I have an sidebar inside, but the code has its script tag and html in the same file. I would like to seperate them in order to have less code.
I tried including these scripts with path in my angular.json but it did not get recognized, and I did not know what else I could try. My html code looks like this, and I would like to seperate the Head tag and script tags.
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Responsive sidebar template with sliding effect and dropdown menu based on bootstrap 3">
<title>Sidebar template</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
crossorigin="anonymous">
<link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet">
</head>
<moniesta-client-navbar></moniesta-client-navbar>
<body>
<div class="page-wrapper chiller-theme toggled">
<a id="show-sidebar" class="btn btn-sm btn-dark" href="#">
<i class="fas fa-bars"></i>
</a>
<nav id="sidebar" class="sidebar-wrapper">
<div class="sidebar-content">
<div class="sidebar-brand">
pro sidebar
<div id="close-sidebar">
<i class="fas fa-times"></i>
</div>
</div>
<div class="sidebar-header">
<div class="user-pic">
<img class="img-responsive img-rounded" src="https://raw.githubusercontent.com/azouaoui-med/pro-sidebar-template/gh-pages/src/img/user.jpg"
alt="User picture">
</div>
<div class="user-info">
<span class="user-name">Jhon
<strong>Smith</strong>
</span>
<span class="user-role">Administrator</span>
<span class="user-status">
<i class="fa fa-circle"></i>
<span>Online</span>
</span>
</div>
</div>
<!-- sidebar-header -->
<div class="sidebar-search">
<div>
<div class="input-group">
<input type="text" class="form-control search-menu" placeholder="Search...">
<div class="input-group-append">
<span class="input-group-text">
<i class="fa fa-search" aria-hidden="true"></i>
</span>
</div>
</div>
</div>
</div>
<!-- sidebar-search -->
<div class="sidebar-menu">
<ul>
<li class="header-menu">
<span>General</span>
</li>
<li class="sidebar-dropdown">
<a href="#">
<i class="fa fa-tachometer-alt"></i>
<span>Dashboard</span>
<span class="badge badge-pill badge-warning">New</span>
</a>
<div class="sidebar-submenu">
<ul>
<li>
<a href="#">Dashboard 1
<span class="badge badge-pill badge-success">Pro</span>
</a>
</li>
<li>
Dashboard 2
</li>
<li>
Dashboard 3
</li>
</ul>
</div>
</li>
<li class="sidebar-dropdown">
<a href="#">
<i class="fa fa-shopping-cart"></i>
<span>E-commerce</span>
<span class="badge badge-pill badge-danger">3</span>
</a>
<div class="sidebar-submenu">
<ul>
<li>
<a href="#">Products
</a>
</li>
<li>
Orders
</li>
<li>
Credit cart
</li>
</ul>
</div>
</li>
<li class="sidebar-dropdown">
<a href="#">
<i class="far fa-gem"></i>
<span>Components</span>
</a>
<div class="sidebar-submenu">
<ul>
<li>
General
</li>
<li>
Panels
</li>
<li>
Tables
</li>
<li>
Icons
</li>
<li>
Forms
</li>
</ul>
</div>
</li>
<li class="sidebar-dropdown">
<a href="#">
<i class="fa fa-chart-line"></i>
<span>Charts</span>
</a>
<div class="sidebar-submenu">
<ul>
<li>
Pie chart
</li>
<li>
Line chart
</li>
<li>
Bar chart
</li>
<li>
Histogram
</li>
</ul>
</div>
</li>
<li class="sidebar-dropdown">
<a href="#">
<i class="fa fa-globe"></i>
<span>Maps</span>
</a>
<div class="sidebar-submenu">
<ul>
<li>
Google maps
</li>
<li>
Open street map
</li>
</ul>
</div>
</li>
<li class="header-menu">
<span>Extra</span>
</li>
<li>
<a href="#">
<i class="fa fa-book"></i>
<span>Documentation</span>
<span class="badge badge-pill badge-primary">Beta</span>
</a>
</li>
<li>
<a href="#">
<i class="fa fa-calendar"></i>
<span>Calendar</span>
</a>
</li>
<li>
<a href="#">
<i class="fa fa-folder"></i>
<span>Examples</span>
</a>
</li>
</ul>
</div>
<!-- sidebar-menu -->
</div>
<!-- sidebar-content -->
<div class="sidebar-footer">
<a href="#">
<i class="fa fa-bell"></i>
<span class="badge badge-pill badge-warning notification">3</span>
</a>
<a href="#">
<i class="fa fa-envelope"></i>
<span class="badge badge-pill badge-success notification">7</span>
</a>
<a href="#">
<i class="fa fa-cog"></i>
<span class="badge-sonar"></span>
</a>
<a href="#">
<i class="fa fa-power-off"></i>
</a>
</div>
</nav>
<footer class="text-center">
<div class="mb-2">
<small>
© 2020 made with <i class="fa fa-heart" style="color:red"></i> by - <a target="_blank" rel="noopener noreferrer" href="https://azouaoui.netlify.com">
Mohamed Azouaoui
</a>
</small>
</div>
<div>
<a href="https://github.com/azouaoui-med" target="_blank">
<img alt="GitHub followers" src="https://img.shields.io/github/followers/azouaoui-med?label=github&style=social" />
</a>
<a href="https://twitter.com/azouaoui_med" target="_blank">
<img alt="Twitter Follow" src="https://img.shields.io/twitter/follow/azouaoui_med?label=twitter&style=social" />
</a>
</div>
</footer>
<!-- sidebar-wrapper -->
<main class="page-content">
</main>
<!-- page-content" -->
</div>
<!-- page-wrapper -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin="anonymous"></script>
</body>
</html>

You need to install the packages.
Here you have the packages at your script.
npm i jquery
npm i bootstrap
npm i #fortawesome/angular-fontawesome
https://github.com/FortAwesome/angular-fontawesome
And do not forget to add the bootstrap & jquery at the angular.json
"styles": [
"src/styles.css",
"node_modules/bootstrap/dist/css/bootstrap.min.css"
],
"scripts": [
"node_modules/jquery/dist/jquery.min.js",
"node_modules/bootstrap/dist/js/bootstrap.min.js"
]
And I suggest you to separate your code in different components.
Thats you make your code more readable and you can faster fix a bug or find what you want.

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/*

Sidebar menu not working in Laravel+vue+adminlte

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')

jQuery: Toggle other dropdowns when any is toggled

I would like to know how I can make it so that when I have a dropdown opened and I open another one, it will close the one previously opened.
This is what I have so far:
$(document).ready(function(){
// Hide other drop downs when opening another
// $(".hideothers").hide();
// $(".show_hide_account").click(function(){
// $(".slidingDiv_account").slideToggle();
// });
// Account Drop down
$(".slidingDiv_account").hide();
$(".show_hide_account").show();
$(".hideothers").hide();
$(".show_hide_account").click(function(){
$(".slidingDiv_account").slideToggle();
});
// Work drop down
$(".slidingDiv_work").hide();
$(".show_hide_work").show();
$(".hideothers").hide();
$(".show_hide_work").click(function(){
$(".slidingDiv_work").slideToggle();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!--sidebar start-->
<aside>
<!-- Start of Toggle -->
<div id="sidebar" class="nav-collapse ">
<!-- sidebar menu start-->
<ul class="sidebar-menu" id="nav-accordion">
<p class="centered"><img src="assets/img/ui-sam.jpg" class="img-circle" width="60"></p>
<h5 class="centered">USER</h5>
<!-- Account Dropdown -->
<li>
<a class="show_hide_account">
<i class="fa fa-chevron-down"></i>
<span>Account</span>
</a>
</li>
<!-- Toggled Items -->
<ul class="sub slidingDiv_account hideothers" style="display: block;"> <!-- Start of toggle -->
<li>
<a href="/account">
<i class="fa fa-pencil"></i>
<span>Edit Account</span>
</a>
</li>
<li>
<a href="/users">
<i class="fa fa-pencil"></i>
<span>Find Users</span>
</a>
</li>
</ul> <!-- end of toggle -->
<!-- Work Dropdown -->
<li>
<a class="show_hide_work">
<i class="fa fa-suitcase"></i>
<span>Work</span>
</a>
</li>
<!-- Toggled Items -->
<ul class="sub slidingDiv_work hideothers" style="display: block;"> <!-- Start of toggle -->
<li>
<a href="/jobs">
<i class="fa fa-search"></i>
<span>Find a Job</span>
</a>
</li>
<li>
<a href="/startup">
<i class="fa fa-star"></i>
<span>Create a Startup</span>
</a>
</li>
</ul> <!-- end of toggle -->
<!-- <li class="mt">
<a href="index.html">
<i class="fa fa-users"></i>
<span>Friends</span>
</a>
</li> -->
</ul>
<!-- sidebar menu end-->
</div>
</aside>
<!--sidebar end -->
Refer to the snippet for a clearer idea. Click on account & work to see the dropdowns.
Thank you.

$(document).ready(function(){
function slideAllUp(obj)
{
$(".hideothers").each(function(){
if ($(this)[0] != obj[0])
{
$(this).slideUp(); //perform on all except self.
}
})
}
// Account Drop down
$(".slidingDiv_account").hide();
$(".show_hide_account").show();
$(".hideothers").hide();
$(".show_hide_account").click(function(){
slideAllUp($(".slidingDiv_account"));
$(".slidingDiv_account").slideToggle();
});
// Work drop down
$(".slidingDiv_work").hide();
$(".show_hide_work").show();
$(".hideothers").hide();
$(".show_hide_work").click(function(){
slideAllUp($(".slidingDiv_work"));
$(".slidingDiv_work").slideToggle();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!--sidebar start-->
<aside>
<!-- Start of Toggle -->
<div id="sidebar" class="nav-collapse ">
<!-- sidebar menu start-->
<ul class="sidebar-menu" id="nav-accordion">
<p class="centered"><img src="assets/img/ui-sam.jpg" class="img-circle" width="60"></p>
<h5 class="centered">USER</h5>
<!-- Account Dropdown -->
<li>
<a class="show_hide_account ">
<i class="fa fa-chevron-down"></i>
<span>Account</span>
</a>
</li>
<!-- Toggled Items -->
<ul class="sub slidingDiv_account hideothers" style="display: block;"> <!-- Start of toggle -->
<li>
<a href="/account">
<i class="fa fa-pencil"></i>
<span>Edit Account</span>
</a>
</li>
<li>
<a href="/users">
<i class="fa fa-pencil"></i>
<span>Find Users</span>
</a>
</li>
</ul> <!-- end of toggle -->
<!-- Work Dropdown -->
<li>
<a class="show_hide_work dropdown">
<i class="fa fa-suitcase"></i>
<span>Work</span>
</a>
</li>
<!-- Toggled Items -->
<ul class="sub slidingDiv_work hideothers" style="display: block;"> <!-- Start of toggle -->
<li>
<a href="/jobs">
<i class="fa fa-search"></i>
<span>Find a Job</span>
</a>
</li>
<li>
<a href="/startup">
<i class="fa fa-star"></i>
<span>Create a Startup</span>
</a>
</li>
</ul> <!-- end of toggle -->
<!-- <li class="mt">
<a href="index.html">
<i class="fa fa-users"></i>
<span>Friends</span>
</a>
</li> -->
</ul>
<!-- sidebar menu end-->
</div>
</aside>
<!--sidebar end -->
This edit introduces a function called slideAllUp. It passes over all ULs with the class .hideothers. When calling the slideAllUp you need to pass the ul that isn't supposed to go up. This way it closes all others and opens the one clicked upon. The exception is there to allow the menu to close again.