forked from tangled.org/core
tangled monorepo

appview: ui: close nav dropdowns on click outside

adds a little bit of javascript to close dropdowns in the topbar when clicking outside of them

Signed-off-by: Samuel Newman <mozzius@protonmail.com>

Changed files
+13 -2
appview
pages
templates
layouts
+13 -2
appview/pages/templates/layouts/topbar.html
···
{{ end }}
{{ define "newButton" }}
-
<details class="relative inline-block text-left">
<summary class="btn-create py-0 cursor-pointer list-none flex items-center gap-2">
{{ i "plus" "w-4 h-4" }} new
</summary>
···
{{ end }}
{{ define "dropDown" }}
-
<details class="relative inline-block text-left">
<summary
class="cursor-pointer list-none flex items-center"
>
···
</a>
</div>
</details>
{{ end }}
···
{{ end }}
{{ define "newButton" }}
+
<details class="relative inline-block text-left nav-dropdown">
<summary class="btn-create py-0 cursor-pointer list-none flex items-center gap-2">
{{ i "plus" "w-4 h-4" }} new
</summary>
···
{{ end }}
{{ define "dropDown" }}
+
<details class="relative inline-block text-left nav-dropdown">
<summary
class="cursor-pointer list-none flex items-center"
>
···
</a>
</div>
</details>
+
+
<script>
+
document.addEventListener('click', function(event) {
+
const dropdowns = document.querySelectorAll('.nav-dropdown');
+
dropdowns.forEach(function(dropdown) {
+
if (!dropdown.contains(event.target)) {
+
dropdown.removeAttribute('open');
+
}
+
});
+
});
+
</script>
{{ end }}