Topic: SideNav2 - active highlight

yourpatrol free asked 4 years ago

When the page loads to have the correct item in my side nav to be highlighted or active. From what i can tell the mdb code checks the url path for the to: link against the url in the history to determine which section is the active one.

Everything works apart from the active highlight. The menu builds correctly by setting the data with json and the links themselves route through to the correct page. When i click a new section it temporarily highlights it as active until i click in the main container of the page outside of the side nav.

I will post my code next separately ...

Magdalena Dembna staff commented 4 years ago

I have recreated your issue and created a task to fix this bug in one of the future releases. Best regards, Magdalena

yourpatrol free commented 4 years ago

OK, thanks.

Do you think this is a recent issue introduced? What i am trying to determine is if an earlier version doesn't have this issue?

Magdalena Dembna staff commented 4 years ago

I don't think it was - this component was released quite recently and wasn't changed much since then. Its precursor, SideNav (without 2) may have behaved differently, but its general behaviour differs as well.

yourpatrol free answered 4 years ago


Once i have clicked a link:

When i then click into the middle of the main white area of the UI:

yourpatrol free answered 4 years ago


  <div slot="header" class="mt-5">

    :style="{ zIndex: '1061' }"
    <mdb-navbar-nav left>

        @click.native="show = !show"
          <mdb-icon fas icon="bars" class="fa-2x YPFontColor" />

        icon="" >
        <img src="../src/assets/logofull.png" style="height: 40px" class="img-fluid"/>

    <mdb-navbar-nav class="nav-flex-icons" right>

       <mdb-dropdown tag="li" class="nav-item avatar topbar-menu-btn" anchorClass="p-0">
            <mdb-icon fas icon="user" class="YPFontColor" />

          <mdb-dropdown-menu color="primary">


  <div style="height: 100vh" slot="main">
    <div style="padding-top: 6vh; height: 100%">
      <div class="container">
         <transition name="fade" mode="out-in">

import { mdbNavbar, mdbNavItem, mdbNavbarNav, mdbSideNav2, //mdbBtn, //mdbNavbarBrand, mdbDropdown, mdbDropdownItem, mdbDropdownMenu, mdbDropdownToggle, mdbIcon, waves, mdbResize } from "mdbvue"; //import { yphqSideNav } from './components/navigation/sidenav.vue' //import { yphqSideNavCat } from './components/navigation/sidenavcat.vue' export default { name: "app", components: { mdbNavbar, mdbNavItem, //mdbNavbarBrand, mdbDropdown, mdbDropdownItem, mdbDropdownMenu, mdbDropdownToggle, mdbNavbarNav, //yphqSideNav, yphqSideNavCat, mdbSideNav2, //mdbBtn, mdbIcon }, data() { return { show: true, over: false, navigation: [ { name: "Dashboard", icon: "chart-bar", to: "/general/dashboard" }, { name: "Call Centre", icon: "headset", to: "/cta/dashboard" }, { name: "Patrols", icon: "shield-alt", to: "/patrol/dashboard" }, { name: "Tasks", icon: "tasks", to: "/staff/eventmanager" }, { name: "Settings", icon: "cog", to: "/system/dashboard" } ] }; }, methods: { checkWidth() { this.over = window.innerWidth

@import url('//,400,500,600,700');

.topbar-menu-btn{ line-height:50px; text-align:center; font-size:24px; padding:13px; margin-top:-13; color:rgba(55,125,255,1); background-color: white; min-width:50px; height:50px; border-radius:25px; vertical-align:middle; transition: all .6s ease-in-out; border-bottom: 3px solid rgba(55,125,255,0.25); margin-left:10px; } .topbar-menu-btn:hover{ box-shadow: 0 0 10px rgba(55,125,255,.5); }

.navbar { z-index: 1040; height: 6vh; }

.fade-enter-active, .fade-leave-active { transition-duration: 0.3s; transition-property: opacity; transition-timing-function: ease-out; }

.fade-enter, .fade-leave-active { opacity: 0; }

.view { height: 100%;

} .navbar i { cursor: pointer; color: white; }

/* Override MDB */ .fixed-sn .double-nav, .fixed-sn main, .fixed-sn footer { padding-left: 10rem !important; }

.mdbvue-sidenav { background-color:rgb(19,99,159) !important; border-right: 3px solid rgb(8,116,189); transition: background-color 0.5s ease; }

.mdbvue-sidenav li { font-size: 24px; color: white !important; padding-top: 10px; padding-bottom: 10px; }

.mdbvue-sidenav span { margin-left: auto; margin-right: auto; }

.mdbvue-sidenav:hover { background-color:rgb(8,116,189) !important; border-right: 3px solid rgb(19,99,159) !important; }

/* Override MDB */

.YPTopNavBar { background-color: white !important; padding-top: 6px !important; padding-bottom: 6px !important; padding-left: .5rem 1rem; } .YPBGColor { background-color:Rgb(8, 116, 189) !important; }

.YPFontColor { color: Rgb(8, 116, 189) !important; }

yourpatrol free answered 4 years ago


import Vue from "vue"; import VueRouter from "vue-router"; //import Home from "../views/general/Dashboard.vue";


const routes = [ /*{ path: "/", name: "root", component: () => import("../views/general/dashboard.vue") }, */ { path: "/general/dashboard", name: "home", component: () => import("../views/general/dashboard.vue") }, { path: "/cta/dashboard", name: "ctadashboard", component: () => import("../views/cta/dashboard.vue") }, { path: "/patrol/dashboard", name: "patroldashboard", component: () => import("../views/patrol/dashboard.vue") }, { path: "/system/dashboard", name: "systemdashboard", component: () => import("../views/system/dashboard.vue") }, { path: "/system/lookups", name: "lookups", component: () => import("../views/system/lookups.vue") }, { path: "/staff/eventmanager", name: "eventmanager", component: () => import("../views/staff/eventmanager.vue") } ];

const router = new VueRouter({ scrollBehavior() { return { x: 0, y: 0 } }, mode: "history", base: process.env.BASE_URL, routes: routes });

export default router;

Please insert min. 20 characters.


Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.



Specification of the issue

  • ForumUser: Free
  • Premium support: No
  • Technology: MDB Vue
  • MDB Version: 6.7.1
  • Device: PC
  • Browser: Chrome latest
  • OS: Windows 10 latest
  • Provided sample code: No
  • Provided link: No