silva
/
adrema
2
1
Fork 0
Code Issues 23 Pull Requests 1 Projects 1 Releases 104 Wiki Activity

Fix menu
continuous-integration/drone/push Build is passing Details

This commit is contained in:
philipp lang 2023-03-15 00:34:24 +01:00
parent 8669199b1a
commit 2299e18876
1 changed files with 10 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

51
resources/js/layouts/AppLayout.vue
View File

@ -4,7 +4,7 @@
<!-- ******************************** Sidebar ******************************** -->
<div
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"
class="fixed z-40 bg-gray-800 p-6 w-56 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),
@ -13,9 +13,7 @@
<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>
<v-link href="/contribution" menu="contribution" icon="contribution">Zuschüsse</v-link>
<v-link href="/activity" menu="activity" icon="activity">Tätigkeiten</v-link>
</div>
@ -23,36 +21,18 @@
<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"
>
<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="grow bg-gray-900 flex flex-col transition-all" :class="{'ml-56': menuVisible, 'ml-0': !menuVisible}">
<div class="h-16 px-6 flex items-center space-x-3 border-b border-gray-600">
<a href="#" @click.prevent="menuOverflowVisible = !menuOverflowVisible" class="lg:hidden">
<svg-sprite src="menu" class="text-gray-100 w-5 h-5"></svg-sprite>
</a>
<span
class="text-sm md:text-xl font-semibold text-white leading-none"
v-html="$page.props.title"
></span>
<i-link
v-for="(link, index) in filterMenu"
:key="index"
:href="link.href"
class="btn label mr-2"
:class="`btn-${link.color}`"
v-tooltip="tooltipsVisible ? link.label : ''"
>
<span class="text-sm md:text-xl font-semibold text-white leading-none" v-html="$page.props.title"></span>
<i-link v-for="(link, index) in filterMenu" :key="index" :href="link.href" class="btn label mr-2" :class="`btn-${link.color}`" v-tooltip="tooltipsVisible ? link.label : ''">
<svg-sprite v-show="link.icon" class="w-3 h-3 xl:mr-2" :src="link.icon"></svg-sprite>
<span class="hidden xl:inline" v-text="link.label"></span>
</i-link>
@ -60,11 +40,7 @@
<portal-target name="toolbar-left"> </portal-target>
<portal-target name="toolbar-right"> </portal-target>
</div>
<label
for="search"
:class="{'hidden sm:block': !searchVisible, 'block': searchVisible}"
class="absolute left-10 sm:static transition-all"
>
<label for="search" :class="{'hidden sm:block': !searchVisible, 'block': searchVisible}" class="absolute left-10 sm:static transition-all">
<input
class="shadow-lg bg-gray-800 rounded-lg py-2 px-3 h-10 text-gray-300 hover:bg-gray-700 focus:bg-gray-700 placeholder-gray-400"
placeholder="Suchen…"
@ -73,16 +49,8 @@
/>
</label>
<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>
<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>
</div>
@ -135,6 +103,7 @@ export default {
var x = window.matchMedia('(min-width: 1024px)');
if (x.matches && !this.menuVisible) {
console.log('A');
this.menuVisible = true;
this.searchVisible = false;
this.menuOverflowVisible = false;