remove duplicate ID's from lang menu

Author: ShubhamOulkar

_includes/language-picker-mobile.html

@@ -6,15 +6,15 @@
   </div>
 </div>
 <div id="language-picker-menu">
-  <div id="navbar">
-    <ul id="navmenu">
+  <div id="langbar">
+    <ul id="langmenu">
       {% assign url_parts = page.url | split: '/' %}
 
       {% assign url_remainder = url_parts | slice: 2, url_parts.size | join: '/' %}
 
       {% for lang in site.data.languages %}
       <li class="submenu">
-        <a class="remove" href="/{{ lang.code }}/{{ url_remainder }}">{% include icons/flags/{{ lang.code }}.svg %}{{ lang.name }}</a>
+        <a href="/{{ lang.code }}/{{ url_remainder }}">{% include icons/flags/{{ lang.code }}.svg %}{{ lang.name }}</a>
       </li>
       {% endfor %}
     </ul>

css/style.css

@@ -830,26 +830,32 @@ div.desktop-lang-switcher {
 }
 
 /* navigation */
-#navbar {
+#navbar,
+
+#langbar {
   line-height: 30px;
   display: flex;
   align-items: center;
 }
 
-#navbar a {
+#navbar a,
+#langbar a {
   color: var(--card-fg);
   text-decoration: none;
 }
 
-#navbar a.active {
+#navbar a.active,
+#langbar a.active {
   font-weight: bold;
 }
 
-#navbar ul {
+#navbar ul,
+#langbar ul {
   list-style: none;
 }
 
-#navmenu {
+#navmenu,
+#langmenu {
   display: flex;
   gap: 20px;
 }
@@ -897,7 +903,8 @@ div.desktop-lang-switcher {
   display: initial;
 }
 
-#navmenu {
+#navmenu,
+#langmenu {
   padding: 0;
   margin: 0;
   right: 0px;
@@ -1265,11 +1272,11 @@ h2 a {
     margin-right: -10px;
   }
 
-  #language-picker-menu #navmenu>li:first-child {
+  #language-picker-menu #langmenu>li:first-child {
     display: flex;
   }
 
-  #language-picker-menu #navmenu {
+  #language-picker-menu #langmenu {
     max-height: 70vh;
     overflow-y: auto;
     scrollbar-width: thin;
@@ -1358,12 +1365,6 @@ h2 a {
 }
 
 
-@media all and (max-width: 540px) {
-  #boxes {
-    grid-template-columns: 1fr;
-  }
-}
-
 @media all and (max-width: 420px) {
   #app-settings-property {
     width: auto;
@@ -1617,17 +1618,15 @@ blockquote {
     display: none !important;
   }
 
-  #navbar {
+  #navbar,
+  #langbar {
     padding: 0;
     top: 1px;
     position: static;
   }
 
-  #navmenu>li:first-child {
-    display: none;
-  }
-
-  #navmenu>li {
+  #navmenu>li,
+  #langmenu>li {
     border-bottom: 1px solid var(--border);
     margin: 0;
     min-height: 47px;
@@ -1637,17 +1636,24 @@ blockquote {
     align-items: center;
   }
 
-  #navmenu>li.open:hover {
+   #langmenu>li {
+    padding-inline: 40%;
+   }
+
+  #navmenu>li.open:hover,
+  #langmenu>li.open:hover {
     background: var(--card-bg);
   }
-  #navmenu>li:hover {
+  #navmenu>li:hover,
+  #langmenu>li:hover {
     background: var(--hover-bg);
     & ul {
       background-color: var(--card-bg);
     }
   }
 
-  #navmenu {
+  #navmenu,
+  #langmenu {
     left: 0;
     padding: 0;
     top: 57px;
@@ -1656,7 +1662,8 @@ blockquote {
     display: none;
   }
 
-  #navmenu.opens {
+  #navmenu.opens,
+  #langmenu.opens {
     display: block;
   }
 
@@ -1669,10 +1676,14 @@ blockquote {
   }
 
   #langbar a {
-    
+    display:flex;
+    gap:0.5rem;
+    align-items:center;
+    justify-content:center;
   }
 
-  #navbar .submenu.open {
+  #navbar .submenu.open,
+  #langbar .submenu.open {
     flex-direction: column;
     align-items: initial;
     > a {
@@ -1734,3 +1745,13 @@ blockquote {
     border-bottom: 1px solid var(--border);
   }
 }
+
+@media all and (max-width: 540px) {
+  #boxes {
+    grid-template-columns: 1fr;
+  }
+
+  #langmenu>li {
+    padding-inline: 35%;
+  }
+}

js/menu.js

@@ -64,8 +64,8 @@ for (const el of itemsMenu) {
 // Mobile Menu and Language Picker
 
 const linkItemsMenu = document.querySelectorAll(".submenu > a");
-const languageItems = document.querySelectorAll("#language-picker-menu > #navbar > #navmenu > .submenu > a");
-const languagePickerMenu = document.querySelector("#language-picker-menu > #navbar > #navmenu");
+const languageItems = document.querySelectorAll("#language-picker-menu > #langbar > #langmenu > .submenu > a");
+const languagePickerMenu = document.querySelector("#language-picker-menu > #langbar > #langmenu");
 const menu = document.querySelector("#navmenu");
 const overlay = document.querySelector("#overlay");
 const navButton = document.querySelector("#nav-button");
@@ -100,6 +100,7 @@ for (const el of languageItems) {
 }
 
 navButton?.addEventListener("click", () => {
+	console.log("Nav button clicked");
 	const isLanguageMenuOpen = languagePickerMenu?.classList.contains("opens");
 	if (isLanguageMenuOpen) {
 		languagePickerMenu?.classList.remove("opens");
@@ -112,6 +113,7 @@ navButton?.addEventListener("click", () => {
 });
 
 languagePickerButton?.addEventListener("click", () => {
+	console.log("Language picker button clicked");
 	const isMenuOpen = menu?.classList.contains("opens");
 	if (isMenuOpen) {
 		menu?.classList.remove("opens");