From 83ffefe02cf8dfff5e86322bf3a0993bcad043f7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Dani=C3=ABl=20van=20Drunen?= <daniel@pixely.me>
Date: Thu, 2 Nov 2023 16:41:59 +0100
Subject: [PATCH] Create button in Navigation component for logging out

---
 .../js/prototype/components/Navigation.vue    | 19 +++++++++++++++----
 1 file changed, 15 insertions(+), 4 deletions(-)

diff --git a/resources/assets/js/prototype/components/Navigation.vue b/resources/assets/js/prototype/components/Navigation.vue
index a9033b51..fa429677 100644
--- a/resources/assets/js/prototype/components/Navigation.vue
+++ b/resources/assets/js/prototype/components/Navigation.vue
@@ -1,13 +1,24 @@
 <script setup>
-//
+import { getCurrentInstance } from 'vue';
+
+const router = getCurrentInstance().proxy.$router;
+
+const logOut = () => {
+    localStorage.removeItem('api_key');
+
+    router.push('login');
+};
 </script>
 
 <template>
     <div class="py-4 border-b border-gray-100">
         <div class="max-w-5xl mx-auto">
-            <div class="flex space-x-4">
-                <router-link class="py-2 px-3 block text-gray-700 rounded-md hover:bg-gray-100 hover:text-black" :to="{ name: 'dashboard' }">Dashboard</router-link>
-                <router-link class="py-2 px-3 block text-gray-700 rounded-md hover:bg-gray-100 hover:text-black" :to="{ name: 'transactions.index' }">Transactions</router-link>
+            <div class="flex justify-between">
+                <div class="flex space-x-4">
+                    <router-link class="py-2 px-3 block text-gray-700 rounded-md hover:bg-gray-100 hover:text-black" :to="{ name: 'dashboard' }">Dashboard</router-link>
+                    <router-link class="py-2 px-3 block text-gray-700 rounded-md hover:bg-gray-100 hover:text-black" :to="{ name: 'transactions.index' }">Transactions</router-link>
+                </div>
+                <button class="py-2 px-3 block text-gray-700 rounded-md hover:bg-gray-100 hover:text-black" @click="logOut()">Log out</button>
             </div>
         </div>
     </div>