adrema/resources/js/layouts/AppLayout.vue

161 lines
6.2 KiB
Vue
Raw Normal View History

2020-04-10 20:32:12 +02:00
<template>
2022-02-10 02:18:57 +01:00
<div id="app" class="flex font-sans grow">
2022-02-12 15:15:27 +01:00
<v-notification class="fixed z-40 right-0 bottom-0 mb-3 mr-3"></v-notification>
2021-06-22 23:00:14 +02:00
2021-04-11 00:57:47 +02:00
<!-- ******************************** Sidebar ******************************** -->
2022-05-17 00:22:45 +02:00
<div
2022-11-23 01:11:20 +01:00
class="fixed z-40 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"
2022-11-22 01:55:57 +01:00
:class="{
'-left-[14rem]': !(menuVisible || (!menuVisible && menuOverflowVisible)),
'left-0': menuVisible || (!menuVisible && menuOverflowVisible),
}"
2022-05-17 00:22:45 +02:00
>
2021-04-11 00:57:47 +02:00
<div class="grid gap-2">
2021-04-11 01:25:40 +02:00
<v-link href="/" menu="dashboard" icon="loss">Dashboard</v-link>
2021-04-11 00:57:47 +02:00
<v-link href="/member" menu="member" icon="user">Mitglieder</v-link>
2022-05-17 00:22:45 +02:00
<v-link href="/subscription" v-show="hasModule('bill')" menu="subscription" icon="money"
>Beiträge</v-link
>
2022-05-17 01:37:07 +02:00
<v-link href="/contribution" menu="contribution" icon="contribution">Zuschüsse</v-link>
2022-05-17 00:22:45 +02:00
</div>
<div class="grid gap-2">
2022-09-06 00:36:14 +02:00
<v-link href="/setting" menu="setting" icon="setting">Einstellungen</v-link>
2022-05-17 01:37:07 +02:00
<v-link @click.prevent="$inertia.post('/logout')" icon="logout" href="/logout">Abmelden</v-link>
2021-04-11 00:57:47 +02:00
</div>
2022-11-22 01:55:57 +01:00
<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>
2021-04-11 00:57:47 +02:00
</div>
2022-11-22 01:55:57 +01:00
<div
class="grow bg-gray-900 flex flex-col transition-all"
:class="{'ml-56': menuVisible, 'ml-0': !menuVisible}"
>
2021-07-04 16:56:07 +02:00
<div class="h-16 px-6 flex justify-between items-center border-b border-gray-600">
2022-11-22 01:55:57 +01:00
<div class="flex space-x-3 items-center">
<a href="#" @click.prevent="menuOverflowVisible = !menuOverflowVisible" class="lg:hidden">
2022-11-23 01:11:20 +01:00
<svg-sprite src="menu" class="text-gray-100 w-5 h-5"></svg-sprite>
2022-11-22 01:55:57 +01:00
</a>
<span
class="text-sm md:text-xl font-semibold text-white leading-none"
v-html="$page.props.title"
></span>
2021-06-22 00:14:34 +02:00
<div class="flex ml-4">
2022-05-17 00:22:45 +02:00
<i-link
v-for="(link, index) in filterMenu"
:key="index"
:href="link.href"
class="btn label mr-2"
:class="`btn-${link.color}`"
>
2022-11-18 15:55:44 +01:00
<svg-sprite v-show="link.icon" class="w-3 h-3 mr-2" :src="link.icon"></svg-sprite>
<span v-text="link.label"></span>
2022-02-12 15:26:14 +01:00
</i-link>
2021-06-22 00:14:34 +02:00
</div>
</div>
2022-11-23 01:11:20 +01:00
<label
for="search"
:class="{'opacity-0 sm:opacity-100': !searchVisible, 'opacity-100': searchVisible}"
class="absolute left-14 sm:static transition-all"
>
2022-05-17 00:22:45 +02:00
<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"
/>
2021-04-11 10:17:30 +02:00
</label>
2022-11-23 01:11:20 +01:00
<a href="#" @click.prevent="searchVisible = !searchVisible" class="relative sm:hidden w-5 h-5">
<svg-sprite
:class="{'opacity-0': searchVisible, 'opacity-100': !searchVisible}"
class="absolute transition-all text-gray-300 w-5 h-5"
src="search"
></svg-sprite>
<svg-sprite
:class="{'opacity-0': !searchVisible, 'opacity-100': searchVisible}"
class="absolute transition-all text-gray-300 w-5 h-5"
src="close"
></svg-sprite>
</a>
2021-04-11 10:17:30 +02:00
</div>
2021-04-11 02:55:26 +02:00
2022-02-10 02:18:57 +01:00
<div class="grow flex flex-col">
2021-04-11 02:55:26 +02:00
<slot></slot>
</div>
2021-04-10 19:45:11 +02:00
</div>
2020-04-10 20:32:12 +02:00
</div>
</template>
<script>
2021-04-11 00:57:47 +02:00
import VLink from './_VLink.vue';
2022-05-17 00:22:45 +02:00
import {debounce} from 'lodash';
2021-04-11 10:17:30 +02:00
import mergesQueryString from '../mixins/mergesQueryString.js';
2021-06-22 23:00:14 +02:00
2020-04-10 20:32:12 +02:00
export default {
2022-11-22 01:55:57 +01:00
data: function () {
return {
2022-11-23 01:11:20 +01:00
searchVisible: true,
2022-11-22 01:55:57 +01:00
menuVisible: true,
menuOverflowVisible: false,
};
},
2022-02-12 15:15:27 +01:00
components: {
2022-05-17 00:22:45 +02:00
VNotification: () => import('../components/VNotification.vue'),
VLink,
2022-02-12 15:15:27 +01:00
},
2022-05-17 00:22:45 +02:00
mixins: [mergesQueryString],
2021-04-11 10:17:30 +02:00
computed: {
isearch: {
2022-05-17 00:22:45 +02:00
set: debounce(function (v) {
this.$inertia.visit(this.qs({page: 1, search: v}), {
only: ['page', 'search', 'data'],
2021-04-11 10:17:30 +02:00
preserveState: true,
});
}, 500),
get() {
return this.$page.props.search;
2022-05-17 00:22:45 +02:00
},
2021-11-19 00:53:19 +01:00
},
filterMenu() {
2022-05-17 00:22:45 +02:00
return this.$page.props.toolbar ? this.$page.props.toolbar.filter((menu) => menu.show !== false) : [];
},
},
2022-11-22 01:55:57 +01:00
methods: {
menuListener() {
var x = window.matchMedia('(min-width: 1024px)');
if (x.matches && !this.menuVisible) {
this.menuVisible = true;
2022-11-23 01:11:20 +01:00
this.searchVisible = false;
2022-11-22 01:55:57 +01:00
this.menuOverflowVisible = false;
return;
}
if (!x.matches && this.menuVisible) {
this.menuVisible = false;
2022-11-23 01:11:20 +01:00
this.searchVisible = false;
2022-11-22 01:55:57 +01:00
this.menuOverflowVisible = false;
return;
}
},
},
created() {
window.addEventListener('resize', this.menuListener);
this.menuListener();
},
2020-04-10 20:32:12 +02:00
};
</script>
2021-04-11 00:57:47 +02:00
<style scoped>
.main-grid {
grid-template-columns: min-content 1fr;
display: grid;
}
</style>