feat: added navigator drawer footer

This commit is contained in:
Corentin Thomasset 2021-05-17 23:39:13 +02:00
parent fed0daf0a7
commit 05da3752ca
No known key found for this signature in database
GPG key ID: DBD997E935996158
2 changed files with 39 additions and 4 deletions

View file

@ -44,6 +44,23 @@
</v-list-item> </v-list-item>
</div> </div>
</v-list> </v-list>
<template v-slot:append>
<v-divider />
<div class="pa-5 navigation-drawer-footer">
<div>
IT-Tools <a
:href="'https://github.com/CorentinTh/it-tools/tree/'+appVersion"
target="_blank"
>{{ appVersion }}</a>
</div>
<div>
&copy; {{ new Date().getFullYear() }} <a href="//corentin-thomasset.fr" class="footer-link">Corentin
Thomasset</a>
</div>
</div>
</template>
</v-navigation-drawer> </v-navigation-drawer>
<v-app-bar <v-app-bar
@ -85,6 +102,7 @@
<script lang="ts"> <script lang="ts">
import {Component, mixins} from 'nuxt-property-decorator' import {Component, mixins} from 'nuxt-property-decorator'
import {version} from '../package.json'
import {ToolRoutesMixin} from '~/mixins/tool-routes.mixin' import {ToolRoutesMixin} from '~/mixins/tool-routes.mixin'
import LogoOutlined from '~/assets/logo-outlined.svg?inline' import LogoOutlined from '~/assets/logo-outlined.svg?inline'
import HeroGradient from '~/assets/small-hero-gradient.svg?inline' import HeroGradient from '~/assets/small-hero-gradient.svg?inline'
@ -101,6 +119,7 @@ export default class DefaultLayout extends mixins(ToolRoutesMixin) {
title = 'IT - Tools' title = 'IT - Tools'
drawer = false drawer = false
items = [] items = []
appVersion = 'v' + version
} }
</script> </script>
@ -115,7 +134,7 @@ export default class DefaultLayout extends mixins(ToolRoutesMixin) {
opacity: 0.5; opacity: 0.5;
font-size: 15px; font-size: 15px;
&.title{ &.title {
opacity: 1; opacity: 1;
} }
@ -165,8 +184,8 @@ export default class DefaultLayout extends mixins(ToolRoutesMixin) {
} }
} }
.v-navigation-drawer__content{ .v-navigation-drawer__content {
.v-list-item--active{ .v-list-item--active {
color: var(--v-anchor-base); color: var(--v-anchor-base);
border-left: 3px solid var(--v-primary-base); border-left: 3px solid var(--v-primary-base);
} }
@ -185,6 +204,22 @@ export default class DefaultLayout extends mixins(ToolRoutesMixin) {
color: #fff !important; color: #fff !important;
} }
.v-navigation-drawer__append {
text-align: center;
color: rgba(255, 255, 255, 0.52) !important;
a {
border-bottom: 1px dashed;
text-decoration: none;
color: rgba(255, 255, 255, 0.52) !important;
&:hover {
color: #4CAF50 !important;
border-bottom: 1px solid;
}
}
}
.theme--dark { .theme--dark {
.v-card, .v-card,
.v-footer, .v-footer,

View file

@ -1,6 +1,6 @@
{ {
"name": "it-tools", "name": "it-tools",
"version": "1.0.0", "version": "2.0.0-beta.0",
"private": true, "private": true,
"scripts": { "scripts": {
"dev": "nuxt-ts", "dev": "nuxt-ts",