Skip to content

Commit 6c2ae63

Browse files
committed
Fixed menu dropdown issues.
1 parent bd8d94a commit 6c2ae63

File tree

3 files changed

+63
-3
lines changed

3 files changed

+63
-3
lines changed

.gitignore

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,3 +13,5 @@ tramp
1313
.\#*
1414
/*.log
1515
/static/images/drafts/
16+
/workbench
17+
*backup*

static/js/site.js

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -83,5 +83,63 @@ window.addEventListener('load', () => {
8383
$item.checked = e.detail === 'dark'
8484
})
8585
})
86+
87+
// Custom dropdown implementation (Preline has a bug with the close logic)
88+
const dropdown = document.querySelector('.custom-dropdown')
89+
const dropdownToggle = document.querySelector('.custom-dropdown-toggle')
90+
const dropdownMenu = document.querySelector('.custom-dropdown-menu')
91+
92+
if (dropdown && dropdownToggle && dropdownMenu) {
93+
94+
// Toggle dropdown on button click
95+
dropdownToggle.addEventListener('click', function(e) {
96+
e.preventDefault()
97+
e.stopPropagation()
98+
99+
if (dropdown.classList.contains('open')) {
100+
closeDropdown()
101+
} else {
102+
openDropdown()
103+
}
104+
})
105+
106+
// Close dropdown when clicking outside
107+
document.addEventListener('click', function(e) {
108+
// Don't close if clicking the toggle button (it handles itself)
109+
if (dropdownToggle.contains(e.target)) {
110+
return
111+
}
112+
113+
// Close if clicking outside the dropdown
114+
if (!dropdown.contains(e.target)) {
115+
closeDropdown()
116+
}
117+
})
118+
119+
// Close dropdown when clicking a menu item
120+
dropdownMenu.querySelectorAll('a').forEach(function(link) {
121+
link.addEventListener('click', function() {
122+
closeDropdown()
123+
})
124+
})
125+
126+
function openDropdown() {
127+
dropdown.classList.add('open')
128+
129+
// Calculate position for fixed positioning
130+
const rect = dropdownToggle.getBoundingClientRect()
131+
dropdownMenu.style.top = rect.bottom + 'px'
132+
dropdownMenu.style.left = rect.left + 'px'
133+
134+
dropdownMenu.classList.remove('hidden')
135+
dropdownMenu.classList.add('block')
136+
}
137+
138+
function closeDropdown() {
139+
dropdown.classList.remove('open')
140+
dropdownMenu.classList.remove('block')
141+
dropdownMenu.classList.add('hidden')
142+
}
143+
}
86144
})
87145

templates/base/head-menu.html

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -73,15 +73,15 @@
7373
Blog
7474
</a>
7575

76-
<div class="hs-dropdown [--strategy:static] sm:[--strategy:fixed] [--adaptive:none] sm:[--trigger:hover] sm:py-4">
77-
<button type="button" class="flex items-center w-full text-gray-700 hover:text-gray-600 font-medium dark:text-gray-400 dark:hover:text-gray-500 ">
76+
<div class="custom-dropdown relative sm:py-4">
77+
<button id="hs-dropdown-download" type="button" class="custom-dropdown-toggle flex items-center w-full text-gray-700 hover:text-gray-600 font-medium dark:text-gray-400 dark:hover:text-gray-500 ">
7878
Download
7979
<svg class="ml-2 w-2.5 h-2.5 text-gray-600" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
8080
<path d="M2 5L8.16086 10.6869C8.35239 10.8637 8.64761 10.8637 8.83914 10.6869L15 5" stroke="currentColor" stroke-width="2" stroke-linecap="round"></path>
8181
</svg>
8282
</button>
8383

84-
<div class="hs-dropdown-menu transition-[opacity,margin] duration-[0.1ms] sm:duration-[150ms] hs-dropdown-open:opacity-100 opacity-0 sm:w-48 hidden z-10 bg-slate-500 sm:shadow-md rounded-md p-2 dark:bg-slate-800 sm:dark:border border-slate-400 dark:border-slate-700 dark:divide-slate-700 before:absolute top-full sm:border before:-top-5 before:left-0 before:w-full before:h-5">
84+
<div class="custom-dropdown-menu fixed transition-[opacity,margin] duration-[0.1ms] sm:duration-[150ms] sm:w-48 hidden z-[9999] bg-slate-500 sm:shadow-md rounded-md p-2 dark:bg-slate-800 sm:dark:border border-slate-400 dark:border-slate-700 dark:divide-slate-700">
8585
{% set repo = config.extra.download.repository %}
8686
{% set prior_release = config.extra.download.prior_release %}
8787
{% set current_release = config.extra.download.current_release %}

0 commit comments

Comments
 (0)