Add profile dropdown and move nav to left with 40px gap
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
17
assets/images/text-logo.svg
Normal file
17
assets/images/text-logo.svg
Normal file
@@ -0,0 +1,17 @@
|
|||||||
|
<svg width="2051" height="328" viewBox="0 0 2051 328" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<g clip-path="url(#clip0_551_111)">
|
||||||
|
<path d="M48.9062 322.297V8.53711H121.442V322.297H48.9062Z" fill="white"/>
|
||||||
|
<path d="M399.801 322.288H329.106V194.131C329.106 179.034 326.161 167.984 319.901 161.356C314.011 154.36 306.278 151.044 297.073 151.044C290.446 151.044 283.818 152.887 277.19 156.2C270.563 159.516 264.303 164.301 258.78 170.195C253.257 176.085 249.207 183.085 246.261 190.815V321.92H175.566V92.4887H239.266V131.525C245.157 122.319 252.521 114.218 261.358 107.956C270.195 101.698 280.504 96.9098 291.919 93.594C303.333 90.2813 315.851 88.8086 329.106 88.8086C344.571 88.8086 356.724 91.3865 365.929 96.5424C375.134 101.698 382.129 108.694 387.284 117.163C392.068 125.635 395.384 135.209 397.223 145.153C399.066 155.465 399.801 165.039 399.801 174.98V322.288Z" fill="white"/>
|
||||||
|
<path d="M432.951 207.757C432.951 185.663 437.368 165.775 446.206 147.732C455.044 129.686 467.194 115.691 482.288 105.379C497.386 95.0707 515.429 89.5443 535.311 89.5443C551.511 89.5443 566.239 93.2275 579.497 100.961C592.752 108.695 602.691 118.637 609.689 131.526V-0.310547H680.384V243.481C680.384 250.477 681.486 255.633 683.697 258.578C685.907 261.526 689.957 262.999 695.846 263.366V322.289C683.329 324.499 673.019 325.972 665.287 325.972C652.766 325.972 643.194 323.394 635.832 317.868C628.467 312.715 624.049 305.348 622.206 295.774L621.472 283.99C613.001 298.352 601.586 309.032 587.597 316.395C573.604 323.394 558.509 327.077 543.044 327.077C527.579 327.077 512.481 324.129 499.226 318.238C485.971 312.344 474.189 303.876 464.249 293.196C454.306 282.517 446.941 269.995 441.418 255.632C436.263 241.27 433.319 225.435 433.319 208.127L432.951 207.757ZM610.057 235.747V188.241C607.112 180.507 603.062 173.879 597.536 167.985C592.014 162.094 585.754 157.673 579.126 153.99C572.499 150.31 565.504 148.467 558.509 148.467C550.406 148.467 543.411 150.31 536.784 153.623C530.156 156.938 524.634 161.357 520.214 166.88C515.796 172.406 512.114 178.664 509.536 185.663C506.959 192.659 505.854 200.761 505.854 208.862C505.854 216.966 507.329 224.697 509.907 231.696C512.851 238.692 516.534 244.586 521.319 249.742C526.106 254.895 531.996 258.948 538.994 261.894C545.989 264.839 553.354 266.312 561.454 266.312C566.609 266.312 571.394 265.577 576.181 264.101C580.969 262.628 585.386 260.421 589.804 257.473C594.224 254.527 597.907 251.214 601.586 247.531C605.269 243.848 608.217 239.43 610.424 234.641L610.057 235.747Z" fill="white"/>
|
||||||
|
<path d="M846.058 326.715C826.175 326.715 808.867 323.399 793.405 317.508C777.94 311.247 765.052 302.779 754.375 292.096C743.697 281.417 735.594 268.898 729.705 254.903C724.182 240.908 721.234 225.811 721.234 210.71C721.234 188.617 726.022 168.361 735.965 150.315C745.905 132.272 759.897 117.54 778.675 106.493C797.455 95.4432 819.545 89.9199 845.687 89.9199C871.83 89.9199 894.293 95.4433 912.703 106.126C931.113 117.172 945.473 131.535 955.045 149.58C964.618 167.623 969.405 186.774 969.405 207.765C969.405 211.815 969.405 215.866 968.668 219.917C968.3 223.967 967.933 227.283 967.563 230.229H795.98C796.717 240.173 799.295 248.642 804.45 255.641C809.605 262.637 815.865 267.793 823.598 271.105C831.327 274.421 839.06 276.261 847.53 276.261C858.575 276.261 868.518 273.683 877.723 268.898C886.928 263.742 893.188 257.113 896.5 249.012L956.518 266.32C950.625 278.472 942.525 288.784 931.848 297.99C921.17 307.197 908.65 314.193 893.922 319.719C879.195 325.242 863.363 327.82 845.687 327.82L846.058 326.715ZM895.395 186.039C894.66 176.832 891.715 168.361 886.928 161.732C882.14 154.736 876.25 149.21 869.252 145.53C862.257 141.846 853.79 139.636 844.585 139.636C836.115 139.636 828.015 141.479 820.65 145.53C813.288 149.21 807.395 154.736 802.977 161.365C798.557 167.993 795.983 176.462 794.877 186.039H895.395Z" fill="white"/>
|
||||||
|
<path d="M1113.02 326.715C1093.13 326.715 1075.83 323.399 1060.36 317.508C1044.9 311.247 1032.01 302.779 1021.33 292.096C1010.66 281.417 1002.55 268.898 996.663 254.903C991.14 240.908 988.195 225.811 988.195 210.71C988.195 188.617 992.98 168.361 1002.92 150.315C1012.86 132.272 1026.86 117.54 1045.63 106.493C1064.41 95.4432 1086.51 89.9199 1112.65 89.9199C1138.79 89.9199 1161.25 95.4433 1179.66 106.126C1198.07 117.172 1212.43 131.535 1222 149.58C1231.58 167.623 1236.36 186.774 1236.36 207.765C1236.36 211.815 1236.36 215.866 1235.63 219.917C1235.26 223.967 1234.89 227.283 1234.52 230.229H1062.94C1063.68 240.173 1066.25 248.642 1071.41 255.641C1076.56 262.637 1082.82 267.793 1090.56 271.105C1098.29 274.421 1106.02 276.261 1114.49 276.261C1125.53 276.261 1135.48 273.683 1144.68 268.898C1153.89 263.742 1160.15 257.113 1163.46 249.012L1223.48 266.32C1217.59 278.472 1209.48 288.784 1198.81 297.99C1188.13 307.197 1175.61 314.193 1160.88 319.719C1146.15 325.242 1130.32 327.82 1112.65 327.82L1113.02 326.715ZM1162.35 186.039C1161.62 176.832 1158.67 168.361 1153.89 161.732C1149.1 154.736 1143.21 149.21 1136.21 145.53C1129.22 141.846 1120.75 139.636 1111.54 139.636C1103.07 139.636 1094.97 141.479 1087.61 145.53C1080.25 149.21 1074.35 154.736 1069.94 161.365C1065.52 167.993 1062.94 176.462 1061.84 186.039H1162.35Z" fill="white"/>
|
||||||
|
<path d="M1472.01 8.53711V322.297H1399.48V193.773H1274.29V322.297H1201.75V8.53711H1274.29V130.065H1399.48V8.53711H1472.01Z" fill="white"/>
|
||||||
|
<path d="M1523.57 92.8535H1594.26V224.323C1594.26 237.948 1597.21 248.627 1602.73 255.993C1608.62 263.36 1616.35 267.04 1626.66 267.04C1633.29 267.04 1639.18 265.938 1645.07 263.727C1650.96 261.517 1656.85 258.204 1662.38 253.415C1667.9 248.627 1673.06 241.998 1677.47 234.264V93.221H1748.17V244.209C1748.17 251.205 1749.27 255.993 1751.48 258.939C1753.69 261.887 1757.74 263.36 1763.27 263.727V322.65C1756.64 324.122 1751.11 325.228 1746.33 325.595C1741.54 325.962 1737.12 325.962 1733.44 325.595C1720.92 325.595 1711.35 323.384 1703.98 318.599C1696.62 313.81 1692.2 306.447 1690.36 296.87L1688.89 282.878C1678.21 297.975 1665.32 309.022 1649.49 316.388C1634.03 323.384 1616.35 327.068 1596.47 327.068C1572.9 327.068 1554.86 319.704 1542.34 304.971C1529.83 290.241 1523.57 268.883 1523.57 240.525V92.8535Z" fill="white"/>
|
||||||
|
<path d="M1942.58 326.707C1924.91 326.707 1909.45 323.024 1896.56 315.66C1883.3 308.294 1872.99 297.614 1864.89 283.99V322.289H1803.4V-0.310547H1874.1V131.526C1881.83 118.269 1892.14 107.957 1904.66 100.594C1917.55 93.2275 1932.64 89.5443 1950.32 89.5443C1964.68 89.5443 1977.93 92.4927 1990.45 98.3834C2002.97 104.277 2013.28 112.746 2022.12 123.792C2030.95 134.842 2037.95 147.732 2043.1 162.094C2048.26 176.457 2050.47 192.292 2050.47 208.862C2050.47 225.435 2047.89 240.532 2042.37 255.265C2036.84 269.995 2029.48 282.517 2019.54 293.196C2009.97 303.876 1998.55 312.344 1985.3 318.238C1972.04 324.129 1957.68 327.077 1942.22 327.077L1942.58 326.707ZM1922.7 267.05C1930.8 267.05 1938.53 265.577 1945.16 262.628C1951.79 259.683 1957.68 255.632 1962.47 250.477C1967.62 245.321 1971.3 239.059 1974.25 232.063C1977.2 225.067 1978.3 217.334 1978.3 209.6C1978.3 198.55 1976.09 188.609 1971.67 179.402C1967.25 170.196 1960.99 162.829 1953.26 157.306C1945.53 151.783 1936.32 148.837 1926.38 148.837C1919.02 148.837 1912.02 150.677 1905.03 154.361C1898.4 158.044 1892.14 162.829 1886.99 168.723C1881.83 174.614 1877.41 181.242 1874.1 188.609V236.481C1876.31 240.903 1879.25 245.321 1882.94 249.371C1886.61 253.422 1890.3 256.37 1894.72 259.316C1899.14 261.894 1903.55 264.101 1908.34 265.577C1913.13 267.05 1917.91 267.784 1922.7 267.784V267.05Z" fill="white"/>
|
||||||
|
</g>
|
||||||
|
<defs>
|
||||||
|
<clipPath id="clip0_551_111">
|
||||||
|
<rect width="2051" height="328" fill="white"/>
|
||||||
|
</clipPath>
|
||||||
|
</defs>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 7.4 KiB |
@@ -4,31 +4,75 @@
|
|||||||
<header class="fixed top-0 left-0 right-0 z-50 pt-4 px-4">
|
<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="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">
|
<div class="flex items-center justify-between">
|
||||||
<!-- Logo -->
|
<!-- Logo + Navigation (Left Side) -->
|
||||||
<div class="flex items-center">
|
<div class="flex items-center gap-10">
|
||||||
<img src="/assets/images/logo.svg" alt="IndeedHub" class="h-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>
|
</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 -->
|
<!-- Right Side Actions -->
|
||||||
<div class="flex items-center gap-4">
|
<div class="flex items-center gap-4">
|
||||||
<!-- Search -->
|
<!-- 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">
|
<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" />
|
<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>
|
</svg>
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
<!-- User Avatar -->
|
<!-- Profile Dropdown -->
|
||||||
<div class="w-8 h-8 rounded bg-gradient-to-br from-orange-500 to-pink-500"></div>
|
<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>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -153,6 +197,8 @@ const independentCinema = computed(() => contentStore.contentRows.independent)
|
|||||||
const dramas = computed(() => contentStore.contentRows.dramas)
|
const dramas = computed(() => contentStore.contentRows.dramas)
|
||||||
const documentaries = computed(() => contentStore.contentRows.documentaries)
|
const documentaries = computed(() => contentStore.contentRows.documentaries)
|
||||||
|
|
||||||
|
const profileMenuOpen = ref(false)
|
||||||
|
|
||||||
const handleScroll = () => {
|
const handleScroll = () => {
|
||||||
// Calculate 30% of the page height
|
// Calculate 30% of the page height
|
||||||
const scrollThreshold = document.documentElement.scrollHeight * 0.3
|
const scrollThreshold = document.documentElement.scrollHeight * 0.3
|
||||||
@@ -164,6 +210,18 @@ const toggleSearch = () => {
|
|||||||
console.log('Search clicked')
|
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) => {
|
const handleContentClick = (content: Content) => {
|
||||||
console.log('Content clicked:', content)
|
console.log('Content clicked:', content)
|
||||||
// TODO: Navigate to content detail page
|
// TODO: Navigate to content detail page
|
||||||
@@ -171,11 +229,13 @@ const handleContentClick = (content: Content) => {
|
|||||||
|
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
window.addEventListener('scroll', handleScroll)
|
window.addEventListener('scroll', handleScroll)
|
||||||
|
window.addEventListener('click', handleClickOutside)
|
||||||
contentStore.fetchContent()
|
contentStore.fetchContent()
|
||||||
})
|
})
|
||||||
|
|
||||||
onUnmounted(() => {
|
onUnmounted(() => {
|
||||||
window.removeEventListener('scroll', handleScroll)
|
window.removeEventListener('scroll', handleScroll)
|
||||||
|
window.removeEventListener('click', handleClickOutside)
|
||||||
})
|
})
|
||||||
</script>
|
</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>
|
</style>
|
||||||
|
|||||||
Reference in New Issue
Block a user