Fix menu

resources/js/layouts/AppLayout.vue

@@ -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"
+                <v-link href="/subscription" v-show="hasModule('bill')" menu="subscription" icon="money">Beiträge</v-link>
-                    >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
+            <a href="#" @click.prevent="menuOverflowVisible = false" v-if="menuOverflowVisible && !menuVisible" class="absolute right-0 top-0 mr-2 mt-2">
-                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
+        <div class="grow bg-gray-900 flex flex-col transition-all" :class="{'ml-56': menuVisible, 'ml-0': !menuVisible}">
-            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
+                <span class="text-sm md:text-xl font-semibold text-white leading-none" v-html="$page.props.title"></span>
-                    class="text-sm md:text-xl font-semibold text-white leading-none"
+                <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 : ''">
-                    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
+                <label for="search" :class="{'hidden sm:block': !searchVisible, 'block': searchVisible}" class="absolute left-10 sm:static transition-all">
-                    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
+                    <svg-sprite :class="{'opacity-0': searchVisible, 'opacity-100': !searchVisible}" class="absolute transition-all text-gray-300 w-5 h-5" src="search"></svg-sprite>
-                        :class="{'opacity-0': searchVisible, 'opacity-100': !searchVisible}"
+                    <svg-sprite :class="{'opacity-0': !searchVisible, 'opacity-100': searchVisible}" class="absolute transition-all text-gray-300 w-5 h-5" src="close"></svg-sprite>
-                        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;