Primo Committ
This commit is contained in:
paolo
125
src/components/layout/drawer/drawer.vue
Normal file
125
src/components/layout/drawer/drawer.vue
Normal file
@@ -0,0 +1,125 @@
|
||||
<template>
|
||||
<q-drawer ref="leftDrawer" v-show="getLayoutNeeded">
|
||||
<div id="profile">
|
||||
<img :src="photo" style='height: 80px' class="inline-block">
|
||||
<!--img src="../img/avatar-1.svg" id="avatar" class="inline-block"-->
|
||||
<div id="user-name">
|
||||
<span class="text-white"> {{ name }} </span>
|
||||
<hr>
|
||||
<span class="text-white"> {{ email }} </span>
|
||||
<hr>
|
||||
</div>
|
||||
<div id="user-actions">
|
||||
<button class="bordered blue small" ><i>person</i></button>
|
||||
<button class="bordered blue small" ><i>lock</i></button>
|
||||
<button class="bordered blue small" @click='logOut'><i>exit_to_app</i></button>
|
||||
</div>
|
||||
</div>
|
||||
<menu-one :links="links"></menu-one>
|
||||
|
||||
<div class="fixed-bottom text-center light text-italic">
|
||||
Powered by
|
||||
<a href="https://vuejs.org/"><img src="../img/vue-logo.png" alt=""></a>
|
||||
<a href="http://quasar-framework.org/"><img src="../img/quasar-logo.png" alt=""></a>
|
||||
</div>
|
||||
</q-drawer>
|
||||
</template>
|
||||
<script type="text/javascript">
|
||||
import { mapGetters } from 'vuex'
|
||||
import menuOne from './menuOne.vue'
|
||||
import menuTwo from './menuTwo.vue'
|
||||
//import firebase from 'firebase'
|
||||
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
photo: '',
|
||||
userId: '',
|
||||
name: '',
|
||||
email: '',
|
||||
user: {},
|
||||
links: {
|
||||
Dashboard: {
|
||||
routes: [
|
||||
{ route: '/', faIcon: 'fa fa-home', materialIcon: 'home', name: 'Dashboard One' }
|
||||
],
|
||||
show: true
|
||||
},
|
||||
Forms: {
|
||||
routes: [
|
||||
{ route: '/form', faIcon: 'fa fa-search', materialIcon: 'search', name: 'Form find / edit' },
|
||||
{ route: '/embeeded', faIcon: 'fa fa-check', materialIcon: 'check', name: 'Embeeded validations' },
|
||||
{ route: '/advanced-form-one', faIcon: 'fa fa-hdd-o', materialIcon: 'filter_1', name: 'Adv. Form One' }
|
||||
],
|
||||
show: false
|
||||
},
|
||||
Pages: {
|
||||
routes: [
|
||||
{ route: '/login-one', faIcon: 'fa fa-unlock-alt', materialIcon: 'lock_open', name: 'Login One' },
|
||||
{ route: '/pricing', faIcon: 'fa fa-money', materialIcon: 'attach_money', name: 'Pricing' },
|
||||
{ route: '/drag-and-drop', faIcon: 'fa fa-arrows', materialIcon: 'move_to_inbox', name: 'Drag and Drop' },
|
||||
{ route: '/server-side-data-table', faIcon: 'fa fa-list-alt', materialIcon: 'list_compact', name: 'Server Side Data Table' }
|
||||
],
|
||||
show: false
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
created () {
|
||||
var vm = this
|
||||
/*firebase.auth().onAuthStateChanged(function (user) {
|
||||
if (user) {
|
||||
vm.user = user
|
||||
vm.name = vm.user.displayName
|
||||
vm.email = vm.user.email
|
||||
vm.photo = vm.user.photoURL
|
||||
vm.userId = vm.user.uid
|
||||
}
|
||||
})*/
|
||||
},
|
||||
methods: {
|
||||
logOut () {
|
||||
//firebase.auth().signOut()
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapGetters(['getLayoutNeeded', 'getMenuCollapse'])
|
||||
},
|
||||
components: {
|
||||
menuOne,
|
||||
menuTwo
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
.fixed-bottom {
|
||||
margin-bottom: 1%;
|
||||
}
|
||||
|
||||
.fixed-bottom a img {
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
}
|
||||
#avatar{
|
||||
padding: 20px;
|
||||
}
|
||||
#profile {
|
||||
height: 130px;
|
||||
background-color: #009688;
|
||||
}
|
||||
#user-name {
|
||||
left: 90px;
|
||||
bottom: 77px;
|
||||
position: relative;
|
||||
width: 159px;
|
||||
}
|
||||
#user-actions {
|
||||
left: 90px;
|
||||
bottom: 71px;
|
||||
position: relative;
|
||||
width: 171px;
|
||||
}
|
||||
#menu-collapse {
|
||||
margin-top: 5%;
|
||||
}
|
||||
</style>
|
||||
69
src/components/layout/drawer/menuOne.vue
Normal file
69
src/components/layout/drawer/menuOne.vue
Normal file
@@ -0,0 +1,69 @@
|
||||
<template>
|
||||
<div class="list no-border platform-delimiter light-paragraph">
|
||||
<template v-for="(parent, index) in links">
|
||||
<div class="list-label cursor-pointer underline" @click="parent.show = !parent.show">{{replaceUnderlineToSpace(index)}}</div>
|
||||
<template v-for="child in parent.routes">
|
||||
<transition name="menu">
|
||||
<div v-show="parent.show">
|
||||
<router-link :to="child.route" exact tag="div" class="item item-link drawer-closer cursor-pointer" >
|
||||
<i :class="child.faIcon" class="item-primary"></i>
|
||||
<div class="item-content">{{child.name}}</div>
|
||||
</router-link>
|
||||
</div>
|
||||
</transition>
|
||||
</template>
|
||||
<hr>
|
||||
</template>
|
||||
<div class="list-label cursor-pointer">Quasar Ready UI</div>
|
||||
<a href="http://quasar-framework.org/quasar-play/android/index.html#/showcase" target="_blank"
|
||||
class="item item-link drawer-closer cursor-pointer text-black" >
|
||||
<i class="fa fa-puzzle-piece item-primary" ></i>
|
||||
<div class="item-content">Components (55+)</div>
|
||||
</a>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: ['links'],
|
||||
watch: {
|
||||
'$route.path' () {
|
||||
Object.keys(this.links).forEach(parentName => { this.setParentVisibilityBasedOnRoute(this.links[parentName]) })
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
currentRoutePath () {
|
||||
return this.$route.path
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
setParentVisibilityBasedOnRoute (parent) {
|
||||
parent.routes.forEach(item => {
|
||||
if (this.$route.path === item.route) {
|
||||
parent.show = true
|
||||
return
|
||||
}
|
||||
})
|
||||
},
|
||||
replaceUnderlineToSpace (text) {
|
||||
while (text.indexOf('_') !== -1) {
|
||||
text = text.replace('_', ' ')
|
||||
}
|
||||
return text
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
.list-label:first-child{
|
||||
line-height: 50px;
|
||||
}
|
||||
.router-link-active {
|
||||
color: #027be3;
|
||||
background-color: #dadada !important;
|
||||
border-right: 2px solid #027be3;
|
||||
}
|
||||
.router-link-active .item-primary{
|
||||
color: #027be3;
|
||||
}
|
||||
</style>
|
||||
45
src/components/layout/drawer/menuTwo.vue
Normal file
45
src/components/layout/drawer/menuTwo.vue
Normal file
@@ -0,0 +1,45 @@
|
||||
<template>
|
||||
<div class="list no-border platform-delimiter light-paragraph">
|
||||
<template v-for="(parent, index) in links">
|
||||
<div class="list-label ">{{replaceUnderlineToSpace(index)}}</div>
|
||||
<template v-for="child in parent.routes">
|
||||
<q-drawer-link :icon="child.materialIcon" :to="{path: child.route, exact: true}">
|
||||
{{child.name}}
|
||||
</q-drawer-link>
|
||||
</template>
|
||||
</template>
|
||||
<div class="list-label cursor-pointer">Quasar Ready UI</div>
|
||||
<a href="http://quasar-framework.org/quasar-play/android/index.html#/showcase" target="_blank"
|
||||
class="item item-link drawer-closer cursor-pointer text-black" >
|
||||
<i class="fa fa-puzzle-piece item-primary" ></i>
|
||||
<div class="item-content">Components (55+)</div>
|
||||
</a>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: ['links'],
|
||||
methods: {
|
||||
replaceUnderlineToSpace (text) {
|
||||
while (text.indexOf('_') !== -1) {
|
||||
text = text.replace('_', ' ')
|
||||
}
|
||||
return text
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
.list-label:first-child{
|
||||
line-height: 50px;
|
||||
}
|
||||
.router-link-active {
|
||||
color: #027be3;
|
||||
background-color: #dadada !important;
|
||||
border-right: 2px solid #027be3;
|
||||
}
|
||||
.router-link-active .item-primary{
|
||||
color: #027be3;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user