This commit is contained in:
2019-12-17 00:01:44 +00:00
parent 7f1e25bcae
commit 026c0285de
2 changed files with 189 additions and 176 deletions

View File

@@ -9,85 +9,98 @@
app
width="300"
>
<v-card class="mx-auto" width="300">
<v-list dense>
<template v-for="item in navItems">
<!-- TOP LEVEL can be holders or actions -->
<!-- <v-card class="mx-auto" width="300"> -->
<v-list dense>
<template v-for="item in navItems">
<!-- TOP LEVEL can be holders or actions -->
<!-- TOP LEVEL HOLDER -->
<template v-if="!item.route">
<v-list-group
:prepend-icon="'fa-' + item.icon"
value="true"
:key="item.key"
>
<template v-slot:activator>
<!--group activator -->
<v-list-item-title>{{ item.title }}</v-list-item-title>
</template>
<!-- TOP LEVEL HOLDER SUBITEMS -->
<!-- TOP LEVEL HOLDER -->
<template v-if="!item.route">
<v-list-group
:prepend-icon="'fa-' + item.icon"
value="true"
:key="item.key"
>
<template v-slot:activator>
<!--group activator -->
<v-list-item-title>{{ item.title }}</v-list-item-title>
</template>
<!-- TOP LEVEL HOLDER SUBITEMS -->
<template v-for="subitem in item.navItems">
<template v-if="!subitem.route">
<!-- SECOND LEVEL HOLDER -->
<div class="pl-2" :key="subitem.key">
<v-list-group
no-action
sub-group
value="true"
:key="subitem.key"
>
<!-- Second level activator -->
<template v-slot:activator>
<v-list-item-content>
<v-list-item-title>{{
subitem.title
}}</v-list-item-title>
</v-list-item-content>
</template>
<v-list-item
v-for="subsub in subitem.navItems"
:key="subsub.key"
:to="subsub.route"
link
>
<v-list-item-title
v-text="subsub.title"
></v-list-item-title>
<v-list-item-icon>
<v-icon>{{ "fa-" + subsub.icon }}</v-icon>
</v-list-item-icon>
</v-list-item>
<!-- was end of v-list-group here -->
</v-list-group>
</div>
</template>
<template v-else>
<!-- SECOND LEVEL ACTION -->
<div class="pl-3" :key="subitem.key">
<v-list-item :to="subitem.route">
<v-list-item-action>
<v-icon>{{ "fa-" + subitem.icon }}</v-icon>
</v-list-item-action>
<template v-for="subitem in item.navItems">
<template v-if="!subitem.route">
<!-- SECOND LEVEL HOLDER -->
<div class="pl-2" :key="subitem.key">
<v-list-group
no-action
sub-group
value="false"
:key="subitem.key"
>
<!-- Second level activator -->
<template v-slot:activator>
<v-list-item-content>
<v-list-item-title>{{
subitem.title
}}</v-list-item-title>
</v-list-item-content>
</v-list-item>
</div>
</template>
</template>
</v-list-group>
<!-- END OF TOP LEVEL HOLDER -->
</template>
</template>
<!-- TOP LEVEL ACTION -->
<template v-else> </template>
<v-list-item
v-for="subsub in subitem.navItems"
:key="subsub.key"
:to="subsub.route"
link
>
<v-list-item-title
v-text="subsub.title"
></v-list-item-title>
<v-list-item-icon>
<v-icon>{{ "fa-" + subsub.icon }}</v-icon>
</v-list-item-icon>
</v-list-item>
<!-- was end of v-list-group here -->
</v-list-group>
</div>
</template>
<template v-else>
<!-- SECOND LEVEL ACTION -->
<div class="pl-3" :key="subitem.key">
<v-list-item :to="subitem.route">
<v-list-item-action>
<v-icon>{{ "fa-" + subitem.icon }}</v-icon>
</v-list-item-action>
<v-list-item-content>
<v-list-item-title>{{
subitem.title
}}</v-list-item-title>
</v-list-item-content>
</v-list-item>
</div>
</template>
</template>
</v-list-group>
<!-- END OF TOP LEVEL HOLDER -->
</template>
<!-- <v-list-item
<!-- TOP LEVEL ACTION -->
<template v-else>
<div class="pl-3" :key="item.key">
<v-list-item :to="item.route">
<v-list-item-action>
<v-icon>{{ "fa-" + item.icon }}</v-icon>
</v-list-item-action>
<v-list-item-content>
<v-list-item-title>{{ item.title }}</v-list-item-title>
</v-list-item-content>
</v-list-item>
</div>
</template>
<!-- end of entire list -->
</template>
<!-- <v-list-item
v-for="item in navItems"
:key="item.route"
:to="item.route"
@@ -99,8 +112,8 @@
<v-list-item-title>{{ item.title }}</v-list-item-title>
</v-list-item-content>
</v-list-item> -->
</v-list>
</v-card>
</v-list>
<!-- </v-card> -->
</v-navigation-drawer>
<v-app-bar
v-if="isAuthenticated"