Add logout button
This commit is contained in:
philipp lang
parent
b8a1ea9c8e
commit
f4f84b2369
|
|
@ -0,0 +1,13 @@
|
|||
<?xml version="1.0" ?>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
|
||||
<g>
|
||||
<g>
|
||||
<path d="M255.15,468.625H63.787c-11.737,0-21.262-9.526-21.262-21.262V64.638c0-11.737,9.526-21.262,21.262-21.262H255.15 c11.758,0,21.262-9.504,21.262-21.262S266.908,0.85,255.15,0.85H63.787C28.619,0.85,0,29.47,0,64.638v382.724 c0,35.168,28.619,63.787,63.787,63.787H255.15c11.758,0,21.262-9.504,21.262-21.262 C276.412,478.129,266.908,468.625,255.15,468.625z"/>
|
||||
</g>
|
||||
</g>
|
||||
<g>
|
||||
<g>
|
||||
<path d="M505.664,240.861L376.388,113.286c-8.335-8.25-21.815-8.143-30.065,0.213s-8.165,21.815,0.213,30.065l92.385,91.173 H191.362c-11.758,0-21.262,9.504-21.262,21.262c0,11.758,9.504,21.263,21.262,21.263h247.559l-92.385,91.173 c-8.377,8.25-8.441,21.709-0.213,30.065c4.167,4.21,9.653,6.336,15.139,6.336c5.401,0,10.801-2.041,14.926-6.124l129.276-127.575 c4.04-3.997,6.336-9.441,6.336-15.139C512,250.302,509.725,244.88,505.664,240.861z"/>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.1 KiB |
|
|
@ -1,14 +1,20 @@
|
|||
<template>
|
||||
<div id="app" class="flex font-sans grow">
|
||||
|
||||
<v-notification class="fixed z-40 right-0 bottom-0 mb-3 mr-3"></v-notification>
|
||||
|
||||
<!-- ******************************** Sidebar ******************************** -->
|
||||
<div class="fixed bg-gray-800 p-6 w-56 left-0 top-0 h-screen border-r border-gray-600 border-solid">
|
||||
<div
|
||||
class="fixed bg-gray-800 p-6 w-56 left-0 top-0 h-screen border-r border-gray-600 border-solid flex flex-col justify-between"
|
||||
>
|
||||
<div class="grid gap-2">
|
||||
<v-link href="/" menu="dashboard" icon="loss">Dashboard</v-link>
|
||||
<v-link href="/member" menu="member" icon="user">Mitglieder</v-link>
|
||||
<v-link href="/subscription" v-show="hasModule('bill')" menu="subscription" icon="money">Beiträge</v-link>
|
||||
<v-link href="/subscription" v-show="hasModule('bill')" menu="subscription" icon="money"
|
||||
>Beiträge</v-link
|
||||
>
|
||||
</div>
|
||||
<div class="grid gap-2">
|
||||
<v-link method="POST" icon="logout" href="/logout">Abmelden</v-link>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -17,13 +23,25 @@
|
|||
<div class="flex">
|
||||
<span class="text-xl font-semibold text-white leading-none" v-html="$page.props.title"></span>
|
||||
<div class="flex ml-4">
|
||||
<i-link v-for="link, index in filterMenu" :key="index" :href="link.href" v-text="link.label" class="btn label mr-2" :class="`btn-${link.color}`">
|
||||
<i-link
|
||||
v-for="(link, index) in filterMenu"
|
||||
:key="index"
|
||||
:href="link.href"
|
||||
v-text="link.label"
|
||||
class="btn label mr-2"
|
||||
:class="`btn-${link.color}`"
|
||||
>
|
||||
<svg-sprite :src="link.icon"></svg-sprite>
|
||||
</i-link>
|
||||
</div>
|
||||
</div>
|
||||
<label for="search">
|
||||
<input class="shadow-lg bg-gray-800 rounded-lg py-2 px-3 text-gray-300 hover:bg-gray-700 focus:bg-gray-700 placeholder-gray-400" placeholder="Suchen…" name="search" v-model="isearch" />
|
||||
<input
|
||||
class="shadow-lg bg-gray-800 rounded-lg py-2 px-3 text-gray-300 hover:bg-gray-700 focus:bg-gray-700 placeholder-gray-400"
|
||||
placeholder="Suchen…"
|
||||
name="search"
|
||||
v-model="isearch"
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
|
|
@ -31,41 +49,37 @@
|
|||
<slot></slot>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import VLink from './_VLink.vue';
|
||||
import { debounce } from 'lodash';
|
||||
import {debounce} from 'lodash';
|
||||
import mergesQueryString from '../mixins/mergesQueryString.js';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'VNotification': () => import('../components/VNotification.vue'),
|
||||
VLink
|
||||
VNotification: () => import('../components/VNotification.vue'),
|
||||
VLink,
|
||||
},
|
||||
mixins: [ mergesQueryString ],
|
||||
mixins: [mergesQueryString],
|
||||
|
||||
computed: {
|
||||
isearch: {
|
||||
set: debounce(function(v) {
|
||||
this.$inertia.visit(this.qs({ page: 1, search: v }), {
|
||||
set: debounce(function (v) {
|
||||
this.$inertia.visit(this.qs({page: 1, search: v}), {
|
||||
only: ['page', 'search', 'data'],
|
||||
preserveState: true,
|
||||
});
|
||||
}, 500),
|
||||
get() {
|
||||
return this.$page.props.search;
|
||||
}
|
||||
},
|
||||
},
|
||||
filterMenu() {
|
||||
return this.$page.props.toolbar
|
||||
? this.$page.props.toolbar.filter(menu => menu.show !== false):
|
||||
[];
|
||||
}
|
||||
}
|
||||
|
||||
return this.$page.props.toolbar ? this.$page.props.toolbar.filter((menu) => menu.show !== false) : [];
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +1,10 @@
|
|||
<template>
|
||||
<i-link class="flex text-white py-2 px-3 rounded-lg hover:bg-gray-600" :href="href" :class="{'bg-gray-700': $page.props.menu == menu}">
|
||||
<i-link
|
||||
class="flex text-white py-2 px-3 rounded-lg hover:bg-gray-600"
|
||||
:method="method"
|
||||
:href="href"
|
||||
:class="{'bg-gray-700': $page.props.menu == menu}"
|
||||
>
|
||||
<svg-sprite class="text-white w-6 h-6 mr-4" :src="icon"></svg-sprite>
|
||||
<span class="font-semibold">
|
||||
<slot></slot>
|
||||
|
|
@ -13,6 +18,9 @@ export default {
|
|||
href: {},
|
||||
icon: {},
|
||||
menu: {},
|
||||
}
|
||||
method: {
|
||||
default: 'GET',
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
Loading…
Reference in New Issue