initial commit

2026-01-11 05:04:29 -06:00
commit 0877cc10bd
65 changed files with 5009 additions and 0 deletions
@@ -0,0 +1,51 @@
+<script setup lang="ts">
+const { user, signOut } = useAuth()
+const { toggle: toggleSettings } = useSettings()
+const profileRef = ref<HTMLElement | null>(null)
+const profileOpen = ref(false)
+
+const hovering = defineModel<boolean>({ required: true })
+
+const toggleProfile = () => {
+    profileOpen.value = !profileOpen.value
+}
+
+const handleLogout = async () => {
+    await signOut()
+    profileOpen.value = false
+}
+
+useClickOutside(profileRef, () => {
+    profileOpen.value = false
+})
+</script>
+
+<template>
+    <header class="flex items-center justify-between overflow-hidden">
+        <div role="button" aria-label="open user dropdown" ref="profileRef"
+            class="flex items-center gap-1.5 pr-2 rounded-xl hover:bg-[var(--color-highlight)] cursor-pointer transition-colors max-w-full"
+            @click="toggleProfile">
+            <div
+                :class="['w-[28px] h-[28px] flex-shrink-0 rounded-lg overflow-hidden bg-[var(--color-neutral)] flex items-center justify-center', user?.image ? '' : 'border border-[var(--color-highlight-high)]']">
+                <img v-if="user?.image" :src="user.image" class="w-full h-full object-cover" />
+                <Icon v-else name="mynaui:user" class="w-4 h-4 text-[var(--color-subtle)]" />
+            </div>
+            <span
+                class="text-sm font-medium text-ellipsis overflow-hidden text-[var(--color-text)] whitespace-nowrap">{{
+                    user!.name
+                }}</span>
+            <div :class="['flex-shrink-0 w-4 h-4 text-[var(--color-subtle)] transition-all duration-200 ease-[cubic-bezier(0.5,_1,_0.89,_1)] overflow-hidden transform-origin-center-left',
+                hovering ? 'opacity-100 scale-100' : 'opacity-0 scale-x-0 scale-y-90'
+            ]">
+                <Icon class="text-4" name="mynaui:chevron-down" />
+            </div>
+        </div>
+
+        <!-- Profile Dropdown -->
+        <div v-show="profileOpen"
+            class="absolute top-full left-0 right-0 z-50 mt-1.5 bg-[var(--color-neutral)] border border-[var(--color-highlight)] rounded-xl p-2 w-full gap-1 flex flex-col text-[var(--color-text)]">
+            <SidenavItem @click="toggleSettings(); profileOpen = false" name="Settings" icon="mynaui:cog-four" />
+            <SidenavItem @click="handleLogout" name="Log out" icon="mynaui:logout" />
+        </div>
+    </header>
+</template>