add dropdown on Navbar (#437)

* add dropdown on Navbar

* update dropdown function

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

pages/gallery-page.html

@@ -108,17 +108,17 @@ <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"
               class="ml-3"
             />
           </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>