mirror of
https://github.com/nuxt/nuxt.git
synced 2024-11-24 22:55:13 +00:00
105 lines
3.1 KiB
Vue
105 lines
3.1 KiB
Vue
<template>
|
|
<v-app dark>
|
|
<v-navigation-drawer v-model="drawer" fixed clipped app>
|
|
<v-list>
|
|
<v-list-item v-for="item in items" :key="item.text" link>
|
|
<v-list-item-action>
|
|
<v-icon>{{ item.icon }}</v-icon>
|
|
</v-list-item-action>
|
|
<v-list-item-content>
|
|
<v-list-item-title>
|
|
{{ item.text }}
|
|
</v-list-item-title>
|
|
</v-list-item-content>
|
|
</v-list-item>
|
|
<v-subheader class="mt-3 grey--text text--darken-1 text-uppercase">
|
|
Subscriptions
|
|
</v-subheader>
|
|
<v-list>
|
|
<v-list-item v-for="item in items2" :key="item.text" link>
|
|
<v-list-item-avatar>
|
|
<img :src="`https://randomuser.me/api/portraits/men/${item.picture}.jpg`" alt="">
|
|
</v-list-item-avatar>
|
|
<!-- eslint-disable-next-line vue/no-v-text-v-html-on-component -->
|
|
<v-list-item-title v-text="item.text" />
|
|
</v-list-item>
|
|
</v-list>
|
|
<v-list-item class="mt-3">
|
|
<v-list-item-action>
|
|
<v-icon color="grey darken-1">
|
|
mdi-plus-circle-outline
|
|
</v-icon>
|
|
</v-list-item-action>
|
|
<v-list-item-title class="grey--text text--darken-1">
|
|
Browse Channels
|
|
</v-list-item-title>
|
|
</v-list-item>
|
|
<v-list-item>
|
|
<v-list-item-action>
|
|
<v-icon color="grey darken-1">
|
|
mdi-settings
|
|
</v-icon>
|
|
</v-list-item-action>
|
|
<v-list-item-title class="grey--text text--darken-1">
|
|
Manage Subscriptions
|
|
</v-list-item-title>
|
|
</v-list-item>
|
|
</v-list>
|
|
</v-navigation-drawer>
|
|
<v-app-bar color="primary" dense fixed clipped-left app>
|
|
<v-app-bar-nav-icon @click.stop="drawer = !drawer" />
|
|
<v-icon class="mx-3">
|
|
mdi-youtube
|
|
</v-icon>
|
|
<v-toolbar-title class="mr-5 align-center">
|
|
<span class="title">Youtube</span>
|
|
</v-toolbar-title>
|
|
<v-spacer />
|
|
<v-layout row align-center style="max-width: 650px">
|
|
<v-text-field
|
|
placeholder="Search..."
|
|
single-line
|
|
append-icon="mdi-magnify"
|
|
color="white"
|
|
hide-details
|
|
/>
|
|
</v-layout>
|
|
</v-app-bar>
|
|
<v-content>
|
|
<Nuxt />
|
|
</v-content>
|
|
</v-app>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data () {
|
|
return {
|
|
drawer: true,
|
|
items: [
|
|
{ icon: 'mdi-home', text: 'Home' },
|
|
{ icon: 'mdi-fire', text: 'Trending' },
|
|
{ icon: 'mdi-youtube-subscription', text: 'Subscriptions' },
|
|
{ icon: 'mdi-folder', text: 'Library' },
|
|
{ icon: 'mdi-history', text: 'History' },
|
|
{ icon: 'mdi-clock', text: 'Watch Later' },
|
|
{ icon: 'mdi-thumb-up', text: 'Liked videos' }
|
|
],
|
|
items2: [
|
|
{ picture: 28, text: 'Joseph' },
|
|
{ picture: 38, text: 'Apple' },
|
|
{ picture: 48, text: 'Xbox Ahoy' },
|
|
{ picture: 58, text: 'Nokia' },
|
|
{ picture: 78, text: 'MKBHD' }
|
|
]
|
|
}
|
|
},
|
|
head: {
|
|
title: 'Nuxt Vuetify Starter'
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
</style>
|