SideNav2 - active highlight


Topic: SideNav2 - active highlight

yourpatrol 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 premium 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 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 premium 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 answered 4 years ago

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;


yourpatrol answered 4 years ago

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; }


yourpatrol answered 4 years ago

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


Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Answered

Specification of the issue
  • User: 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
Tags