remove mobile language picker

Author: ShubhamOulkar

_includes/header.html

@@ -12,11 +12,6 @@
   <nav id="navbar" aria-label="primary">
     <input id="q" placeholder="🔎 search">
     <ul id="navmenu">
-      <li>
-        <a href="/" id="home-menu" {% if page.menu=='home' %} class="active" {% endif %}>
-          {{ site.data[page.lang].menu.home }}
-        </a>
-      </li>
       <li id="getting-started-menu" class="submenu">
         <a href="/{{ page.lang }}/starter/installing.html" {% if page.menu=='starter' %} class="active" {% endif%}>
           {{ site.data[page.lang].menu.getting_started }}
@@ -252,6 +247,5 @@
       <span id="icon-sun">{% include icons/sun.svg %}</span>
     </button>
     {% include language-picker.html %}
-    {% include language-picker-mobile.html %}
   </div>
 </header>

_includes/language-picker-mobile.html

@@ -1,22 +1,18 @@
 <div class="desktop-lang-switcher">
-{% assign url_parts = page.url | split: '/' %}
-{% assign url_remainder = url_parts | slice: 2, url_parts.size | join: '/' %}
-{% assign current_lang = page.lang %}
-<button class="lang-btn" type="button" aria-haspopup="menu" aria-label="Change language">
-  <span id="current-lang"></span>
-</button>
-<ul class="lang-list submenu-content" aria-labelledby="current-lang" >
-  {% for lang in site.data.languages %}
-  <li>
-    <a href="/{{ lang.code }}/{{ url_remainder }}">
-      {% if lang.code == current_lang %}
+  <button class="lang-btn" type="button" aria-haspopup="menu" aria-label="Change language">
+    {% include icons/i18n.svg %}
+  </button>
+  <ul class="lang-list">
+    {% for lang in site.data.languages %}
+    <li>
+      <a href="/{{ lang.code }}/{{ url_remainder }}">
+        {% if lang.code == current_lang %}
         <strong>{{ lang.name }}</strong>
-      {% else %}
+        {% else %}
         {{ lang.name }}
-      {% endif %}
-    </a>
-  </li>
-  {% endfor %}
-</ul>
-<div id="languageData" data-languages='{{ site.data.languages | jsonify }}' style="display:none;"></div>
-</div>
+        {% endif %}
+      </a>
+    </li>
+    {% endfor %}
+  </ul>
+</div>

_includes/language-picker.html

@@ -802,23 +802,8 @@ button.lang-btn {
   cursor: pointer;
   color: var(--card-fg);
   padding: 0.2rem;
-  font-size: inherit;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  gap: 1rem;
-
-  &::after {
-    content: "";
-    display: block;
-    width: 0.8em;
-    height: 0.5em;
-    background-color: var(--card-fg);
-    clip-path: polygon(100% 0%, 0 0%, 50% 100%);
-    cursor: pointer;
-    pointer-events: none;
-    transition: transform 0.2s ease-in-out;
-  }
+  width: fit-content;
+  aspect-ratio: 1;
 }
 
 div.desktop-lang-switcher {
@@ -860,11 +845,6 @@ div.desktop-lang-switcher {
       }
     }
   }
-
-  /* rotate arrow */
-  &:is(:hover,:focus-within) button.lang-btn::after {
-    transform: rotate(180deg);
-  }
 }
 
 /* navigation */
@@ -909,7 +889,7 @@ div.desktop-lang-switcher {
 .submenu-content {
   position: absolute;
   top: 100%;
-  left: 50%;
+  left: -100%;
   transform: translate(-50%);
   margin: auto;
   box-shadow: 1px 2px var(--hover-fg);
@@ -953,9 +933,6 @@ div.desktop-lang-switcher {
   text-decoration: none;
 }
 
-#language-picker-menu {
-  display: none;
-}
 
 /* TOC side menu */
 
@@ -1320,26 +1297,6 @@ h2 a {
     display: flex;
     gap: 8px;
   }
-
-  #language-picker-menu #navmenu>li:first-child {
-    display: flex;
-  }
-
-  #language-picker-menu #navmenu {
-    max-height: 70vh;
-    overflow-y: auto;
-    scrollbar-width: thin;
-    text-align: center;
-  }
-
-  #language-picker-menu {
-    display: block;
-    position: absolute;
-    top: 0;
-    right: 0;
-    width: 100%;
-    z-index: 1000;
-  }
 }
 
 /* TOC responsive */
