lfg2025/indee-demo
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add profile dropdown and move nav to left with 40px gap

Browse Source 
Header Layout Changes:
- Move navigation buttons next to logo on left side (40px gap)
- Remove centered navigation positioning
- Add profile dropdown after search on right side

Profile Dropdown Features:
- Shows user avatar, name 'Dorian', and chevron icon
- Glassmorphic dropdown menu with our button styles
- Menu items: Profile, Settings, Sign Out
- Icons for each menu item
- Smooth slide-down animation
- Click outside to close
- Desktop only (hidden on mobile)
- Uses same glass effect as nav buttons

Responsive:
- Mobile shows simple avatar without dropdown
- Search button hidden on mobile
- Nav stays in mobile bottom bar

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
Dorian
2026-02-03 00:05:22 +00:00
parent 0031456f4e
commit f170fd6625
2 changed files with 145 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

142
src/views/Browse.vue
View File

@@ -4,31 +4,75 @@
<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 -->
<div class="flex items-center">
<!-- Logo + Navigation (Left Side) -->
<div class="flex items-center gap-10">
<img src="/assets/images/logo.svg" alt="IndeedHub" class="h-10" />
<!-- Navigation - Next to Logo on Desktop -->
<nav class="hidden md:flex items-center gap-3">
<a href="#" class="nav-button-active">Home</a>
<a href="#" class="nav-button">Films</a>
<a href="#" class="nav-button">Series</a>
<a href="#" class="nav-button">Creators</a>
<a href="#" class="nav-button">My List</a>
</nav>
</div>
<!-- Navigation - Centered -->
<nav class="hidden md:flex items-center gap-3 absolute left-1/2 -translate-x-1/2">
<a href="#" class="nav-button-active">Home</a>
<a href="#" class="nav-button">Films</a>
<a href="#" class="nav-button">Series</a>
<a href="#" class="nav-button">Creators</a>
<a href="#" class="nav-button">My List</a>
</nav>
<!-- Right Side Actions -->
<div class="flex items-center gap-4">
<!-- Search -->
<button class="p-2 hover:bg-white/10 rounded-lg transition-colors" @click="toggleSearch">
<button class="hidden md:block p-2 hover:bg-white/10 rounded-lg transition-colors" @click="toggleSearch">
<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>
<!-- User Avatar -->
<div class="w-8 h-8 rounded bg-gradient-to-br from-orange-500 to-pink-500"></div>
<!-- Profile Dropdown -->
<div class="hidden md:block relative profile-dropdown">
<button
@click="toggleProfileMenu"
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-white text-sm font-semibold">
D
</div>
<span class="text-white text-sm font-medium">Dorian</span>
<svg class="w-4 h-4 transition-transform" :class="{ 'rotate-180': profileMenuOpen }" 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>
<!-- Dropdown Menu -->
<div v-if="profileMenuOpen" class="profile-menu absolute right-0 mt-2 w-48">
<div class="floating-glass-header py-2 rounded-xl">
<a href="#" class="profile-menu-item flex items-center gap-3 px-4 py-2.5">
<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>
</a>
<a href="#" class="profile-menu-item flex items-center gap-3 px-4 py-2.5">
<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="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
</svg>
<span>Settings</span>
</a>
<div class="border-t border-white/10 my-1"></div>
<a href="#" class="profile-menu-item flex items-center gap-3 px-4 py-2.5 text-red-400">
<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>
</a>
</div>
</div>
</div>
<!-- Mobile User Avatar (No Dropdown) -->
<div class="md:hidden w-8 h-8 rounded-full bg-gradient-to-br from-orange-500 to-pink-500 flex items-center justify-center text-white text-sm font-semibold">
D
</div>
</div>
</div>
</div>
@@ -153,6 +197,8 @@ const independentCinema = computed(() => contentStore.contentRows.independent)
const dramas = computed(() => contentStore.contentRows.dramas)
const documentaries = computed(() => contentStore.contentRows.documentaries)
const profileMenuOpen = ref(false)
const handleScroll = () => {
// Calculate 30% of the page height
const scrollThreshold = document.documentElement.scrollHeight * 0.3
@@ -164,6 +210,18 @@ const toggleSearch = () => {
console.log('Search clicked')
}
const toggleProfileMenu = () => {
profileMenuOpen.value = !profileMenuOpen.value
}
// Close profile menu when clicking outside
const handleClickOutside = (event: MouseEvent) => {
const dropdown = document.querySelector('.profile-dropdown')
if (dropdown && !dropdown.contains(event.target as Node)) {
profileMenuOpen.value = false
}
}
const handleContentClick = (content: Content) => {
console.log('Content clicked:', content)
// TODO: Navigate to content detail page
@@ -171,11 +229,13 @@ const handleContentClick = (content: Content) => {
onMounted(() => {
window.addEventListener('scroll', handleScroll)
window.addEventListener('click', handleClickOutside)
contentStore.fetchContent()
})
onUnmounted(() => {
window.removeEventListener('scroll', handleScroll)
window.removeEventListener('click', handleClickOutside)
})
</script>
@@ -412,4 +472,58 @@ onUnmounted(() => {
}
}
/* 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>