101 lines
2.5 KiB
Vue
101 lines
2.5 KiB
Vue
<template>
|
|
<div id="header">
|
|
<v-toolbar dark>
|
|
<v-app-bar-nav-icon
|
|
@click.stop="sidebar = !sidebar"
|
|
v-if="$vuetify.breakpoint.mobile"
|
|
></v-app-bar-nav-icon>
|
|
<v-toolbar-title
|
|
class="troplo-title"
|
|
@click="$router.push('/')"
|
|
style="cursor: pointer"
|
|
>Troplo</v-toolbar-title
|
|
>
|
|
<v-spacer></v-spacer>
|
|
<v-list v-if="!$vuetify.breakpoint.mobile">
|
|
<v-btn
|
|
text
|
|
v-for="item in items"
|
|
:key="item.id"
|
|
class="ml-1"
|
|
:to="item.path"
|
|
style="text-transform: unset !important"
|
|
:disabled="item.disabled"
|
|
>
|
|
<v-list-item-title>{{ item.title }}</v-list-item-title>
|
|
</v-btn>
|
|
<v-btn
|
|
v-if="false"
|
|
class="ml-1"
|
|
text
|
|
@click="$vuetify.theme.dark = !$vuetify.theme.dark"
|
|
>
|
|
<v-list-item-title>
|
|
<v-icon>{{
|
|
$vuetify.theme.dark ? "mdi-lightbulb-on" : "mdi-lightbulb-outline"
|
|
}}</v-icon>
|
|
</v-list-item-title>
|
|
</v-btn>
|
|
</v-list>
|
|
</v-toolbar>
|
|
<v-navigation-drawer
|
|
floating
|
|
color="dark"
|
|
app
|
|
v-model="sidebar"
|
|
v-if="$vuetify.breakpoint.mobile"
|
|
expand
|
|
>
|
|
<v-divider></v-divider>
|
|
<v-list nav dense>
|
|
<v-list-item v-for="item in items" :key="item.id" link :to="item.path">
|
|
<v-list-item-icon>
|
|
<v-icon>{{ item.icon }}</v-icon>
|
|
</v-list-item-icon>
|
|
|
|
<v-list-item-content>
|
|
<v-list-item-title>{{ item.title }}</v-list-item-title>
|
|
</v-list-item-content>
|
|
</v-list-item>
|
|
<v-list-item
|
|
link
|
|
@click="$vuetify.theme.dark = !$vuetify.theme.dark"
|
|
v-if="false"
|
|
>
|
|
<v-list-item-icon>
|
|
<v-icon>{{
|
|
$vuetify.theme.dark ? "mdi-lightbulb-on" : "mdi-lightbulb-outline"
|
|
}}</v-icon>
|
|
</v-list-item-icon>
|
|
</v-list-item>
|
|
</v-list>
|
|
</v-navigation-drawer>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: "Header",
|
|
data() {
|
|
return {
|
|
sidebar: false,
|
|
items: [
|
|
{ id: 1, title: "Home", icon: "mdi-home", path: "/" },
|
|
{
|
|
id: 2,
|
|
title: "Projects",
|
|
icon: "mdi-text-box-multiple",
|
|
path: "/projects"
|
|
},
|
|
{ id: 3, title: "Contact", icon: "mdi-email", path: "/contact" }
|
|
]
|
|
}
|
|
},
|
|
mounted() {
|
|
this.$vuetify.theme = { dark: true }
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped></style>
|