mirror of https://github.com/nuxt/nuxt.git
133 lines
3.1 KiB
Vue
133 lines
3.1 KiB
Vue
<template>
|
|
<div class="page-container md-layout-column">
|
|
<md-toolbar class="md-primary">
|
|
<md-button class="md-icon-button" @click="showNavigation = true">
|
|
<md-icon>menu</md-icon>
|
|
</md-button>
|
|
<span class="md-title">
|
|
Nuxt + Vue Material
|
|
</span>
|
|
|
|
<div class="md-toolbar-section-end">
|
|
<md-button @click="showSidepanel = true">
|
|
Favorites
|
|
</md-button>
|
|
</div>
|
|
</md-toolbar>
|
|
|
|
<md-drawer :md-active.sync="showNavigation">
|
|
<md-toolbar class="md-transparent" md-elevation="0">
|
|
<span class="md-title">
|
|
My App name
|
|
</span>
|
|
</md-toolbar>
|
|
|
|
<md-list>
|
|
<md-list-item>
|
|
<md-icon>move_to_inbox</md-icon>
|
|
<span class="md-list-item-text">
|
|
Inbox
|
|
</span>
|
|
</md-list-item>
|
|
|
|
<md-list-item>
|
|
<md-icon>send</md-icon>
|
|
<span class="md-list-item-text">
|
|
Sent Mail
|
|
</span>
|
|
</md-list-item>
|
|
|
|
<md-list-item>
|
|
<md-icon>delete</md-icon>
|
|
<span class="md-list-item-text">
|
|
Trash
|
|
</span>
|
|
</md-list-item>
|
|
|
|
<md-list-item>
|
|
<md-icon>error</md-icon>
|
|
<span class="md-list-item-text">
|
|
Spam
|
|
</span>
|
|
</md-list-item>
|
|
</md-list>
|
|
</md-drawer>
|
|
|
|
<md-drawer :md-active.sync="showSidepanel" class="md-right">
|
|
<md-toolbar class="md-transparent" md-elevation="0">
|
|
<span class="md-title">
|
|
Favorites
|
|
</span>
|
|
</md-toolbar>
|
|
|
|
<md-list>
|
|
<md-list-item>
|
|
<span class="md-list-item-text">
|
|
Abbey Christansen
|
|
</span>
|
|
|
|
<md-button class="md-icon-button md-list-action">
|
|
<md-icon class="md-primary">
|
|
chat_bubble
|
|
</md-icon>
|
|
</md-button>
|
|
</md-list-item>
|
|
|
|
<md-list-item>
|
|
<span class="md-list-item-text">
|
|
Alex Nelson
|
|
</span>
|
|
|
|
<md-button class="md-icon-button md-list-action">
|
|
<md-icon class="md-primary">
|
|
chat_bubble
|
|
</md-icon>
|
|
</md-button>
|
|
</md-list-item>
|
|
|
|
<md-list-item>
|
|
<span class="md-list-item-text">
|
|
Mary Johnson
|
|
</span>
|
|
|
|
<md-button class="md-icon-button md-list-action">
|
|
<md-icon>chat_bubble</md-icon>
|
|
</md-button>
|
|
</md-list-item>
|
|
</md-list>
|
|
</md-drawer>
|
|
|
|
<md-content>
|
|
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error quibusdam, non molestias et! Earum magnam, similique, quo recusandae placeat dicta asperiores modi sint ea repudiandae maxime? Quae non explicabo, neque.
|
|
</md-content>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: 'Sidenav',
|
|
data: () => ({
|
|
showNavigation: false,
|
|
showSidepanel: false
|
|
})
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.page-container {
|
|
min-height: 100vh;
|
|
overflow: hidden;
|
|
position: relative;
|
|
border: 1px solid rgba(#000, 0.12);
|
|
}
|
|
|
|
.md-drawer {
|
|
width: 230px;
|
|
max-width: calc(100vw - 125px);
|
|
}
|
|
|
|
.md-content {
|
|
padding: 16px;
|
|
}
|
|
</style>
|