Add logout button

resources/img/svg/logout.svg

@@ -0,0 +1,13 @@
+<?xml version="1.0" ?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
+	<g>
+		<g>
+			<path d="M255.15,468.625H63.787c-11.737,0-21.262-9.526-21.262-21.262V64.638c0-11.737,9.526-21.262,21.262-21.262H255.15    c11.758,0,21.262-9.504,21.262-21.262S266.908,0.85,255.15,0.85H63.787C28.619,0.85,0,29.47,0,64.638v382.724    c0,35.168,28.619,63.787,63.787,63.787H255.15c11.758,0,21.262-9.504,21.262-21.262    C276.412,478.129,266.908,468.625,255.15,468.625z"/>
+		</g>
+	</g>
+	<g>
+		<g>
+			<path d="M505.664,240.861L376.388,113.286c-8.335-8.25-21.815-8.143-30.065,0.213s-8.165,21.815,0.213,30.065l92.385,91.173    H191.362c-11.758,0-21.262,9.504-21.262,21.262c0,11.758,9.504,21.263,21.262,21.263h247.559l-92.385,91.173    c-8.377,8.25-8.441,21.709-0.213,30.065c4.167,4.21,9.653,6.336,15.139,6.336c5.401,0,10.801-2.041,14.926-6.124l129.276-127.575    c4.04-3.997,6.336-9.441,6.336-15.139C512,250.302,509.725,244.88,505.664,240.861z"/>
+		</g>
+	</g>
+</svg>

resources/js/layouts/AppLayout.vue

@@ -1,14 +1,20 @@
 <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">
+        <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"
+        >
             <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
+                >
+            </div>
+            <div class="grid gap-2">
+                <v-link method="POST" icon="logout" href="/logout">Abmelden</v-link>
             </div>
         </div>
 
@@ -17,13 +23,25 @@
                 <div class="flex">
                     <span class="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" v-text="link.label" class="btn label mr-2" :class="`btn-${link.color}`">
+                        <i-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}`"
+                        >
                             <svg-sprite :src="link.icon"></svg-sprite>
                         </i-link>
                     </div>
                 </div>
                 <label for="search">
-                    <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" />
+                    <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>
 
@@ -31,7 +49,6 @@
                 <slot></slot>
             </div>
         </div>
-
     </div>
 </template>
 
@@ -42,8 +59,8 @@ import mergesQueryString from '../mixins/mergesQueryString.js';
 
 export default {
     components: {
-        'VNotification': () => import('../components/VNotification.vue'),
+        VNotification: () => import('../components/VNotification.vue'),
-        VLink
+        VLink,
     },
     mixins: [mergesQueryString],
 
@@ -57,15 +74,12 @@ export default {
             }, 500),
             get() {
                 return this.$page.props.search;
-            }
+            },
         },
         filterMenu() {
-            return this.$page.props.toolbar
+            return this.$page.props.toolbar ? this.$page.props.toolbar.filter((menu) => menu.show !== false) : [];
-                ? this.$page.props.toolbar.filter(menu => menu.show !== false):
+        },
-                [];
+    },
-        }
-    }
-
 };
 </script>
 

resources/js/layouts/_VLink.vue

@@ -1,5 +1,10 @@
 <template>
-    <i-link class="flex text-white py-2 px-3 rounded-lg hover:bg-gray-600" :href="href" :class="{'bg-gray-700': $page.props.menu == menu}">
+    <i-link
+        class="flex text-white py-2 px-3 rounded-lg hover:bg-gray-600"
+        :method="method"
+        :href="href"
+        :class="{'bg-gray-700': $page.props.menu == menu}"
+    >
         <svg-sprite class="text-white w-6 h-6 mr-4" :src="icon"></svg-sprite>
         <span class="font-semibold">
             <slot></slot>
@@ -13,6 +18,9 @@ export default {
         href: {},
         icon: {},
         menu: {},
-    }
+        method: {
+            default: 'GET',
+        },
+    },
 };
 </script>