v-app(v-scroll='upBtnScroll', :dark='darkMode')
nav-header
v-navigation-drawer(
:class='darkMode ? `grey darken-5` : `primary`'
dark
app
clipped
mobile-break-point='600'
:temporary='$vuetify.breakpoint.mdAndDown'
v-model='navShown'
:right='$vuetify.rtl'
)
vue-scroll(:ops='scrollStyle')
nav-sidebar(:color='darkMode ? `grey darken-5` : `primary`')
slot(name='sidebar')
v-fab-transition
v-btn(
fab
color='primary'
fixed
bottom
:right='$vuetify.rtl'
:left='!$vuetify.rtl'
small
@click='navShown = !navShown'
v-if='$vuetify.breakpoint.mdAndDown'
v-show='!navShown'
)
v-icon menu
v-content(ref='content')
template(v-if='path !== `home`')
v-toolbar(:color='darkMode ? `grey darken-4-d3` : `grey lighten-3`', flat, dense, v-if='$vuetify.breakpoint.smAndUp')
//- v-btn.pl-0(v-if='$vuetify.breakpoint.xsOnly', flat, @click='toggleNavigation')
//- v-icon(color='grey darken-2', left) menu
//- span Navigation
v-breadcrumbs.breadcrumbs-nav.pl-0(
:items='breadcrumbs'
divider='/'
)
template(slot='item', slot-scope='props')
v-icon(v-if='props.item.path === "/"', small, @click='goHome') mdi-home
v-btn.ma-0(v-else, :href='props.item.path', small, text) {{props.item.name}}
template(v-if='!isPublished')
v-spacer
.caption.red--text {{$t('common:page.unpublished')}}
status-indicator.ml-3(negative, pulse)
v-divider
v-toolbar.px-2(:color='darkMode ? `grey darken-4-l3` : `grey lighten-4`', flat, :height='90')
div
.headline.grey--text(:class='darkMode ? `text--lighten-2` : `text--darken-3`') {{title}}
.caption.grey--text.text--darken-1 {{description}}
v-spacer
v-divider
v-container.pl-5.pt-2(fill-height, fluid, grid-list-xl)
v-layout(row)
v-flex.page-col-sd(lg3, xl2, fill-height, v-if='$vuetify.breakpoint.lgAndUp')
v-card(v-if='toc.length')
.overline.pa-5.pb-0(:class='darkMode ? `indigo--text text--lighten-3` : `primary--text`') {{$t('common:page.toc')}}
v-list.pb-3(dense, nav, :class='darkMode ? `darken-3-d3` : ``')
template(v-for='(tocItem, tocIdx) in toc')
v-list-item(@click='$vuetify.goTo(tocItem.anchor, scrollOpts)')
v-icon(color='grey', small) mdi-chevron-right
v-list-item-title.pl-3 {{tocItem.title}}
// v-divider(v-if='tocIdx < toc.length - 1 || tocItem.children.length')
template(v-for='tocSubItem in tocItem.children')
v-list-item(@click='$vuetify.goTo(tocSubItem.anchor, scrollOpts)')
v-icon.pl-3(color='grey lighten-1', small) mdi-chevron-right
v-list-item-title.pl-3.caption.grey--text.text--darken-1 {{tocSubItem.title}}
// v-divider(inset, v-if='tocIdx < toc.length - 1')
v-card.mt-5
.pa-5.pt-3
.overline.indigo--text.d-flex.align-center
span {{$t('common:page.lastEditedBy')}}
v-spacer
v-tooltip(left, v-if='isAuthenticated')
template(v-slot:activator='{ on }')
v-btn.btn-animate-edit(icon, :href='"/e/" + locale + "/" + path', v-on='on', x-small)
v-icon(color='grey', dense) mdi-pencil
span {{$t('common:page.editPage')}}
.body-2.grey--text(:class='darkMode ? `` : `text--darken-3`') {{ authorName }}
.caption.grey--text.text--darken-1 {{ updatedAt | moment('calendar') }}
v-card.mt-5
.pa-5
.overline.teal--text.pb-2 Tags
v-chip.mr-1(
label
color='teal lighten-5'
v-for='(tag, idx) in tags'
:href='`/t/` + tag.slug'
:key='tag.slug'
)
v-icon(color='teal', left, small) mdi-label
span.teal--text.text--darken-2 {{tag.text}}
v-divider
.pa-5
.overline.pb-2.yellow--text.text--darken-4 Rating
.text-center
v-rating(
v-model='rating'
color='yellow darken-3'
background-color='grey lighten-1'
half-increments
hover
)
.caption.grey--text 5 votes
v-divider
v-toolbar(:color='darkMode ? `grey darken-3` : `grey lighten-4`', flat, dense)
v-spacer
v-tooltip(bottom)
template(v-slot:activator='{ on }')
v-btn(icon, small, v-on='on'): v-icon(color='grey') mdi-bookmark
span {{$t('common:page.bookmark')}}
v-tooltip(bottom)
template(v-slot:activator='{ on }')
v-btn(icon, small, v-on='on'): v-icon(color='grey') mdi-share-variant
span {{$t('common:page.share')}}
v-tooltip(bottom)
template(v-slot:activator='{ on }')
v-btn(icon, small, v-on='on'): v-icon(color='grey') mdi-printer
span {{$t('common:page.printFormat')}}
v-spacer
v-flex.page-col-content(xs12, lg9, xl10)
.contents(ref='container')
slot(name='contents')
nav-footer
notify
search-results
v-fab-transition
v-btn(
v-if='upBtnShown'
fab
fixed
bottom
:right='!$vuetify.rtl'
:left='$vuetify.rtl'
small
@click='$vuetify.goTo(0, scrollOpts)'
color='primary'
)
v-icon mdi-arrow-up