@@ -1448,10 +1405,6 @@ h2 a {
   header {
     position: absolute;
   }
-
-  #mobile-menu {
-    display:none;
-  }
 }
 
 /* For image callouts in writing-middleware.md  */
@@ -1589,9 +1542,6 @@ h2 a {
     margin-right: 0;
     padding-right: 10px;
   }
-
-
-
   #blog-doc .blog-details + p > img {
     margin-bottom: 15px;
   }
@@ -1661,14 +1611,6 @@ blockquote {
 }
 
 @media all and (max-width: 1110px) {
-  .desktop-lang-switcher {
-    display: none;
-  }
-
-  #mobile-menu {
-    display: block;
-  }
-
   .algolia-autocomplete {
     display: none !important;
   }
@@ -1740,6 +1682,7 @@ blockquote {
 
   .submenu-content {
     width: 100%;
+    left: -200%;
     position: static;
     display: none;
     margin-top: 7px;
@@ -1749,9 +1692,6 @@ blockquote {
     border: none;
     border-radius: 0;
     box-shadow: none;
-    max-height: 190px;
-    overflow-y: auto;
-    overflow-x: hidden;
     transform: none;
     cursor: pointer;
   }

css/style.css

@@ -1,15 +1,5 @@
-const languageElement = document.getElementById('languageData');
-const languagesData = languageElement ? JSON.parse(languageElement.dataset.languages) : [];
-const langDisplay = document.getElementById('current-lang');
 const i18nMsgBox = document.getElementById("i18n-notice-box");
 
-// display current language in language picker component
-if (langDisplay) {
-  const currentLanguage = window.location.pathname.split('/')[1];
-  const matchedLang = languagesData.find(lang => lang.code === currentLanguage);
-  langDisplay.textContent = matchedLang ? matchedLang.name : 'English';
-}
-
 // add/remove class 'scroll' on scroll by 5px
 const scrollTarget = document.querySelector('.logo-container');
 const scrollObserver = new IntersectionObserver(

js/app.js

@@ -67,13 +67,9 @@ 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 menu = document.querySelector("#navmenu");
 const overlay = document.querySelector("#overlay");
 const navButton = document.querySelector("#nav-button");
-const languagePickerButton = document.querySelector("#language-picker-button");
-
 
 for (const el of linkItemsMenu) {
 	el.addEventListener("click", (e) => {
@@ -85,54 +81,18 @@ for (const el of linkItemsMenu) {
 			e.preventDefault();
 		}
 	});
-
-}
-
-for (const el of languageItems) {
-	el.addEventListener("click", (e) => {
-		const href = el.getAttribute("href");
-
-		if (href && href !== "#") {
-			languagePickerMenu?.classList.remove("opens");
-			overlay?.classList.remove("blurs");
-			document.body.classList.remove("no-scroll");
-
-			window.location.href = href;
-		}
-	});
 }
 
 navButton?.addEventListener("click", () => {
-	const isLanguageMenuOpen = languagePickerMenu?.classList.contains("opens");
-	if (isLanguageMenuOpen) {
-		languagePickerMenu?.classList.remove("opens");
-		menu?.classList.toggle("opens");
-	} else {
-		menu?.classList.toggle("opens");
-		overlay?.classList.toggle("blurs");
-		document.body.classList.toggle("no-scroll");
-	}
-});
-
-languagePickerButton?.addEventListener("click", () => {
-	const isMenuOpen = menu?.classList.contains("opens");
-	if (isMenuOpen) {
-		menu?.classList.remove("opens");
-		languagePickerMenu?.classList.toggle("opens");
-	} else {
-		languagePickerMenu?.classList.toggle("opens");
-		overlay?.classList.toggle("blurs");
-		document.body.classList.toggle("no-scroll");
-	}
+	menu?.classList.toggle("opens");
+	overlay?.classList.toggle("blurs");
+	document.body.classList.toggle("no-scroll");
 });
 
 overlay?.addEventListener("click", () => {
 	if (menu?.classList.contains("opens")) {
 		menu.classList.remove("opens");
 	}
-	if (languagePickerMenu?.classList.contains("opens")) {
-		languagePickerMenu.classList.remove("opens");
-	}
 	overlay.classList.remove("blurs");
 	document.body.classList.remove("no-scroll");
 });