-
-
@@ -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)
})
@@ -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;
+}
+
+
+
+
+
+
+
-
-
-
+
+
+
-