Files
procat2/cateditor/src/components/Navbar.vue

101 lines
2.8 KiB
Vue

<template>
<v-app-bar dark dense absolute app color="keen_dark_grey">
<img class="pr-4" src="/static/img/keen_logo.svg" width="100">
<v-toolbar-title color="primary" class="headline">
<span>ProCatalog</span>
<span class="font-weight-light">&nbsp;{{ pageTitle }}</span>
</v-toolbar-title>
<v-spacer/>
<v-toolbar-items class="hidden-sm-and-down">
<v-btn text small href="/">Dashboard</v-btn>
<v-menu open-on-hover bottom offset-y>
<template v-slot:activator="{ on }">
<v-btn text small v-on="on">Support</v-btn>
</template>
<v-list class="navbar-menu ma-0 pa-0">
<v-list-item dense class="navbar-menu-item">
<v-btn
text
small
href="mailto:support@procatalog.io?Subject=Keen%20ProCatalog%20support%20request"
class="navbar-menu-button">Email Support</v-btn>
</v-list-item>
<v-list-item dense class="navbar-menu-item">
<v-btn
text
small
href="https://keenfootwear.wistia.com/medias/ld970jfi9o"
target="_blank"
class="navbar-menu-button">Catalog making tutorial</v-btn>
</v-list-item>
<v-list-item dense class="navbar-menu-item">
<v-btn
text
small
href="/static/Markup Tool Setup.pdf"
target="_blank"
class="navbar-menu-button">Markup tool setup guide</v-btn>
</v-list-item>
<v-list-item dense class="navbar-menu-item">
<v-btn
text
small
href="/static/Quick Start.pdf"
target="_blank"
class="navbar-menu-button">Markup tool quick start</v-btn>
</v-list-item>
</v-list>
</v-menu>
<v-menu open-on-hover bottom offset-y>
<template v-slot:activator="{ on }">
<v-btn text small v-on="on">
Account
</v-btn>
</template>
<v-list class="navbar-menu ma-0 pa-0">
<v-list-item dense class="navbar-menu-item">
<v-btn text small href="/account/settings" class="navbar-menu-button">Profile</v-btn>
</v-list-item>
<v-list-item dense class="navbar-menu-item">
<v-btn text small href="/account/logout" class="navbar-menu-button">Log Out</v-btn>
</v-list-item>
</v-list>
</v-menu>
</v-toolbar-items>
</v-app-bar>
</template>
<script>
export default {
props: {
pageTitle: {
type: String,
default: 'Title',
},
},
data: () => ({
foo: true
})
}
</script>
<style scoped>
.navbar-menu {
background-color: #373737;
margin: 0;
padding: 0;
}
.navbar-menu-item {
margin: 0;
padding: 0;
}
.navbar-menu-button {
color: white;
}
</style>