diff --git a/src/components/AppHeader.vue b/src/components/AppHeader.vue index 5f8b752..2af6566 100644 --- a/src/components/AppHeader.vue +++ b/src/components/AppHeader.vue @@ -13,15 +13,49 @@ My List - - + +
+ +
+
+
Discovery Algorithms
+ + +
+
+
@@ -205,23 +239,37 @@ const { const { activeAlgorithm, + activeAlgorithmLabel, algorithms, setAlgorithm: _setAlgorithm, } = useContentDiscovery() -/** - * When a filter is clicked, navigate to Films page if not already there, - * then apply the filter. - */ -function setAlgorithm(id: string) { +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('/') } } -const dropdownOpen = ref(false) -const personaMenuOpen = ref(false) +/** 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() @@ -261,11 +309,13 @@ function clearFilter() { 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) { @@ -292,12 +342,16 @@ async function handleLogout() { 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(() => { diff --git a/src/components/MobileNav.vue b/src/components/MobileNav.vue index bd160c3..0852cd2 100644 --- a/src/components/MobileNav.vue +++ b/src/components/MobileNav.vue @@ -5,7 +5,7 @@
-

Sort By

+

Algos

- +