CSS
/********* navigation **********/
.nav-class {
width: 210px;
margin-left: 0px;
background: #1f4e77;
transition: all 0.3s;
padding: 46px 0 0 0;
z-index: 1035;
color: white;
display: flex;
flex-direction: column;
position: fixed !important;
top: 0;
height: 100vh !important;
margin: 0 !important;
outline: 0;
transform: translateX(0);
font-size: 0.75rem;
font-weight: 400;
}
.nav-class ul li {
padding: 6px 10px 6px 10px;
background: #1f4e77;
}
.nav-class > ul {
padding-left: 15px;
background: #1f4e77;
}
.nav-class ul a {
font-size: .75rem;
font-weight: 400;
padding: 6px 10px 6px 1px;
border-bottom: 0;
color: hsla(0,0%,100%,.8);
position: relative;
transition: all .3s ease-in-out;
width: 100%;
}
.navLvl1 {
position: relative;
}
.navLvl1:hover,
.navLvl2li:hover,
.navLvl2 li:hover,
.navLvl3 li:hover,
#sidebar ul.sidebarCollapse li a:hover {
background-color: #4599c3 !important;
}
.navLvl2 {
border-left: 1px groove gray;
border-bottom:1px solid gray;
display: none;
position: absolute;
top: 0;
margin-left: 185px;
width: 200px;
z-index: 1;
}
.navLvl3 {
border-left: 1px groove gray;
border-bottom:1px solid gray;
display: none;
position: absolute;
top: 0;
margin-left: 185px;
width: 200px;
z-index: 2;
}
.navLvl2 ul,
.navLvl2 ul {
margin: 0;
padding: 0;
}
.navLvl1:hover .navLvl2 {
display: block;
}
.b-sidebar > .b-sidebar-body {
overflow-y: initial !important;
}
.navLvl2 ul li,
.navLvl3 ul li {
list-style-type: none;
}
.navLvl2 ul li:hover,
.navLvl3 ul li,
.nav-class ul li {
list-style-type: none;
}
.navLvl2li {
position: relative;
}
.navLvl2li:hover .navLvl3 {
display: block;
}
HTML
<div
class="nav-class"
v-bind:style="[
this.navShowHide ? { display: 'block' } : { display: 'none' },
]"
>
<!-- v-bind:style="[
navShowHide
? { width: '230px', transition: 'all .3s ease-out' }
: { width: '0px', transition: 'all .3s ease-out' },
]" -->
<ul>
<li class="navLvl1">
<a>Test Parent </a>
<b-icon
class="navchild"
icon="chevron-right"
style="color: #fff"
></b-icon>
<div class="navLvl2">
<ul>
<li class="navLvl2li">
<a href="#" target="_blank">Test child 1 </a>
<b-icon
class="navchild"
icon="chevron-right"
style="color: #fff"
></b-icon>
<div class="navLvl3">
<ul>
<li>
<a href="#" target="_blank">Test last 1-1</a>
</li>
<li>
<router-link to="leadindicate">Data Mgr</router-link>
</li>
<li>
<a href="#" target="_blank">Test last 1-2</a>
</li>
<li>
<a href="#" target="_blank">Test last 1-3</a>
</li>
</ul>
</div>
</li>
<li class="navLvl2li">
<a target="_blank">Test child 2</a>
<b-icon
class="navchild"
icon="chevron-right"
style="color: #fff"
></b-icon>
<div class="navLvl3">
<ul>
<li>
<a href="#" target="_blank">Test last 2-1</a>
</li>
<li>
<a href="#" target="_blank">Test last 2-2</a>
</li>
<li>
<a href="#" target="_blank">Test last 2-3</a>
</li>
</ul>
</div>
</li>
<li class="navLvl2li">
<a target="_blank">Test child 3</a>
</li>
</ul>
</div>
</li>
</ul>
</div>
Dynamic
<div class="row">
<!--<b-sidebar
id="sidebar-1"
title="Sidebar"
no-header
shadow
>
<!- - Sidebar start - ->
<nav id="sidebar" v-bind:style="[
navShowHide
? { width: '210px', transition: 'all .3s ease-out' }
: { width: '0px', transition: 'all .3s ease-out' },
]">
<ul class="sidebarCollapse" id="sidebarLinks">
<li
id="jhas"
v-show="getNavsAMs.length > 0"
style="position: absolute"
>
<a
class="collapsed"
data-toggle="collapse"
data-target="#collapseAMs"
aria-expanded="false"
>
<img src="./assets/images/create-jha1.svg" class="icon" alt />
Action Messages
</a>
<ul
class="collapse list-unstyled"
id="collapseAMs"
aria-labelledby="jhas"
data-parent="#sidebarLinks"
>
<li v-for="nav in getNavsAMs" :key="nav.PageName">
<router-link
:to="{ path: nav.PageName }"
v-if="nav.IsNewTab != 'True'"
>{{ nav.PageTitle }}</router-link
>
<a :href="nav.PageName" target="_blank" v-else>{{
nav.PageTitle
}}</a>
</li>
</ul>
</li>
<li id="jhasPlans" v-show="getNavsInvInv.length > 0">
<a
class="collapsed"
data-toggle="collapse"
data-target="#collapseJhasPlans"
aria-expanded="false"
>
<img src="./assets/images/create-jha1.svg" class="icon" alt />
Inventory Investment
</a>
<ul
class="collapse list-unstyled"
id="collapseJhasPlans"
aria-labelledby="jhasPlans"
data-parent="#sidebarLinks"
>
<li v-for="nav in getNavsInvInv" :key="nav.PageName">
<router-link
:to="{ path: nav.PageName }"
v-if="nav.IsNewTab != 'True'"
>{{ nav.PageTitle }}</router-link
>
<a :href="nav.PageName" target="_blank" v-else>{{
nav.PageTitle
}}</a>
</li>
</ul>
</li>
<li id="navDE" v-show="getNavsDataEntry.length > 0">
<a
class="collapsed"
data-toggle="collapse"
data-target="#collapseNavDE"
aria-expanded="false"
>
<img src="./assets/images/create-jha1.svg" class="icon" alt />
Data Entry
</a>
<ul
class="collapse list-unstyled"
id="collapseNavDE"
aria-labelledby="navDE"
data-parent="#sidebarLinks"
>
<li v-for="nav in getNavsDataEntry" :key="nav.PageName">
<router-link
:to="{ path: nav.PageName }"
v-if="nav.IsNewTab != 'True'"
>{{ nav.PageTitle }}</router-link
>
<a :href="nav.PageName" target="_blank" v-else>{{
nav.PageTitle
}}</a>
</li>
</ul>
</li>
<li id="navEODta" v-show="getNavsEOData.length > 0">
<a
class="collapsed"
data-toggle="collapse"
data-target="#collapseNavEODta"
aria-expanded="false"
>
<img src="./assets/images/create-jha1.svg" class="icon" alt />
EO Data Input
</a>
<ul
class="collapse list-unstyled"
id="collapseNavEODta"
aria-labelledby="navEODta"
data-parent="#sidebarLinks"
>
<li v-for="nav in getNavsEOData" :key="nav.PageName">
<router-link
:to="{ path: nav.PageName }"
v-if="nav.IsNewTab != 'True'"
>{{ nav.PageTitle }}</router-link
>
<a :href="nav.PageName" target="_blank" v-else>{{
nav.PageTitle
}}</a>
</li>
</ul>
</li>
<li id="navMatCmnt" v-show="getNavsMatCmnt.length > 0">
<a
class="collapsed"
data-toggle="collapse"
data-target="#collapseNavMatCmnt"
aria-expanded="false"
>
<img src="./assets/images/create-jha1.svg" class="icon" alt />
Material Comments
</a>
<ul
class="collapse list-unstyled"
id="collapseNavMatCmnt"
aria-labelledby="navMatCmnt"
data-parent="#sidebarLinks"
>
<li v-for="nav in getNavsMatCmnt" :key="nav.PageName">
<router-link
:to="{ path: nav.PageName }"
v-if="nav.IsNewTab != 'True'"
>{{ nav.PageTitle }}</router-link
>
<a :href="nav.PageName" target="_blank" v-else>{{
nav.PageTitle
}}</a>
</li>
</ul>
</li>
<li id="navECOWB" v-show="getNavsECOWB.length > 0">
<a
class="collapsed"
data-toggle="collapse"
data-target="#collapseNavECOWB"
aria-expanded="false"
>
<img src="./assets/images/create-jha1.svg" class="icon" alt />
ECO Workbench
</a>
<ul
class="collapse list-unstyled"
id="collapseNavECOWB"
aria-labelledby="navECOWB"
data-parent="#sidebarLinks"
>
<li v-for="nav in getNavsECOWB" :key="nav.PageName">
<router-link
:to="{ path: nav.PageName }"
v-if="nav.IsNewTab != 'True'"
>{{ nav.PageTitle }}</router-link
>
<a :href="nav.PageName" target="_blank" v-else>{{
nav.PageTitle
}}</a>
</li>
</ul>
</li>
<li id="navTKM2" v-show="getNavsTkm2.length > 0">
<a
class="collapsed"
data-toggle="collapse"
data-target="#collapseNavTKM2"
aria-expanded="false"
>
<img src="./assets/images/create-jha1.svg" class="icon" alt />
TKM 2.0
</a>
<ul
class="collapse list-unstyled"
id="collapseNavTKM2"
aria-labelledby="navTKM2"
data-parent="#sidebarLinks"
>
<li v-for="nav in getNavsTkm2" :key="nav.PageName">
<router-link
:to="{ path: nav.PageName }"
v-if="nav.IsNewTab != 'True'"
>{{ nav.PageTitle }}</router-link
>
<a :href="nav.PageName" target="_blank" v-else>{{
nav.PageTitle
}}</a>
</li>
</ul>
</li>
<li id="navPAT" v-show="getNavsPatConfig.length > 0">
<a
class="collapsed"
data-toggle="collapse"
data-target="#collapseNavPAT"
aria-expanded="false"
>
<img src="./assets/images/create-jha1.svg" class="icon" alt />
Predictive Analytics Tool
</a>
<ul
class="collapse list-unstyled"
id="collapseNavPAT"
aria-labelledby="navPAT"
data-parent="#sidebarLinks"
>
<li v-for="nav in getNavsPatConfig" :key="nav.PageName">
<router-link
:to="{ path: nav.PageName }"
v-if="nav.IsNewTab != 'True'"
>{{ nav.PageTitle }}</router-link
>
<a :href="nav.PageName" target="_blank" v-else>{{
nav.PageTitle
}}</a>
</li>
</ul>
</li>
<li id="nav3" v-show="getNavsDmdMgmt.length > 0">
<a
class="collapsed"
data-toggle="collapse"
data-target="#collapseNav4"
aria-expanded="false"
>
<img src="./assets/images/create-jha1.svg" class="icon" alt />
Demand Management
</a>
<ul
class="collapse list-unstyled"
id="collapseNav4"
aria-labelledby="nav4"
data-parent="#sidebarLinks"
>
<li v-for="nav in getNavsDmdMgmt" :key="nav.PageName">
<router-link
:to="{ path: nav.PageName }"
v-if="nav.IsNewTab != 'True'"
>{{ nav.PageTitle }}</router-link
>
<a :href="nav.PageName" target="_blank" v-else>{{
nav.PageTitle
}}</a>
</li>
</ul>
</li>
<li
id="adminstration"
v-show="getNavsAdmin.length > 0"
class="navLvl1"
>
<a
class="collapsed"
data-toggle="collapse"
data-target="#collapseIiConf"
aria-expanded="false"
>
<img
src="./assets/images/settings.svg"
class="icon"
alt
/>Admin
</a>
<ul
class="collapse list-unstyled"
id="collapseIiConf"
aria-labelledby="gisHelp"
data-parent="#sidebarLinks"
>
<li v-for="nav in getNavsAdmin" :key="nav.PageName">
<router-link
:to="{ path: nav.PageName }"
v-if="nav.IsNewTab != 'True'"
>{{ nav.PageTitle }}</router-link
>
<a :href="nav.PageName" target="_blank" v-else>{{
nav.PageTitle
}}</a>
</li>
</ul>
<div class="navLvl2">
<ul>
<li
v-for="(nav, index) in getNavsAdmin"
:key="nav.PageName"
class="navLvl2li"
>
<router-link
:to="{ path: nav.PageName }"
v-if="nav.IsNewTab != 'True'"
>{{ nav.PageTitle }}</router-link
>
<a :href="nav.PageName" target="_blank" v-else>{{
nav.PageTitle
}}</a>
<div class="navLvl3">
<ul>
<li>
<a href="#">{{ nav.PageTitle + ":" + index }}</a>
</li>
</ul>
</div>
</li>
</ul>
</div>
</li>
<li class="navLvl1">
<a
class="collapsed"
data-toggle="collapse"
data-target="#collapseIiConf"
aria-expanded="false"
>
<img
src="./assets/images/settings.svg"
class="icon"
alt
/>Test Parent
</a>
<div class="navLvl2">
<ul>
<li class="navLvl2li">
<a href="#" target="_blank"
>Test child 1
<img
class="navchild"
src="./assets/images/arrow-right.svg"
/>
</a>
<div class="navLvl3">
<ul>
<li>
<a href="#" target="_blank">Test last 1-1</a>
</li>
<li>
<router-link to="leadindicate"
>Data Mgr</router-link
>
</li>
<li>
<a href="#" target="_blank">Test last 1-2</a>
</li>
<li>
<a href="#" target="_blank">Test last 1-3</a>
</li>
</ul>
</div>
</li>
<li class="navLvl2li">
<a href="#" target="_blank">Test child 2</a>
<div class="navLvl3">
<ul>
<li>
<a href="#" target="_blank">Test last 2-1</a>
</li>
<li>
<a href="#" target="_blank">Test last 2-2</a>
</li>
<li>
<a href="#" target="_blank">Test last 2-3</a>
</li>
</ul>
</div>
</li>
</ul>
</div>
</li>
<li id="help">
<router-link to="/jira">
<img
src="./assets/images/question.svg"
class="icon"
alt
/>Help</router-link
>
</li>
</ul>
</nav>
<!- - Sidebar end - ->
</b-sidebar>-->
<div
class="nav-class"
v-bind:style="[
this.navShowHide ? { display: 'block' } : { display: 'none' },
]"
>
<!-- v-bind:style="[
navShowHide
? { width: '230px', transition: 'all .3s ease-out' }
: { width: '0px', transition: 'all .3s ease-out' },
]" -->
<ul>
<li v-for="nav in navLevel1List" :key="nav.ID" class="navLvl1">
<router-link
:to="{ path: nav.PageName }"
v-if="nav.IsNewTab != 'True'"
>{{ nav.PageTitle }}</router-link
>
<a :href="nav.PageName" target="_blank" v-else>{{
nav.PageTitle
}}</a>
<b-icon
class="navchild"
icon="chevron-right"
style="color: #fff"
v-if="navLevel2List(nav.ID).length > 0"
></b-icon>
<div class="navLvl2" v-if="navLevel2List(nav.ID).length > 0">
<ul>
<li
v-for="navL2 in navLevel2List(nav.ID)"
:key="navL2.ID"
class="navLvl2li"
>
<router-link
:to="{ path: navL2.PageName }"
v-if="navL2.IsNewTab != 'True'"
>{{ navL2.PageTitle }}</router-link
>
<a :href="navL2.PageName" target="_blank" v-else>{{
navL2.PageTitle
}}</a>
<b-icon
class="navchild"
icon="chevron-right"
style="color: #fff"
v-if="navLevel2List(navL2.ID).length > 0"
>
</b-icon>
<div
class="navLvl3"
v-if="navLevel2List(navL2.ID).length > 0"
>
<ul>
<li
v-for="navL3 in navLevel2List(navL2.ID)"
:key="navL3.ID"
>
<router-link
:to="{ path: navL3.PageName }"
v-if="navL3.IsNewTab != 'True'"
>{{ navL3.PageTitle }}</router-link
>
<a :href="navL3.PageName" target="_blank" v-else>{{
navL3.PageTitle
}}</a>
</li>
</ul>
</div>
</li>
</ul>
</div>
</li>
No comments:
Post a Comment