From f4f84b236980497ccb71d46cfe1ee74b4318d075 Mon Sep 17 00:00:00 2001
From: philipp lang <philipp@aweos.de>
Date: Tue, 17 May 2022 00:22:45 +0200
Subject: [PATCH] Add logout button

---
 resources/img/svg/logout.svg       | 13 ++++++++
 resources/js/layouts/AppLayout.vue | 52 +++++++++++++++++++-----------
 resources/js/layouts/_VLink.vue    | 12 +++++--
 3 files changed, 56 insertions(+), 21 deletions(-)
 create mode 100644 resources/img/svg/logout.svg

diff --git a/resources/img/svg/logout.svg b/resources/img/svg/logout.svg
new file mode 100644
index 00000000..ed9a5363
--- /dev/null
+++ b/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>
diff --git a/resources/js/layouts/AppLayout.vue b/resources/js/layouts/AppLayout.vue
index 72e605ee..3a38850b 100644
--- a/resources/js/layouts/AppLayout.vue
+++ b/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,41 +49,37 @@
                 <slot></slot>
             </div>
         </div>
-
     </div>
 </template>
 
 <script>
 import VLink from './_VLink.vue';
-import { debounce } from 'lodash';
+import {debounce} from 'lodash';
 import mergesQueryString from '../mixins/mergesQueryString.js';
 
 export default {
     components: {
-        'VNotification': () => import('../components/VNotification.vue'),
-        VLink
+        VNotification: () => import('../components/VNotification.vue'),
+        VLink,
     },
-    mixins: [ mergesQueryString ],
+    mixins: [mergesQueryString],
 
     computed: {
         isearch: {
-            set: debounce(function(v) {
-                this.$inertia.visit(this.qs({ page: 1, search: v }), {
+            set: debounce(function (v) {
+                this.$inertia.visit(this.qs({page: 1, search: v}), {
                     only: ['page', 'search', 'data'],
                     preserveState: true,
                 });
             }, 500),
             get() {
                 return this.$page.props.search;
-            }
+            },
         },
         filterMenu() {
-            return this.$page.props.toolbar
-                ? this.$page.props.toolbar.filter(menu => menu.show !== false):
-                [];
-        }
-    }
-
+            return this.$page.props.toolbar ? this.$page.props.toolbar.filter((menu) => menu.show !== false) : [];
+        },
+    },
 };
 </script>
 
diff --git a/resources/js/layouts/_VLink.vue b/resources/js/layouts/_VLink.vue
index 10ff7757..5350a715 100644
--- a/resources/js/layouts/_VLink.vue
+++ b/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>