Create button in Navigation component for logging out

range-of-motion · Nov 2, 2023 · 7aeaa7f · 7aeaa7f
1 parent 3e2981b
commit 7aeaa7f
Showing 1 changed file with 15 additions and 4 deletions.
diff --git 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>