From d5c33a7ddca9bd104d8acd913980cc978cc46c64 Mon Sep 17 00:00:00 2001
From: natnoppol <126169607+natnoppol@users.noreply.github.com>
Date: Sun, 14 Apr 2024 11:34:00 +0200
Subject: [PATCH] add dropdown on Navbar (#437)

* add dropdown on Navbar

* update dropdown function
---
 js/toggle-utils.mjs     | 26 ++++++++++++++++++++++++++
 pages/gallery-page.html | 11 +++++++----
 2 files changed, 33 insertions(+), 4 deletions(-)
 create mode 100644 js/toggle-utils.mjs

diff --git a/js/toggle-utils.mjs b/js/toggle-utils.mjs
new file mode 100644
index 0000000..c642496
--- /dev/null
+++ b/js/toggle-utils.mjs
@@ -0,0 +1,26 @@
+'use strict';
+
+const toggleUtils = {
+  toggleClass(el, className) {
+    el.classList.toggle(className);
+  },
+
+  addClass(el, className) {
+    el.classList.add(className);
+  },
+
+  removeClass(el, className) {
+    el.classList.remove(className);
+  },
+};
+
+document.addEventListener('click', function (evt) {
+  const dropdown = document.getElementById('navMenu');
+  const clickedOnDropdown = evt.target.classList.contains('dropdown');
+
+  if (!clickedOnDropdown) toggleUtils.addClass(dropdown, 'hidden');
+  if (clickedOnDropdown) toggleUtils.toggleClass(dropdown, 'hidden');
+});
+
+export default toggleUtils;
+
diff --git a/pages/gallery-page.html b/pages/gallery-page.html
index 39cb308..18029d9 100644
--- a/pages/gallery-page.html
+++ b/pages/gallery-page.html
@@ -108,9 +108,9 @@ <h2 id="search-label" class="sr-only">Search Bar</h2>
         <div
           class="relative cursor-pointer hover:scale-105 transition-transform"
         >
-          <div class="flex items-center">
-            <span class="text-2xl font-medium">More</span>
-            <img
+          <div class="flex items-center dropdown">
+            <span class="dropdown text-2xl font-medium">More</span>
+            <img class="dropdown ml-3"
               src="../assets/images/SVGs/chevron-down.svg"
               aria-label="Projects Dropdown Menu"
               alt="Projects Dropdown Menu"
@@ -118,7 +118,7 @@ <h2 id="search-label" class="sr-only">Search Bar</h2>
             />
           </div>
           <!-- Dropdown projects menu, hidden, toggle visibility with JS -->
-          <div class="absolute hidden mt-2 bg-white">
+          <div id="navMenu" class="absolute hidden mt-2 bg-white dropdown-content">
             <a
               href="#"
               class="block p-2 border-t border-b border-black hover:bg-gray-100"
@@ -486,5 +486,8 @@ <h1 class="text-2xl font-semibold mb-6">
       <div class="flex justify-center p-6 font-se">&copy;Musikkforandrerliv</div>
     </footer>
     <!--Footer end-->
+    
+    <script type="module" src="../js/toggle-utils.mjs"></script>
+  
   </body>
 </html>
\ No newline at end of file