From c4600723e8dbf9bcb9210988bf1650032ba07379 Mon Sep 17 00:00:00 2001
From: tfsumon <sumon.themefisher@gmail.com>
Date: Sun, 28 Jul 2024 13:09:44 +0600
Subject: [PATCH 1/2] update(dep): upgraded packages

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 5875f43..29b72e0 100755
--- a/package.json
+++ b/package.json
@@ -31,7 +31,7 @@
     "jshint-stylish": "^2.2.1",
     "postcss": "^8.4.38",
     "prettier": "^3.2.5",
-    "prettier-plugin-tailwindcss": "^0.5.13",
+    "prettier-plugin-tailwindcss": "^0.6.5",
     "sass": "^1.75.0",
     "tailwind-bootstrap-grid": "^5.1.0",
     "tailwindcss": "^3.4.3"

From 6e9f38c8a51cdb9346718020012d3cf5addda16f Mon Sep 17 00:00:00 2001
From: tfsumon <sumon.themefisher@gmail.com>
Date: Sun, 28 Jul 2024 13:20:17 +0600
Subject: [PATCH 2/2] enhance(ui): improved header dropdown menu layout

---
 package.json               |  2 +-
 src/partials/header.html   | 14 ++++++++------
 src/scripts/main.js        | 11 +++++++++++
 src/styles/buttons.scss    |  2 +-
 src/styles/navigation.scss | 35 +++++++++++++++++++++++++++++++++--
 5 files changed, 54 insertions(+), 10 deletions(-)

diff --git a/package.json b/package.json
index 29b72e0..e94837c 100755
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "themeplate",
-  "version": "3.1.1",
+  "version": "3.2.0",
   "description": "Gulp and Tailwindcss boilerplate for creating HTML templates",
   "author": "Zeon Studio",
   "license": "MIT",
diff --git a/src/partials/header.html b/src/partials/header.html
index 4f52f0a..68ecd03 100755
--- a/src/partials/header.html
+++ b/src/partials/header.html
@@ -54,14 +54,16 @@
       <li class="nav-item nav-dropdown group relative">
         <span class="nav-link inline-flex items-center">
           Pages
-          <svg class="h-4 w-4 fill-current" viewBox="0 0 20 20">
-            <path
-              d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z"
-            />
-          </svg>
+          <span class="arrow-icon">
+            <svg class="h-4 w-4 fill-current" viewBox="0 0 20 20">
+              <path
+                d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z"
+              />
+            </svg>
+          </span>
         </span>
         <ul
-          class="nav-dropdown-list hidden group-hover:block lg:invisible lg:absolute lg:block lg:opacity-0 lg:group-hover:visible lg:group-hover:opacity-100"
+          class="nav-dropdown-list hidden lg:invisible lg:absolute lg:block lg:opacity-0 lg:group-hover:visible lg:group-hover:opacity-100 translate-y-1 lg:group-hover:translate-y-0 lg:transition-all lg:duration-300"
         >
           <li class="nav-dropdown-item">
             <a href="contact.html" class="nav-dropdown-link">Contact</a>
diff --git a/src/scripts/main.js b/src/scripts/main.js
index 5a4489a..8c44214 100755
--- a/src/scripts/main.js
+++ b/src/scripts/main.js
@@ -6,6 +6,17 @@
   //   document.querySelector(".preloader").style.display = "none";
   // });
 
+  // ##################### Dropdown Menu Toggler For Mobile ###################
+  const dropdownMenuToggler =
+    document.querySelectorAll(".nav-dropdown > .nav-link");
+
+  dropdownMenuToggler.forEach((toggler) => {
+    toggler?.addEventListener("click", (e) => {
+      const target = e.target;
+      target && target.parentElement?.classList.toggle("active");
+    });
+  });
+
   // ########################## Theme switcher ##########################
   var darkMode = false;
   var themeSwitch = document.querySelectorAll("[data-theme-switcher]");
diff --git a/src/styles/buttons.scss b/src/styles/buttons.scss
index b44a41d..33a6fbe 100755
--- a/src/styles/buttons.scss
+++ b/src/styles/buttons.scss
@@ -3,7 +3,7 @@
 }
 
 .btn-sm {
-  @apply rounded-sm px-4 py-1.5 text-sm;
+  @apply rounded-sm px-4 py-1.5 text-base-sm md:text-sm;
 }
 
 .btn-primary {
diff --git a/src/styles/navigation.scss b/src/styles/navigation.scss
index b410de0..55a004e 100755
--- a/src/styles/navigation.scss
+++ b/src/styles/navigation.scss
@@ -8,7 +8,7 @@ input#nav-toggle:checked + label #hide-button {
 }
 
 input#nav-toggle:checked ~ #nav-menu {
-  @apply block;
+  @apply max-lg:block;
 }
 
 .header {
@@ -37,14 +37,45 @@ input#nav-toggle:checked ~ #nav-menu {
 
 .nav-link {
   @apply text-dark hover:text-primary dark:text-darkmode-dark dark:hover:text-darkmode-primary block p-3 font-semibold transition lg:px-2 lg:py-3;
+
+  .arrow-icon {
+    @apply relative -z-10 inline-block align-[-2px] ml-1.5 text-xs/snug transition-transform duration-300;
+  }
 }
 
 .nav-dropdown {
   @apply mr-0;
+
+  // For Large Devices (Dropdown Arrow Icon)
+  &:hover .nav-link .arrow-icon {
+    @apply lg:rotate-180 lg:transform;
+  }
+
+  // For Small Devices
+  &.active {
+    // Dropdown Arrow Icon
+    .nav-link {
+      .arrow-icon {
+        @apply max-lg:rotate-180 max-lg:transform;
+      }
+      .icon {
+        @apply max-lg:rotate-180;
+      }
+    }
+
+    // Show Dropdown Menu On Click
+    .nav-dropdown-list {
+      @apply max-lg:block;
+    }
+  }
 }
 
 .nav-dropdown-list {
-  @apply z-10 min-w-[180px] rounded bg-body p-4 shadow dark:bg-darkmode-body;
+  @apply mx-auto min-w-[180px] max-w-[200px] rounded bg-body dark:bg-dark p-3 shadow lg:border dark:lg:border-transparent;
+
+  .nav-dropdown-link {
+    @apply block rounded px-3 py-1.5 font-medium text-dark/70 transition hover:bg-primary/5 dark:hover:bg-white/10 dark:hover:text-light hover:text-primary;
+  }
 }
 
 .nav-dropdown-item {