Level 4
Check the vue router docs https://router.vuejs.org/api/#active-class
Nov 27, 2019
1
Level 3
Showing active in parent and child menu on a drop down side menu on Bootstrap (AdminLTE 3)
I want to highlight the active page on the side bar menu. I am using Bootstrap (AdminLTE 3) with laravel and vuejs.Kindly anyone help out. Below is the side bar menu.
Code in Master.balade.php is :
<!DOCTYPE html>
<!--
This is a starter template page. Use this page to start your new project from
scratch. This page gets rid of all links and provides the needed markup only.
-->
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>Baron Admin-CMS</title>
<!-- Font Awesome Icons -->
{{-- <link rel="stylesheet" href="plugins/fontawesome-free/css/all.min.css">
<!-- Theme style -->
<link rel="stylesheet" href="dist/css/adminlte.min.css"> --}}
<link rel="stylesheet" href="/css/app.css">
<!-- Google Font: Source Sans Pro -->
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700" rel="stylesheet">
{{-- <link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
<script src="https://code.iconify.design/1/1.0.3/iconify.min.js"></script> --}}
{{-- <script type="text/javascript" src="node_modules/vuejs/dist/vue.min.js"></script>
<script type="text/javascript" src="node_modules/vue-simple-search-dropdown/dist/vue-simple-search-dropdown.min.js"></script>
<script type="text/javascript">
Vue.use(Dropdown);
</script> --}}
</head>
<body class="hold-transition sidebar-mini">
<div class="wrapper" id="app">
<!-- Navbar -->
<nav class="main-header navbar navbar-expand navbar-white navbar-light">
<!-- Left navbar links -->
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" data-widget="pushmenu" href="#"><i class="fas fa-bars"></i></a>
{{-- <a class="nav-link" href="#"><i class="fas fa-bars"></i></a> --}}
</li>
</ul>
</nav>
<!-- /.navbar -->
<!-- Main Sidebar Container -->
<aside class="main-sidebar sidebar-dark-primary elevation-4">
<!-- Brand Logo -->
<a href="index3.html" class="brand-link">
<img src="/img/logo.png" alt="AdminLTE Logo" class="brand-image img-circle elevation-3"
style="opacity: .8">
<span class="brand-text font-weight-light">Baron Admin-CMS</span>
</a>
<!-- 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="/img/profile/{{Auth::user()->photo}}" class="img-circle elevation-2" alt="User Image">
</div>
<div class="info">
<a href="#" class="d-block">{{Auth::user()->name}} : ({{Auth::user()->type}})</a>
<!-- <a href="#" class="d-block"><p style="color:white;">User Type : {{Auth::user()->type}}</p></a> -->
</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">
<router-link to="/dashboard" class="nav-link">
<i class="nav-icon fas fa-th cyan"></i>
<p>
Dashboard
</p>
</a>
</li>
<li class="nav-item has-treeview ">
<a href="#" class="nav-link ">
<i class="nav-icon fas fa-building green"></i>
<p>
Company
<i class="right fas fa-angle-left"></i>
</p>
</a>
<ul class="nav nav-treeview">
<li class="nav-item">
<router-link to="/company" class="nav-link" >
<i class="nav-icon fas fa-building "></i>
<p>
Add-Companies
</p>
</a>
</li>
</ul>
</li>
<li class="nav-item has-treeview ">
<a href="#" class="nav-link ">
<i class="nav-icon fas fa-users purple"></i>
<p>
Employees
<i class="right fas fa-angle-left"></i>
</p>
</a>
<ul class="nav nav-treeview">
<li class="nav-item">
<router-link to="/employee" class="nav-link" >
<i class="nav-icon fas fa-user-plus "></i>
<p>
Add-Employee
</p>
</a>
</li>
<li class="nav-item">
<router-link to="/expiredemployee" class="nav-link">
<i class="nav-icon fas fa-user "></i>
<p>
Expired-Employees
</p>
</a>
</li>
</ul>
</li>
<li class="nav-item has-treeview ">
<a href="#" class="nav-link ">
<i class="nav-icon fas fa-language pink"></i>
<p>
Nationality
<i class="right fas fa-angle-left"></i>
</p>
</a>
<ul class="nav nav-treeview">
<li class="nav-item">
<router-link to="/nationality" class="nav-link">
<i class="nav-icon fas fa-language "></i>
<p>
Add-Nationality
</p>
</a>
</li>
</ul>
</li>
</li>
@can('isAdmin')
<li class="nav-item has-treeview ">
<a href="#" class="nav-link ">
<i class="nav-icon fas fa-user-secret blue"></i>
<p>
Admin Section
<i class="right fas fa-angle-left"></i>
</p>
</a>
<ul class="nav nav-treeview">
<li class="nav-item">
<router-link to="/user" class="nav-link" >
<i class="nav-icon fas fa-users " ></i>
<p>
Users
</p>
</a>
<li >
<router-link to="/developer" class="nav-link">
<i class="nav-icon fas fa-cogs"></i>
<p>Developer</p>
</a>
</li>
</ul>
</li>
</li>
@endcan
<li class="nav-item">
<router-link to="/profile" class="nav-link">
<i class="nav-icon fas fa-user orange"></i>
<p>
Profile
{{-- <span class="right badge badge-danger">New</span> --}}
</p>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{{ route('logout') }}"
onclick="event.preventDefault();
document.getElementById('logout-form').submit();">
<i class="nav-icon fas fa-power-off red"></i>
<p>
{{ __('Logout') }}
</p>
</a>
<form id="logout-form" action="{{ route('logout') }}" method="POST" style="display: none;">
@csrf
</form>
</li>
</ul>
</nav>
<!-- /.sidebar-menu -->
</div>
<!-- /.sidebar -->
</aside>
<!-- Content Wrapper. Contains page content -->
<div class="content-wrapper">
<!-- Main content -->
<div class="content">
<div class="container-fluid">
<router-view></router-view>
<vue-progress-bar></vue-progress-bar>
{{-- <chart-component></chart-component> --}}
{{-- <grafica-component></grafica-component> --}}
{{-- <vuejs-loading-pluginr></vuejs-loading-plugin> --}}
{{-- starging modal --}}
{{-- ending modal --}}
<!-- /.row -->
</div><!-- /.container-fluid -->
</div>
<!-- /.content -->
</div>
<!-- /.content-wrapper -->
<!-- Control Sidebar -->
<aside class="control-sidebar control-sidebar-dark">
<!-- Control sidebar content goes here -->
<div class="p-3">
<h5>Title</h5>
<p>Sidebar content</p>
</div>
</aside>
</div>
I tried with this javascript code but ends up opening all the dropdowns. All the same, it does highlight the current item. But I would want the other items remain closed and only active remains open.
@auth
<script>
window.user = @json(auth()->user())
</script>
@endauth
<script src="/js/app.js"></script>
<script>
/** add active class and stay opened when selected */
var url = window.location;
const allLinks = document.querySelectorAll('.nav-item a');
const currentLink = [...allLinks].filter(e => {
return e.href == url;
});
currentLink[0].classList.add("active")
currentLink[0].closest(".nav-treeview").style.display="block";
currentLink[0].closest(".has-treeview").classList.add("active");
</script>
</body>
</html>
Please or to participate in this conversation.