feat: adds styles to selected lang in dropdown menu

migtarx · Dec 4, 2023 · 1b22755 · 1b22755
1 parent 63fbca4
commit 1b22755
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 5 deletions.
diff --git a/resources/_gen/assets/scss/css/style.scss_f120a3f402b106f64b18d498afd3d82e.content b/resources/_gen/assets/scss/css/style.scss_f120a3f402b106f64b18d498afd3d82e.content
@@ -382,6 +382,10 @@ body {
 .post a {
   color: #27aff8; }
 
+.menu-selected-lang {
+  color: #27aff8;
+  font-weight: 900; }
+
 .post-title {
   color: #27aff8; }
 

diff --git a/themes/hello-friend/assets/css/main.scss b/themes/hello-friend/assets/css/main.scss
@@ -32,6 +32,11 @@ body {
   color: #27aff8;
 }
 
+.menu-selected-lang{
+  color: #27aff8;
+  font-weight: 900;
+}
+
 .post-title {
   color: #27aff8;
 }

diff --git a/themes/hello-friend/assets/js/menu.js b/themes/hello-friend/assets/js/menu.js
@@ -4,6 +4,9 @@ const mobileMenuTrigger = document.querySelector(".menu-trigger");
 const desktopMenu = document.querySelector(".menu__inner--desktop");
 const desktopMenuTrigger = document.querySelector(".menu__sub-inner-more-trigger");
 const menuMore = document.querySelector(".menu__sub-inner-more");
+const currentPath = window.location.pathname;
+const enLinks = document.getElementById('en-lang');
+const esLinks = document.getElementById('es-lang');
 const mobileQuery = getComputedStyle(document.body).getPropertyValue("--phoneWidth");
 const isMobile = () => true;
 const isMobileMenu = () => {
@@ -13,9 +16,16 @@ const isMobileMenu = () => {
 };
 
 // Common
-
 isMobileMenu();
 
+if (currentPath.startsWith('/es')) {
+  esLinks.classList.add('menu-selected-lang');
+  enLinks.classList.remove('menu-selected-lang');
+} else {
+  enLinks.classList.add('menu-selected-lang');
+  esLinks.classList.remove('menu-selected-lang');
+}
+
 document.body.addEventListener("click", () => {
   if (!isMobile() && menuMore && !menuMore.classList.contains("hidden")) {
     menuMore.classList.add("hidden");
@@ -26,8 +36,6 @@ document.body.addEventListener("click", () => {
 
 document.addEventListener('click', function(event) {
   if (event.target.classList.contains('langChange')) {
-    const currentPath = window.location.pathname;
-
     if (currentPath.startsWith('/es')) {
       const newPath = currentPath.replace('/es', '');
       window.location.href = window.location.origin + newPath;

diff --git a/themes/hello-friend/layouts/partials/header.html b/themes/hello-friend/layouts/partials/header.html
@@ -7,8 +7,8 @@
       </span>
       <nav class="menu">
         <ul class="menu__inner menu__inner">
-          <li class="langChange">ES</li>
-          <li class="langChange">EN</li> 
+          <li id="es-lang" class="langChange">ES</li>
+          <li id="en-lang" class="langChange">EN</li> 
         </ul>
       </nav>
     </span>