142 lines
5.2 KiB
Vue
142 lines
5.2 KiB
Vue
<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 flex flex-col justify-between transition-all"
|
|
:class="{
|
|
'-left-[14rem]': !(menuVisible || (!menuVisible && menuOverflowVisible)),
|
|
'left-0': menuVisible || (!menuVisible && menuOverflowVisible),
|
|
}"
|
|
>
|
|
<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="/contribution" menu="contribution" icon="contribution">Zuschüsse</v-link>
|
|
</div>
|
|
<div class="grid gap-2">
|
|
<v-link href="/setting" menu="setting" icon="setting">Einstellungen</v-link>
|
|
<v-link @click.prevent="$inertia.post('/logout')" icon="logout" href="/logout">Abmelden</v-link>
|
|
</div>
|
|
<a
|
|
href="#"
|
|
@click.prevent="menuOverflowVisible = false"
|
|
v-if="menuOverflowVisible && !menuVisible"
|
|
class="absolute right-0 top-0 mr-2 mt-2"
|
|
>
|
|
<svg-sprite src="close" class="w-5 h-5 text-gray-300"></svg-sprite>
|
|
</a>
|
|
</div>
|
|
|
|
<div
|
|
class="grow bg-gray-900 flex flex-col transition-all"
|
|
:class="{'ml-56': menuVisible, 'ml-0': !menuVisible}"
|
|
>
|
|
<div class="h-16 px-6 flex justify-between items-center border-b border-gray-600">
|
|
<div class="flex space-x-3 items-center">
|
|
<a href="#" @click.prevent="menuOverflowVisible = !menuOverflowVisible" class="lg:hidden">
|
|
<svg-sprite src="menu" class="text-gray-100 w-4 h-4"></svg-sprite>
|
|
</a>
|
|
<span
|
|
class="text-sm md: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"
|
|
class="btn label mr-2"
|
|
:class="`btn-${link.color}`"
|
|
>
|
|
<svg-sprite v-show="link.icon" class="w-3 h-3 mr-2" :src="link.icon"></svg-sprite>
|
|
<span v-text="link.label"></span>
|
|
</i-link>
|
|
</div>
|
|
</div>
|
|
<label for="search" class="hidden md:block">
|
|
<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>
|
|
|
|
<div class="grow flex flex-col">
|
|
<slot></slot>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import VLink from './_VLink.vue';
|
|
import {debounce} from 'lodash';
|
|
import mergesQueryString from '../mixins/mergesQueryString.js';
|
|
|
|
export default {
|
|
data: function () {
|
|
return {
|
|
menuVisible: true,
|
|
menuOverflowVisible: false,
|
|
};
|
|
},
|
|
components: {
|
|
VNotification: () => import('../components/VNotification.vue'),
|
|
VLink,
|
|
},
|
|
mixins: [mergesQueryString],
|
|
|
|
computed: {
|
|
isearch: {
|
|
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) : [];
|
|
},
|
|
},
|
|
|
|
methods: {
|
|
menuListener() {
|
|
var x = window.matchMedia('(min-width: 1024px)');
|
|
|
|
if (x.matches && !this.menuVisible) {
|
|
this.menuVisible = true;
|
|
this.menuOverflowVisible = false;
|
|
return;
|
|
}
|
|
if (!x.matches && this.menuVisible) {
|
|
this.menuVisible = false;
|
|
this.menuOverflowVisible = false;
|
|
return;
|
|
}
|
|
},
|
|
},
|
|
created() {
|
|
window.addEventListener('resize', this.menuListener);
|
|
this.menuListener();
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style scoped>
|
|
.main-grid {
|
|
grid-template-columns: min-content 1fr;
|
|
display: grid;
|
|
}
|
|
</style>
|