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
-
-
+
+
+
+
+
@@ -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
-
+