adrema/resources/js/layouts/AppLayout.vue

78 lines
2.7 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">
2021-04-11 00:57:47 +02:00
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 ******************************** -->
<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="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>
<v-link href="/subscription" v-show="hasModule('bill')" menu="subscription" icon="money">Beiträge</v-link>
2021-04-11 00:57:47 +02:00
</div>
</div>
2022-02-10 02:18:57 +01:00
<div class="grow ml-56 bg-gray-900 flex flex-col">
2021-07-04 16:56:07 +02:00
<div class="h-16 px-6 flex justify-between items-center border-b border-gray-600">
2021-06-22 00:14:34 +02:00
<div class="flex">
2021-07-05 00:35:38 +02:00
<span class="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-01-02 12:50:25 +01:00
<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}`">
2022-02-12 15:22:22 +01:00
<svg-sprite :src="link.icon"></svg-sprite>
2022-01-02 12:50:25 +01:00
</Link>
2021-06-22 00:14:34 +02:00
</div>
</div>
2021-04-11 10:17:30 +02:00
<label for="search">
2022-02-12 15:12:08 +01: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>
</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>
2021-04-11 00:57:47 +02:00
2020-04-10 20:32:12 +02:00
</div>
</template>
<script>
2021-04-11 00:57:47 +02:00
import VLink from './_VLink.vue';
2021-04-11 10:17:30 +02:00
import { debounce } from 'lodash';
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-02-12 15:15:27 +01:00
components: {
'VNotification': () => import('../components/VNotification.vue'),
VLink
},
2021-04-11 10:17:30 +02:00
mixins: [ mergesQueryString ],
computed: {
isearch: {
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;
}
2021-11-19 00:53:19 +01:00
},
filterMenu() {
return this.$page.props.toolbar
? this.$page.props.toolbar.filter(menu => menu.show !== false):
[];
2021-04-11 10:17:30 +02:00
}
}
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>