You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
82 lines
1.9 KiB
82 lines
1.9 KiB
<template>
|
|
<v-layout wrap>
|
|
<v-container>
|
|
<v-icon class="Menu" @click.stop="drawer = !drawer" dark>fas fa-bars</v-icon>
|
|
</v-container>
|
|
|
|
<v-navigation-drawer v-model="drawer" app temporary right>
|
|
<v-list class="pa-1">
|
|
<v-list-tile avatar>
|
|
<v-list-tile-avatar>
|
|
<img src="https://randomuser.me/api/portraits/men/85.jpg">
|
|
</v-list-tile-avatar>
|
|
|
|
<v-list-tile-content>
|
|
<v-list-tile-title>John Leider</v-list-tile-title>
|
|
</v-list-tile-content>
|
|
</v-list-tile>
|
|
</v-list>
|
|
|
|
<v-list class="pt-0" dense>
|
|
<v-divider></v-divider>
|
|
|
|
<v-list-tile v-for="item in items" :key="item.title">
|
|
<v-list-tile-action>
|
|
<v-icon>{{ item.icon }}</v-icon>
|
|
</v-list-tile-action>
|
|
|
|
<v-list-tile-content>
|
|
<v-list-tile-title>{{ item.title }}</v-list-tile-title>
|
|
</v-list-tile-content>
|
|
</v-list-tile>
|
|
</v-list>
|
|
</v-navigation-drawer>
|
|
</v-layout>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
drawer: false,
|
|
items: [
|
|
{ title: 'Home', icon: 'dashboard' },
|
|
{ title: 'About', icon: 'question_answer' }
|
|
]
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.Menu {
|
|
position: absolute;
|
|
right: 20px;
|
|
top: 20px;
|
|
}
|
|
.drawer-trigger {
|
|
position: fixed;
|
|
top: 0px;
|
|
padding: 40px;
|
|
background-color: white;
|
|
left: 400px;
|
|
}
|
|
|
|
.drawer-trigger.active {
|
|
color: red;
|
|
}
|
|
|
|
.drawer {
|
|
position: fixed;
|
|
top: 0px;
|
|
left: -400px;
|
|
bottom: 0px;
|
|
background-color: white;
|
|
width: 400px;
|
|
}
|
|
|
|
.drawer.open {
|
|
left: 0px;
|
|
}
|
|
</style>
|