feat: replace nuxt icons with unocss icons
This commit is contained in:
@@ -43,7 +43,7 @@ useClickOutside(dropdownRef, () => {
|
||||
<div
|
||||
:class="['w-[28px] h-[28px] flex-shrink-0 rounded-lg overflow-hidden bg-[var(--bg-surface)] flex items-center justify-center', user?.image ? '' : 'border border-[var(--color-border)]']">
|
||||
<img v-if="cachedUser?.image" :src="cachedUser.image" class="w-full h-full object-cover" />
|
||||
<Icon v-else name="mynaui:user" class="w-4 h-4 text-[var(--text-secondary)]" />
|
||||
<span v-else class="i-mynaui-user text-4 text-[var(--text-secondary)]"></span>
|
||||
</div>
|
||||
<span
|
||||
class="text-sm font-medium text-ellipsis overflow-hidden text-[var(--text-primary)] whitespace-nowrap">
|
||||
@@ -52,8 +52,8 @@ useClickOutside(dropdownRef, () => {
|
||||
<div :class="['transform-origin-left-center flex-shrink-0 w-4 h-4 text-[var(--text-secondary)] transition-all duration-200 ease-[cubic-bezier(0.5,_1,_0.89,_1)] overflow-hidden transform-origin-center-left',
|
||||
isHovered ? 'opacity-100 scale-100' : 'opacity-0 scale-40'
|
||||
]">
|
||||
<Icon class="text-4 transition-transform duration-250 ease-in-out"
|
||||
:class="dropdownOpen ? 'rotate-180' : ''" name="mynaui:chevron-down" />
|
||||
<span class="i-mynaui-chevron-down inline-block text-4 transition-transform duration-250 ease-in-out"
|
||||
:class="dropdownOpen ? 'rotate-180' : ''"></span>
|
||||
</div>
|
||||
</button>
|
||||
|
||||
@@ -65,28 +65,16 @@ useClickOutside(dropdownRef, () => {
|
||||
class="w-full top-full text-sm mt-1 absolute z-50 bg-[var(--bg-surface)] border border-[var(--color-border)] rounded-xl p-1.5 flex flex-col gap-2">
|
||||
<button @click="dropdownOpen = false; toggleSettings()"
|
||||
class="text-left px-3 py-1.5 items-center gap-1 hover:bg-[var(--color-hover)] rounded-lg transition-colors duration-200 ease-[cubic-bezier(0.5,_1,_0.89,_1)]">
|
||||
<Icon name="mynaui:cog-four" class="text-4.5" />
|
||||
<span class="i-mynaui-cog-four text-4.5"></span>
|
||||
<span>Settings</span>
|
||||
</button>
|
||||
<hr class="border-t border-[var(--color-border)]" />
|
||||
<button @click="handleLogout"
|
||||
class="text-left px-3 py-1.5 items-center gap-1 hover:bg-[var(--color-hover)] rounded-lg transition-colors duration-200 ease-[cubic-bezier(0.5,_1,_0.89,_1)]">
|
||||
<Icon name="mynaui:logout" class="text-4.5" />
|
||||
<span class="i-mynaui-logout text-4.5"></span>
|
||||
<span>Log out</span>
|
||||
</button>
|
||||
</div>
|
||||
</Transition>
|
||||
|
||||
|
||||
<!-- <Dropdown class="overflow-hidden" v-model="profileOpen" :items="profileItems" placement="left"
|
||||
verticality="descending" width="100%">
|
||||
<template #trigger="{ toggle }">
|
||||
<button aria-label="open user dropdown"
|
||||
class="flex items-center gap-1.5 pr-2 rounded-xl hover:bg-[var(--color-hover)] focus-visible:bg-[var(--color-hover)] cursor-pointer transition-colors max-w-full"
|
||||
@click="toggle">
|
||||
|
||||
</button>
|
||||
</template>
|
||||
</Dropdown> -->
|
||||
</header>
|
||||
</template>
|
||||
Reference in New Issue
Block a user