add auth modal

src/components/TopBar.vue

@@ -1,5 +1,7 @@
 <script setup lang="ts">
 import { addNote, setActiveNote, rootNote } from '@/composables/useNotes'
+import Auth from '@/components/Auth.vue'
+
 const props = defineProps<{
   sideBarCollapsed: boolean
 }>()
@@ -7,14 +9,17 @@ const props = defineProps<{
 const emit = defineEmits<{
   toggleSideBar: []
 }>()
+
+// const authRef = ref<InstanceType<typeof Auth> | null>(null)
+// const closeAuthModal = (close: () => void) => {
+//   close()
+//   authRef.value?.deleteAuthUi()
+// }
 </script>
 <template>
   <div class="fixed left-0 right-0 top-0 z-[500] flex h-[50px] bg-primary">
     <div class="mx-auto flex w-full max-w-app items-center py-2.5 text-white">
-      <div
-        class="flex items-center pl-3"
-        :class="sideBarCollapsed ? 'w-fit' : 'w-sidebar pr-3'"
-      >
+      <div class="flex items-center pl-3" :class="sideBarCollapsed ? 'w-fit' : 'w-sidebar pr-3'">
         <Hamburger
           :side-bar-collapsed="props.sideBarCollapsed"
           @toggle-side-bar="emit('toggleSideBar')"
@@ -33,7 +38,15 @@ const emit = defineEmits<{
         >
           <i class="fas fa-plus-circle text-[1.1rem]" />
         </button>
-        <button class="btn-outline btn-sm btn py-1 text-white">Sign in</button>
+        <Modal>
+          <template #activator="{ open }">
+            <button class="btn-outline btn-sm btn py-1 text-white" @click="open">Sign in</button>
+          </template>
+          <template #default><Auth /></template>
+          <template #actions="{ close }">
+            <button class="btn-sm btn" @click="close()">Close</button>
+          </template>
+        </Modal>
       </div>
     </div>
   </div>