theme updates

assets/css/styles.css

@@ -690,6 +690,11 @@ body.login {
   text-decoration: underline;
 }
 
+.menu-item:hover {
+  background-color: var(--primary-500);
+  color: #fff;
+}
+
 /* Add caret icon after menu items with submenus */
 .menu-item-has-children > a:after {
   content: "\f229"; /* Unicode for the caret down icon in Bootstrap */
@@ -705,6 +710,8 @@ body.login {
   width: max-content;
   display: none;
   position: absolute;
+  left: 0;
+  top: 100%;
   background-color: #fff; /* Background color for the dropdown */
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* Box shadow for the dropdown */
   z-index: 1000; /* Ensure dropdown appears above other elements */
@@ -745,6 +752,16 @@ body.login {
   color: white;
 }
 
+ul#menu-main-menu > li {
+  position: relative;
+  padding: 0.5rem 1rem;
+}
+
+@media (max-width: 1640px) {
+  ul#menu-main-menu > li:last-child > .sub-menu {
+    left: -100%;
+  }
+}
 /*
 ! tailwindcss v3.4.1 | MIT License | https://tailwindcss.com
 */
@@ -2299,6 +2316,10 @@ select {
   border-top-width: 4px;
 }
 
+.border-b-2 {
+  border-bottom-width: 2px;
+}
+
 .border-gray-300 {
   --tw-border-opacity: 1;
   border-color: rgb(209 213 219/var(--tw-border-opacity));

assets/js/index.js

@@ -124,17 +124,6 @@ class NavControl {
         if (this.toggleMenuBtn.classList.contains('active')) {
           this.navControl.toggleNavMenu();
         }
-        if (!this.isExternalLink(link) && this.isWordPressAdminLink(link)) {
-          window.location.href = link.href; // Navigate normally
-        } else if (!this.isExternalLink(link)) {
-          this.animatePageTransition(() => {
-            this.loadContent(link.href, 'content-container');
-            // window.location.href = link.href
-          });
-        } else if (this.isExternalLink(link)) {
-          link.setAttribute('target', '_blank');
-          window.open(link.href, '_system');
-        }
       });
     });
   }

src/index.js

@@ -12,4 +12,5 @@ import TestModule from "./modules/TestModule"
 const collapsePanel =  new CollapsePanel()
 const customRangeSlider =  new CustomRangeSlider()
 const navControl =  new NavControl()
-const testModule =  new TestModule()
+const testModule =  new TestModule()
+console.log('Hello')

src/modules/NavControl.js

@@ -41,17 +41,6 @@ class NavControl {
         if (this.toggleMenuBtn.classList.contains('active')) {
           this.navControl.toggleNavMenu();
         }
-        if (!this.isExternalLink(link) && this.isWordPressAdminLink(link)) {
-          window.location.href = link.href; // Navigate normally
-        } else if (!this.isExternalLink(link)) {
-          this.animatePageTransition(() => {
-            this.loadContent(link.href, 'content-container');
-            // window.location.href = link.href
-          });
-        } else if (this.isExternalLink(link)) {
-          link.setAttribute('target', '_blank');
-          window.open(link.href, '_system');
-        }
       });
     });
   }

src/scss/vendors/_wordpress.scss

@@ -116,6 +116,11 @@ body.login {
   text-decoration: underline;
 }
 
+.menu-item:hover {
+    background-color: var(--primary-500);
+    color: #fff;
+}
+
 /* Add caret icon after menu items with submenus */
 .menu-item-has-children > a:after {
   content: '\f229'; /* Unicode for the caret down icon in Bootstrap */
@@ -131,6 +136,8 @@ body.login {
   width: max-content;
   display: none;
   position: absolute;
+  left: 0;
+  top: 100%;
   background-color: #fff; /* Background color for the dropdown */
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* Box shadow for the dropdown */
   z-index: 1000; /* Ensure dropdown appears above other elements */
@@ -171,4 +178,16 @@ body.login {
   color: white;
 }
 
-// Sub Menu Childrem
+ul#menu-main-menu > li {
+  position: relative;
+  padding: 0.5rem 1rem;
+}
+
+@media (max-width: 1640px) {
+
+  
+  ul#menu-main-menu > li:last-child > .sub-menu {
+    left: -100%;
+  }
+
+}

src/scss/vendors/tailwind/_tailwind.scss

@@ -1588,6 +1588,10 @@ select {
   border-top-width: 4px;
 }
 
+.border-b-2 {
+  border-bottom-width: 2px;
+}
+
 .border-gray-300 {
   --tw-border-opacity: 1;
   border-color: rgb(209 213 219 / var(--tw-border-opacity));

template-parts/header/navigation.php

@@ -109,7 +109,7 @@ require_once(get_theme_file_path('/includes/back-end/helper_functions.php'));
       </div>
 
       <!-- Dealership Menu -->
-      <div class="hidden lg:block bg-stone-200 px-4 shadow-lg">
+      <div class="hidden lg:block bg-stone-200 px-4 shadow-lg border-b-2 border-red-500">
         <div class="max-w-7xl mx-auto py-4">
 
           <?php $args = [