Create button in Navigation component for logging out

Author: range-of-motion

Diff for: resources/assets/js/prototype/components/Navigation.vue

@@ -1,10 +1,19 @@
 <script setup>
-import { ArrowRightLeft, Home } from 'lucide-vue';
+import { ArrowRightLeft, Home, LogOut } from 'lucide-vue';
+import { getCurrentInstance } from 'vue';
+
+const router = getCurrentInstance().proxy.$router;
+
+const logOut = () => {
+    localStorage.removeItem('api_key');
+
+    router.push('login');
+};
 </script>
 
 <template>
     <div class="flex items-center h-16 bg-white border-b border-gray-200">
-        <div class="mx-auto flex-1 max-w-5xl">
+        <div class="mx-auto flex-1 flex items-center justify-between max-w-5xl">
             <div class="flex space-x-4">
                 <router-link class="flex items-center py-1 px-3 text-gray-500 hover:text-black" :to="{ name: 'dashboard' }">
                     <Home :size="16" />
@@ -15,6 +24,11 @@ import { ArrowRightLeft, Home } from 'lucide-vue';
                     <span class="ml-2 text-sm">Transactions</span>
                 </router-link>
             </div>
+            <div>
+                <button class="flex py-1 px-3 text-gray-500 hover:text-black" @click="logOut()">
+                    <LogOut :size="16" />
+                </button>
+            </div>
         </div>
     </div>
 </template>