7c995edcc2
- Replace inline filter buttons in desktop header with a single "Algos" dropdown that shows all discovery algorithms in a glass menu with checkmark for the active selection and a clear option - Button label dynamically shows the active algorithm name or defaults to "Algos" when no filter is active - Rename mobile tab bar "Filters" to "Algos" with a gear icon - Rename bottom sheet title to "Algos" to match Co-authored-by: Cursor <cursoragent@cursor.com>
574 lines
19 KiB
Vue
574 lines
19 KiB
Vue
<template>
|
|
<header class="fixed top-0 left-0 right-0 z-50 pt-4 px-4">
|
|
<div class="floating-glass-header mx-auto px-4 md:px-6 py-3.5 rounded-2xl transition-all duration-300" style="max-width: 100%;">
|
|
<div class="flex items-center justify-between">
|
|
<!-- Logo + Navigation (Left Side) -->
|
|
<div class="flex items-center gap-10">
|
|
<router-link to="/">
|
|
<img src="/assets/images/logo-desktop.svg" alt="IndeeHub" class="h-8 md:h-10 ml-2 md:ml-0" />
|
|
</router-link>
|
|
|
|
<!-- Navigation - Desktop -->
|
|
<nav v-if="showNav" class="hidden md:flex items-center gap-3">
|
|
<button @click="handleFilmsClick" :class="isRoute('/') && !activeAlgorithm ? 'nav-button-active' : 'nav-button'">Films</button>
|
|
<router-link to="/library" :class="isRoute('/library') && !activeAlgorithm ? 'nav-button-active' : 'nav-button'" @click="clearFilter">My List</router-link>
|
|
|
|
<!-- Algos Dropdown -->
|
|
<div class="relative algos-dropdown">
|
|
<button
|
|
@click="toggleAlgosMenu"
|
|
:class="activeAlgorithm ? 'nav-button-active' : 'nav-button'"
|
|
>
|
|
{{ activeAlgorithmLabel || 'Algos' }}
|
|
<svg class="w-3.5 h-3.5 ml-1.5 inline transition-transform" :class="{ 'rotate-180': algosMenuOpen }" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
|
|
</svg>
|
|
</button>
|
|
<div v-if="algosMenuOpen" class="profile-menu absolute left-0 mt-2 w-52">
|
|
<div class="floating-glass-header py-2 rounded-xl">
|
|
<div class="px-3 py-1 text-xs text-white/40 uppercase tracking-wider">Discovery Algorithms</div>
|
|
<button
|
|
v-for="algo in algorithms"
|
|
:key="algo.id"
|
|
@click="handleAlgoSelect(algo.id)"
|
|
class="profile-menu-item flex items-center justify-between px-4 py-2.5 w-full text-left"
|
|
>
|
|
<span>{{ algo.label }}</span>
|
|
<svg
|
|
v-if="activeAlgorithm === algo.id"
|
|
class="w-4 h-4 text-white/80"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
viewBox="0 0 24 24"
|
|
>
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
|
|
</svg>
|
|
</button>
|
|
<template v-if="activeAlgorithm">
|
|
<div class="border-t border-white/10 my-1"></div>
|
|
<button
|
|
@click="handleAlgoClear"
|
|
class="profile-menu-item flex items-center gap-3 px-4 py-2.5 text-white/50 w-full text-left text-sm"
|
|
>
|
|
Clear filter
|
|
</button>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
</div>
|
|
|
|
<!-- Right Side Actions -->
|
|
<div class="flex items-center gap-4">
|
|
<!-- Nostr Login (persona switcher or extension) -->
|
|
<div v-if="!nostrLoggedIn" class="hidden md:flex items-center gap-2">
|
|
<!-- Persona Switcher (dev) -->
|
|
<div class="relative persona-dropdown">
|
|
<button @click="togglePersonaMenu" class="nav-button px-3 py-2 text-xs">
|
|
Persona
|
|
<svg class="w-3 h-3 ml-1 inline" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
|
|
</svg>
|
|
</button>
|
|
<div v-if="personaMenuOpen" class="profile-menu absolute right-0 mt-2 w-52">
|
|
<div class="floating-glass-header py-2 rounded-xl">
|
|
<div class="px-3 py-1 text-xs text-white/40 uppercase tracking-wider">Test Personas</div>
|
|
<button
|
|
v-for="persona in testPersonas"
|
|
:key="persona.pubkey"
|
|
@click="handlePersonaLogin(persona)"
|
|
class="profile-menu-item flex items-center gap-3 px-4 py-2 w-full text-left"
|
|
>
|
|
<img :src="`https://robohash.org/${persona.pubkey}.png`" class="w-6 h-6 rounded-full" :alt="persona.name" />
|
|
<span>{{ persona.name }}</span>
|
|
</button>
|
|
<div class="border-t border-white/10 my-1"></div>
|
|
<div class="px-3 py-1 text-xs text-white/40 uppercase tracking-wider">Tastemakers</div>
|
|
<button
|
|
v-for="persona in tastemakerPersonas"
|
|
:key="persona.pubkey"
|
|
@click="handlePersonaLogin(persona)"
|
|
class="profile-menu-item flex items-center gap-3 px-4 py-2 w-full text-left"
|
|
>
|
|
<img :src="`https://robohash.org/${persona.pubkey}.png`" class="w-6 h-6 rounded-full" :alt="persona.name" />
|
|
<span>{{ persona.name }}</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Extension Login -->
|
|
<button @click="handleExtensionLogin" class="nav-button px-3 py-2 text-xs">
|
|
Extension
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Sign In (app auth, if not Nostr logged in) -->
|
|
<button
|
|
v-if="!isAuthenticated && showAuth && !nostrLoggedIn"
|
|
@click="$emit('openAuth')"
|
|
class="hidden md:block hero-play-button px-4 py-2 text-sm"
|
|
>
|
|
Sign In
|
|
</button>
|
|
|
|
<!-- Search -->
|
|
<button v-if="showSearch" class="hidden md:block p-2 hover:bg-white/10 rounded-lg transition-colors">
|
|
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
|
|
</svg>
|
|
</button>
|
|
|
|
<!-- Active Nostr Account -->
|
|
<div v-if="nostrLoggedIn" class="hidden md:block relative profile-dropdown">
|
|
<button
|
|
@click="toggleDropdown"
|
|
class="profile-button flex items-center gap-2"
|
|
>
|
|
<img
|
|
v-if="nostrActivePubkey"
|
|
:src="`https://robohash.org/${nostrActivePubkey}.png`"
|
|
class="w-8 h-8 rounded-full"
|
|
alt="Avatar"
|
|
/>
|
|
<span class="text-white text-sm font-medium">{{ nostrActiveName }}</span>
|
|
<svg class="w-4 h-4 transition-transform" :class="{ 'rotate-180': dropdownOpen }" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
|
|
</svg>
|
|
</button>
|
|
|
|
<div v-if="dropdownOpen" class="profile-menu absolute right-0 mt-2 w-48">
|
|
<div class="floating-glass-header py-2 rounded-xl">
|
|
<button @click="navigateTo('/profile')" class="profile-menu-item flex items-center gap-3 px-4 py-2.5 w-full text-left">
|
|
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
|
|
</svg>
|
|
<span>Profile</span>
|
|
</button>
|
|
<button @click="navigateTo('/library')" class="profile-menu-item flex items-center gap-3 px-4 py-2.5 w-full text-left">
|
|
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10" />
|
|
</svg>
|
|
<span>My Library</span>
|
|
</button>
|
|
<div class="border-t border-white/10 my-1"></div>
|
|
<button @click="handleLogout" class="profile-menu-item flex items-center gap-3 px-4 py-2.5 text-red-400 w-full text-left">
|
|
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1" />
|
|
</svg>
|
|
<span>Sign Out</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Fallback: App-auth profile (when Nostr not logged in but app auth is) -->
|
|
<div v-else-if="isAuthenticated" class="hidden md:block relative profile-dropdown">
|
|
<button @click="toggleDropdown" class="profile-button flex items-center gap-2">
|
|
<div class="w-8 h-8 rounded-full bg-gradient-to-br from-orange-500 to-pink-500 flex items-center justify-center text-xs font-bold text-white">
|
|
{{ userInitials }}
|
|
</div>
|
|
<span class="text-white text-sm font-medium">{{ userName }}</span>
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Mobile -->
|
|
<div class="md:hidden flex items-center gap-2 mr-2">
|
|
<img
|
|
v-if="nostrLoggedIn && nostrActivePubkey"
|
|
:src="`https://robohash.org/${nostrActivePubkey}.png`"
|
|
class="w-7 h-7 rounded-full"
|
|
alt="Avatar"
|
|
/>
|
|
<span v-if="nostrLoggedIn" class="text-white text-sm font-medium">{{ nostrActiveName }}</span>
|
|
<template v-else-if="isAuthenticated">
|
|
<div class="w-7 h-7 rounded-full bg-gradient-to-br from-orange-500 to-pink-500 flex items-center justify-center text-xs font-bold text-white">
|
|
{{ userInitials }}
|
|
</div>
|
|
<span class="text-white text-sm font-medium">{{ userName }}</span>
|
|
</template>
|
|
<button v-else-if="showAuth" @click="$emit('openAuth')" class="text-white text-sm font-medium">Sign In</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref, computed, onMounted, onUnmounted } from 'vue'
|
|
import { useRouter, useRoute } from 'vue-router'
|
|
import { useAuth } from '../composables/useAuth'
|
|
import { useAccounts } from '../composables/useAccounts'
|
|
import { useContentDiscovery } from '../composables/useContentDiscovery'
|
|
|
|
type Persona = { name: string; nsec: string; pubkey: string }
|
|
|
|
interface Props {
|
|
showNav?: boolean
|
|
showSearch?: boolean
|
|
showAuth?: boolean
|
|
}
|
|
|
|
interface Emits {
|
|
(e: 'openAuth'): void
|
|
}
|
|
|
|
withDefaults(defineProps<Props>(), {
|
|
showNav: true,
|
|
showSearch: true,
|
|
showAuth: true,
|
|
})
|
|
|
|
defineEmits<Emits>()
|
|
|
|
const router = useRouter()
|
|
const route = useRoute()
|
|
const { user, isAuthenticated, logout: appLogout } = useAuth()
|
|
const {
|
|
isLoggedIn: nostrLoggedIn,
|
|
activePubkey: nostrActivePubkey,
|
|
activeName: nostrActiveName,
|
|
testPersonas,
|
|
tastemakerPersonas,
|
|
loginWithExtension,
|
|
loginWithPersona,
|
|
logout: nostrLogout,
|
|
} = useAccounts()
|
|
|
|
const {
|
|
activeAlgorithm,
|
|
activeAlgorithmLabel,
|
|
algorithms,
|
|
setAlgorithm: _setAlgorithm,
|
|
} = useContentDiscovery()
|
|
|
|
const dropdownOpen = ref(false)
|
|
const personaMenuOpen = ref(false)
|
|
const algosMenuOpen = ref(false)
|
|
|
|
function toggleAlgosMenu() {
|
|
algosMenuOpen.value = !algosMenuOpen.value
|
|
dropdownOpen.value = false
|
|
personaMenuOpen.value = false
|
|
}
|
|
|
|
/** Select an algorithm from the dropdown, navigate to Films if needed */
|
|
function handleAlgoSelect(id: string) {
|
|
_setAlgorithm(id as any)
|
|
algosMenuOpen.value = false
|
|
if (route.path !== '/') {
|
|
router.push('/')
|
|
}
|
|
}
|
|
|
|
/** Clear the active filter from the dropdown */
|
|
function handleAlgoClear() {
|
|
if (activeAlgorithm.value) {
|
|
_setAlgorithm(activeAlgorithm.value as any) // toggle off
|
|
}
|
|
algosMenuOpen.value = false
|
|
}
|
|
|
|
const userInitials = computed(() => {
|
|
if (nostrActiveName.value) return nostrActiveName.value[0].toUpperCase()
|
|
if (!user.value?.legalName) return 'U'
|
|
const names = user.value.legalName.split(' ')
|
|
return names.length > 1
|
|
? `${names[0][0]}${names[names.length - 1][0]}`
|
|
: names[0][0]
|
|
})
|
|
|
|
const userName = computed(() => {
|
|
if (nostrActiveName.value) return nostrActiveName.value
|
|
return user.value?.legalName?.split(' ')[0] || 'Guest'
|
|
})
|
|
|
|
function isRoute(path: string): boolean {
|
|
return route.path === path
|
|
}
|
|
|
|
/** Navigate to Films and clear any active filter */
|
|
function handleFilmsClick() {
|
|
if (activeAlgorithm.value) {
|
|
_setAlgorithm(activeAlgorithm.value as any) // toggle off
|
|
}
|
|
if (route.path !== '/') {
|
|
router.push('/')
|
|
}
|
|
}
|
|
|
|
/** Clear active filter (used when navigating to My List) */
|
|
function clearFilter() {
|
|
if (activeAlgorithm.value) {
|
|
_setAlgorithm(activeAlgorithm.value as any) // toggle off
|
|
}
|
|
}
|
|
|
|
function toggleDropdown() {
|
|
dropdownOpen.value = !dropdownOpen.value
|
|
personaMenuOpen.value = false
|
|
algosMenuOpen.value = false
|
|
}
|
|
|
|
function togglePersonaMenu() {
|
|
personaMenuOpen.value = !personaMenuOpen.value
|
|
dropdownOpen.value = false
|
|
algosMenuOpen.value = false
|
|
}
|
|
|
|
function navigateTo(path: string) {
|
|
dropdownOpen.value = false
|
|
router.push(path)
|
|
}
|
|
|
|
async function handlePersonaLogin(persona: Persona) {
|
|
personaMenuOpen.value = false
|
|
await loginWithPersona(persona)
|
|
}
|
|
|
|
async function handleExtensionLogin() {
|
|
await loginWithExtension()
|
|
}
|
|
|
|
async function handleLogout() {
|
|
nostrLogout()
|
|
await appLogout()
|
|
dropdownOpen.value = false
|
|
router.push('/')
|
|
}
|
|
|
|
const handleClickOutside = (event: MouseEvent) => {
|
|
const dropdown = document.querySelector('.profile-dropdown')
|
|
const personaDropdown = document.querySelector('.persona-dropdown')
|
|
const algosDropdown = document.querySelector('.algos-dropdown')
|
|
if (dropdown && !dropdown.contains(event.target as Node)) {
|
|
dropdownOpen.value = false
|
|
}
|
|
if (personaDropdown && !personaDropdown.contains(event.target as Node)) {
|
|
personaMenuOpen.value = false
|
|
}
|
|
if (algosDropdown && !algosDropdown.contains(event.target as Node)) {
|
|
algosMenuOpen.value = false
|
|
}
|
|
}
|
|
|
|
onMounted(() => {
|
|
window.addEventListener('click', handleClickOutside)
|
|
})
|
|
|
|
onUnmounted(() => {
|
|
window.removeEventListener('click', handleClickOutside)
|
|
})
|
|
</script>
|
|
|
|
<style scoped>
|
|
/* Glass Header */
|
|
.floating-glass-header {
|
|
background: rgba(0, 0, 0, 0.65);
|
|
backdrop-filter: blur(40px);
|
|
-webkit-backdrop-filter: blur(40px);
|
|
border-radius: 24px;
|
|
border: 1px solid rgba(255, 255, 255, 0.06);
|
|
box-shadow:
|
|
0 20px 60px rgba(0, 0, 0, 0.3),
|
|
inset 0 1px 0 rgba(255, 255, 255, 0.1);
|
|
}
|
|
|
|
/* Navigation Button Styles */
|
|
.nav-button {
|
|
position: relative;
|
|
padding: 12px 24px;
|
|
font-size: 16px;
|
|
font-weight: 500;
|
|
line-height: 1.4;
|
|
border-radius: 16px;
|
|
background: rgba(0, 0, 0, 0.25);
|
|
color: rgba(255, 255, 255, 0.96);
|
|
box-shadow:
|
|
0 8px 24px rgba(0, 0, 0, 0.45),
|
|
inset 0 1px 0 rgba(255, 255, 255, 0.22);
|
|
backdrop-filter: blur(24px);
|
|
-webkit-backdrop-filter: blur(24px);
|
|
border: none;
|
|
cursor: pointer;
|
|
transition: all 0.3s ease;
|
|
text-decoration: none;
|
|
display: inline-block;
|
|
white-space: nowrap;
|
|
letter-spacing: 0.02em;
|
|
}
|
|
|
|
.nav-button::before {
|
|
content: '';
|
|
position: absolute;
|
|
inset: 0;
|
|
border-radius: inherit;
|
|
padding: 2px;
|
|
background: linear-gradient(135deg, rgba(0, 0, 0, 0.8), transparent);
|
|
-webkit-mask:
|
|
linear-gradient(#fff 0 0) content-box,
|
|
linear-gradient(#fff 0 0);
|
|
-webkit-mask-composite: xor;
|
|
mask-composite: exclude;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.nav-button:hover {
|
|
transform: translateY(-2px);
|
|
background: rgba(0, 0, 0, 0.35);
|
|
box-shadow:
|
|
0 12px 32px rgba(0, 0, 0, 0.6),
|
|
inset 0 1px 0 rgba(255, 255, 255, 0.25);
|
|
}
|
|
|
|
.nav-button:hover::before {
|
|
background: linear-gradient(135deg, rgba(255, 255, 255, 0.3), transparent);
|
|
}
|
|
|
|
.nav-button-active {
|
|
position: relative;
|
|
padding: 12px 24px;
|
|
font-size: 16px;
|
|
font-weight: 600;
|
|
line-height: 1.4;
|
|
border-radius: 16px;
|
|
background: rgba(0, 0, 0, 0.35);
|
|
color: rgba(255, 255, 255, 1);
|
|
box-shadow:
|
|
0 12px 32px rgba(0, 0, 0, 0.6),
|
|
inset 0 1px 0 rgba(255, 255, 255, 0.25);
|
|
backdrop-filter: blur(24px);
|
|
-webkit-backdrop-filter: blur(24px);
|
|
border: none;
|
|
cursor: pointer;
|
|
transition: all 0.3s ease;
|
|
text-decoration: none;
|
|
display: inline-block;
|
|
white-space: nowrap;
|
|
letter-spacing: 0.02em;
|
|
}
|
|
|
|
.nav-button-active::before {
|
|
content: '';
|
|
position: absolute;
|
|
inset: 0;
|
|
border-radius: inherit;
|
|
padding: 2px;
|
|
background: linear-gradient(135deg, rgba(255, 255, 255, 0.3), transparent);
|
|
-webkit-mask:
|
|
linear-gradient(#fff 0 0) content-box,
|
|
linear-gradient(#fff 0 0);
|
|
-webkit-mask-composite: xor;
|
|
mask-composite: exclude;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.nav-button-active:hover {
|
|
transform: translateY(-2px);
|
|
background: rgba(0, 0, 0, 0.40);
|
|
box-shadow:
|
|
0 12px 32px rgba(0, 0, 0, 0.6),
|
|
inset 0 1px 0 rgba(255, 255, 255, 0.3);
|
|
}
|
|
|
|
/* Sign In Button (reuses hero-play-button pattern) */
|
|
.hero-play-button {
|
|
position: relative;
|
|
padding: 10px 28px;
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
line-height: 1.4;
|
|
border-radius: 16px;
|
|
background: rgba(255, 255, 255, 0.85);
|
|
color: rgba(0, 0, 0, 0.9);
|
|
box-shadow:
|
|
0 12px 32px rgba(0, 0, 0, 0.4),
|
|
inset 0 1px 0 rgba(255, 255, 255, 1);
|
|
backdrop-filter: blur(24px);
|
|
-webkit-backdrop-filter: blur(24px);
|
|
border: none;
|
|
cursor: pointer;
|
|
transition: all 0.3s ease;
|
|
white-space: nowrap;
|
|
letter-spacing: 0.02em;
|
|
}
|
|
|
|
.hero-play-button::before {
|
|
content: '';
|
|
position: absolute;
|
|
inset: 0;
|
|
border-radius: inherit;
|
|
padding: 2px;
|
|
background: linear-gradient(135deg, rgba(100, 100, 100, 0.4), rgba(50, 50, 50, 0.2));
|
|
-webkit-mask:
|
|
linear-gradient(#fff 0 0) content-box,
|
|
linear-gradient(#fff 0 0);
|
|
-webkit-mask-composite: xor;
|
|
mask-composite: exclude;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.hero-play-button:hover {
|
|
transform: translateY(-2px);
|
|
background: rgba(255, 255, 255, 0.95);
|
|
box-shadow:
|
|
0 16px 40px rgba(0, 0, 0, 0.5),
|
|
inset 0 1px 0 rgba(255, 255, 255, 1);
|
|
}
|
|
|
|
/* Profile Dropdown Styles */
|
|
.profile-button {
|
|
padding: 6px 12px 6px 6px;
|
|
border-radius: 12px;
|
|
background: transparent;
|
|
border: none;
|
|
cursor: pointer;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.profile-button:hover {
|
|
background: rgba(255, 255, 255, 0.05);
|
|
}
|
|
|
|
.profile-menu {
|
|
z-index: 100;
|
|
animation: slideDown 0.2s ease-out;
|
|
}
|
|
|
|
@keyframes slideDown {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(-10px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
.profile-menu-item {
|
|
color: rgba(255, 255, 255, 0.9);
|
|
text-decoration: none;
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
transition: all 0.2s ease;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.profile-menu-item:hover {
|
|
background: rgba(255, 255, 255, 0.1);
|
|
color: rgba(255, 255, 255, 1);
|
|
}
|
|
|
|
.profile-menu-item svg {
|
|
opacity: 0.8;
|
|
}
|
|
|
|
.profile-menu-item:hover svg {
|
|
opacity: 1;
|
|
}
|
|
</style>
|