From fa016fd7ab68f400cfe5130dcb87c4f598a9b853 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aron=20Sch=C3=BCler?= <aron.schueler@ambient.digital>
Date: Fri, 26 Jan 2024 17:28:49 +0100
Subject: [PATCH] feat: add signout to mobile

---
 src/components/TopBar.vue   | 12 ++----------
 src/components/UserMenu.vue | 16 +++++++++++++++-
 src/components/user.ts      |  5 +++++
 3 files changed, 22 insertions(+), 11 deletions(-)

diff --git a/src/components/TopBar.vue b/src/components/TopBar.vue
index 6bb2a59..e5fefb9 100644
--- a/src/components/TopBar.vue
+++ b/src/components/TopBar.vue
@@ -2,19 +2,11 @@
 import { Disclosure, DisclosureButton, DisclosurePanel } from "@headlessui/vue";
 import { MagnifyingGlassIcon, UserCircleIcon } from "@heroicons/vue/20/solid";
 import { Bars3Icon, BellIcon, XMarkIcon } from "@heroicons/vue/24/outline";
-import { getAuth } from "firebase/auth";
 
-import { app } from "@/firebase";
-
-import { userNavigation, useUser } from "./user";
+import { signOut, userNavigation, useUser } from "./user";
 import UserMenu from "./UserMenu.vue";
 
 const { user } = useUser();
-
-const signOut = async () => {
-  const auth = getAuth(app);
-  await auth.signOut();
-};
 </script>
 
 <template>
@@ -27,7 +19,7 @@ const signOut = async () => {
       <div
         class="relative flex h-16 items-center justify-between lg:border-b lg:border-indigo-400 lg:border-opacity-25"
       >
-        <router-link to="/" class="flex items-center px-2 lg:px-0">
+        <router-link to="/" class="flex items-center gap-2 px-2 lg:px-0">
           <div class="flex-shrink-0">
             <img class="block h-8 w-8" src="/icon.svg" alt="Your Company" />
           </div>
diff --git a/src/components/UserMenu.vue b/src/components/UserMenu.vue
index fd55c76..c2d3d94 100644
--- a/src/components/UserMenu.vue
+++ b/src/components/UserMenu.vue
@@ -2,7 +2,7 @@
 import { Menu, MenuButton, MenuItem, MenuItems } from "@headlessui/vue";
 import { BellIcon, UserCircleIcon } from "@heroicons/vue/20/solid";
 
-import { userNavigation, useUser } from "./user";
+import { signOut, userNavigation, useUser } from "./user";
 const { user, isLoggedIn } = useUser();
 </script>
 
@@ -70,6 +70,20 @@ const { user, isLoggedIn } = useUser();
                 >{{ item.name }}</a
               >
             </MenuItem>
+
+            <MenuItem v-slot="{ active }">
+              <button
+                type="button"
+                class="w-full text-left"
+                :class="[
+                  active ? 'bg-gray-100' : '',
+                  'block px-4 py-2 text-sm text-gray-700',
+                ]"
+                @click="signOut"
+              >
+                Sign out
+              </button>
+            </MenuItem>
           </MenuItems>
         </transition>
       </Menu>
diff --git a/src/components/user.ts b/src/components/user.ts
index dc51201..860ea63 100644
--- a/src/components/user.ts
+++ b/src/components/user.ts
@@ -41,3 +41,8 @@ export const logInWithFirebase: (
     return Promise.reject(error);
   }
 };
+
+export const signOut = async () => {
+  const auth = getAuth(app);
+  await auth.signOut();
+};