SideNav2 - active highlight

router/index.js

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

Vue.use(VueRouter);

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;

---

App.vue:

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

  <mdb-navbar
    slot="nav"
    tag="div"
    position="top"
    color="YPTopNavBar"
    class=""
    light
    :toggler="false"
    :style="{ zIndex: '1061' }"
  >
    <mdb-navbar-nav left>

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

    <mdb-nav-item
        href="https://www.yourpatrol.co.uk"
        waves-fixed
        icon="" >
        <img src="../src/assets/logofull.png" style="height: 40px" class="img-fluid"/>
      </mdb-nav-item>

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

       <mdb-dropdown tag="li" class="nav-item avatar topbar-menu-btn" anchorClass="p-0">
            <mdb-dropdown-toggle
              tag="a"
              navLink
              color="stylish"
              slot="toggle"
              waves-fixed
            >
            <mdb-icon fas icon="user" class="YPFontColor" />

            </mdb-dropdown-toggle>
          <mdb-dropdown-menu color="primary">
            <mdb-dropdown-item>Profile</mdb-dropdown-item>
            <mdb-dropdown-item>Actions</mdb-dropdown-item>
            <mdb-dropdown-item>Logout</mdb-dropdown-item>
          </mdb-dropdown-menu>
      </mdb-dropdown>

    </mdb-navbar-nav>
  </mdb-navbar>

  <div style="height: 100vh" slot="main">
    <div style="padding-top: 6vh; height: 100%">
      <div class="container">
         <transition name="fade" mode="out-in">
          <router-view></router-view>
        </transition>
      </div>
    </div>
  </div>
</mdb-side-nav-2>

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('//fonts.googleapis.com/css?family=Poppins:300,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; }

---

Screenshot:

https://snipboard.io/1bm26o.jpg

Once i have clicked a link:

https://snipboard.io/2vujgF.jpg

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

https://snipboard.io/Pzh64D.jpg

---