From def57d6df4b3458473630d90d6340df66cde41c9 Mon Sep 17 00:00:00 2001
From: Shubham Oulkar <oulkarshubhu@gmail.com>
Date: Tue, 26 Aug 2025 18:46:34 +0530
Subject: [PATCH 01/10] remove mobile language picker

---
 _includes/header.html                 |  6 ---
 _includes/language-picker-mobile.html | 20 --------
 _includes/language-picker.html        | 34 ++++++--------
 css/style.css                         | 68 ++-------------------------
 js/app.js                             | 10 ----
 js/menu.js                            | 46 ++----------------
 6 files changed, 22 insertions(+), 162 deletions(-)
 delete mode 100644 _includes/language-picker-mobile.html

diff --git a/_includes/header.html b/_includes/header.html
index 0097cdf71f..b000605958 100644
--- a/_includes/header.html
+++ b/_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>
\ No newline at end of file
diff --git a/_includes/language-picker-mobile.html b/_includes/language-picker-mobile.html
deleted file mode 100644
index 0e99ad63b8..0000000000
--- a/_includes/language-picker-mobile.html
+++ /dev/null
@@ -1,20 +0,0 @@
-<div id="mobile-menu">
-  <div id="language-picker-button" class="header-btn">
-    {% include icons/i18n.svg %}
-  </div>
-</div>
-<div id="language-picker-menu">
-  <div id="navbar">
-    <ul id="navmenu">
-      {% 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 href="/{{ lang.code }}/{{ url_remainder }}">{{ lang.name }}</a>
-      </li>
-      {% endfor %}
-    </ul>
-  </div>
-</div>
\ No newline at end of file
diff --git a/_includes/language-picker.html b/_includes/language-picker.html
index d27b366b20..8ad2d59615 100644
--- a/_includes/language-picker.html
+++ b/_includes/language-picker.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>
\ No newline at end of file
diff --git a/css/style.css b/css/style.css
index f45f0a39d2..b7f0eb762f 100644
--- a/css/style.css
+++ b/css/style.css
@@ -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;
   }
diff --git a/js/app.js b/js/app.js
index 557841a737..b8888e0642 100644
--- a/js/app.js
+++ b/js/app.js
@@ -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(
diff --git a/js/menu.js b/js/menu.js
index c617727f0c..ac0f39b383 100644
--- a/js/menu.js
+++ b/js/menu.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");
 });

From 7f02d3fd05be1e2cfe2b470b6d979327de4695d6 Mon Sep 17 00:00:00 2001
From: Shubham Oulkar <oulkarshubhu@gmail.com>
Date: Tue, 26 Aug 2025 19:03:40 +0530
Subject: [PATCH 02/10] add click event on btn

---
 _includes/header.html          |  5 +++++
 _includes/language-picker.html |  4 ++--
 css/style.css                  | 11 +++--------
 js/app.js                      |  8 ++++++++
 4 files changed, 18 insertions(+), 10 deletions(-)

diff --git a/_includes/header.html b/_includes/header.html
index b000605958..a1ba88a174 100644
--- a/_includes/header.html
+++ b/_includes/header.html
@@ -12,6 +12,11 @@
   <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 }}
diff --git a/_includes/language-picker.html b/_includes/language-picker.html
index 8ad2d59615..7232a1bf6f 100644
--- a/_includes/language-picker.html
+++ b/_includes/language-picker.html
@@ -1,8 +1,8 @@
 <div class="desktop-lang-switcher">
-  <button class="lang-btn" type="button" aria-haspopup="menu" aria-label="Change language">
+  <button id="langBtn" class="lang-btn" type="button" aria-haspopup="menu" aria-label="Change language">
     {% include icons/i18n.svg %}
   </button>
-  <ul class="lang-list">
+  <ul id="langList" class="lang-list" aria-expanded="false">
     {% for lang in site.data.languages %}
     <li>
       <a href="/{{ lang.code }}/{{ url_remainder }}">
diff --git a/css/style.css b/css/style.css
index b7f0eb762f..8f4af5a18a 100644
--- a/css/style.css
+++ b/css/style.css
@@ -808,15 +808,14 @@ button.lang-btn {
 
 div.desktop-lang-switcher {
   position: relative;
-  > button.lang-btn {
-    &:is(:focus, :hover) {
+  > button.lang-btn.open {
       & + ul {
         display: block;
         opacity: 1;
         visibility: visible;
       }
     }
-  }
+
   /* enable lang list tabbing on keyboard focus */
   &:focus-within .lang-list {
     display: block;
@@ -830,11 +829,7 @@ div.desktop-lang-switcher {
     position: absolute;
     list-style: none;
     visibility: hidden;
-    &:is(:hover, :focus) {
-      display: block;
-      opacity: 1;
-      visibility: visible;
-    }
+    
     li  a {
       display: block;
       padding: 5px 20px 5px 20px;
diff --git a/js/app.js b/js/app.js
index b8888e0642..b2ffb207b6 100644
--- a/js/app.js
+++ b/js/app.js
@@ -1,5 +1,13 @@
+const langBtn = document.getElementById("langBtn");
+const langList = document.getElementById("langList");
 const i18nMsgBox = document.getElementById("i18n-notice-box");
 
+// open / close lang list
+langBtn.addEventListener("click", () => { 
+  langList.classList.toggle('open')
+  langList.ariaExpanded = !langList.ariaExpanded
+})
+
 // add/remove class 'scroll' on scroll by 5px
 const scrollTarget = document.querySelector('.logo-container');
 const scrollObserver = new IntersectionObserver(

From 6c9d8d3cf9899bd6698df7031085cf65fa521325 Mon Sep 17 00:00:00 2001
From: Shubham Oulkar <oulkarshubhu@gmail.com>
Date: Tue, 26 Aug 2025 19:12:34 +0530
Subject: [PATCH 03/10] add position

---
 css/style.css | 8 +-------
 js/app.js     | 2 +-
 2 files changed, 2 insertions(+), 8 deletions(-)

diff --git a/css/style.css b/css/style.css
index 8f4af5a18a..f3b68f3171 100644
--- a/css/style.css
+++ b/css/style.css
@@ -816,19 +816,13 @@ div.desktop-lang-switcher {
       }
     }
 
-  /* enable lang list tabbing on keyboard focus */
-  &:focus-within .lang-list {
-    display: block;
-    opacity: 1;
-    visibility: visible;
-  }
-
   > ul.lang-list {
     display: none;
     opacity: 0;
     position: absolute;
     list-style: none;
     visibility: hidden;
+    left: -100px;
     
     li  a {
       display: block;
diff --git a/js/app.js b/js/app.js
index b2ffb207b6..65afcfb39e 100644
--- a/js/app.js
+++ b/js/app.js
@@ -5,7 +5,7 @@ const i18nMsgBox = document.getElementById("i18n-notice-box");
 // open / close lang list
 langBtn.addEventListener("click", () => { 
   langList.classList.toggle('open')
-  langList.ariaExpanded = !langList.ariaExpanded
+  langList.ariaExpanded = langList.ariaExpanded === 'false' ? true : false;
 })
 
 // add/remove class 'scroll' on scroll by 5px

From 63a14f1435faf8b621229e4f009887e2aedda67a Mon Sep 17 00:00:00 2001
From: Shubham Oulkar <oulkarshubhu@gmail.com>
Date: Tue, 26 Aug 2025 19:45:43 +0530
Subject: [PATCH 04/10] add style

---
 css/style.css | 40 +++++++++++++++++++++++++++++++---------
 1 file changed, 31 insertions(+), 9 deletions(-)

diff --git a/css/style.css b/css/style.css
index f3b68f3171..1b03c1476d 100644
--- a/css/style.css
+++ b/css/style.css
@@ -808,13 +808,6 @@ button.lang-btn {
 
 div.desktop-lang-switcher {
   position: relative;
-  > button.lang-btn.open {
-      & + ul {
-        display: block;
-        opacity: 1;
-        visibility: visible;
-      }
-    }
 
   > ul.lang-list {
     display: none;
@@ -822,7 +815,12 @@ div.desktop-lang-switcher {
     position: absolute;
     list-style: none;
     visibility: hidden;
-    left: -100px;
+    left: -75px;
+    z-index: 100;
+    background-color: var(--card-bg);
+    border: 1px solid;
+    border-radius: 10px;
+    padding: 1px;
     
     li  a {
       display: block;
@@ -833,6 +831,26 @@ div.desktop-lang-switcher {
         background: var(--hover-bg);
       }
     }
+
+   &:first-child {
+    a {
+      border-start-start-radius: 10px;
+      border-start-end-radius: 10px;
+    }
+   }
+
+   &:last-child {
+    a {
+      border-end-start-radius: 10px;
+      border-end-end-radius: 10px;
+    }
+   }
+  }
+
+  > ul.lang-list.open {
+    display: block;
+    opacity: 1;
+    visibility: visible;
   }
 }
 
@@ -878,7 +896,7 @@ div.desktop-lang-switcher {
 .submenu-content {
   position: absolute;
   top: 100%;
-  left: -100%;
+  left: 50%;
   transform: translate(-50%);
   margin: auto;
   box-shadow: 1px 2px var(--hover-fg);
@@ -1604,6 +1622,10 @@ blockquote {
     display: none !important;
   }
 
+  #mobile-menu {
+    display: block;
+  }
+
   #navbar {
     padding: 0;
     top: 1px;

From d85fa0e22b4026a4a096b1290ae7a12590f4e770 Mon Sep 17 00:00:00 2001
From: Shubham Oulkar <oulkarshubhu@gmail.com>
Date: Tue, 26 Aug 2025 20:15:17 +0530
Subject: [PATCH 05/10] refactor

---
 _includes/header.html          |  5 -----
 _includes/language-picker.html |  4 ++--
 css/style.css                  | 12 +++++-------
 js/app.js                      |  8 --------
 js/menu.js                     | 13 ++++++++++++-
 5 files changed, 19 insertions(+), 23 deletions(-)

diff --git a/_includes/header.html b/_includes/header.html
index a1ba88a174..b000605958 100644
--- a/_includes/header.html
+++ b/_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 }}
diff --git a/_includes/language-picker.html b/_includes/language-picker.html
index 7232a1bf6f..7c73ed663f 100644
--- a/_includes/language-picker.html
+++ b/_includes/language-picker.html
@@ -1,8 +1,8 @@
 <div class="desktop-lang-switcher">
-  <button id="langBtn" class="lang-btn" type="button" aria-haspopup="menu" aria-label="Change language">
+  <button id="langBtn" class="lang-btn" type="button" aria-expanded="false" aria-haspopup="listbox" aria-label="Change language">
     {% include icons/i18n.svg %}
   </button>
-  <ul id="langList" class="lang-list" aria-expanded="false">
+  <ul id="langList" class="lang-list" role="listbox">
     {% for lang in site.data.languages %}
     <li>
       <a href="/{{ lang.code }}/{{ url_remainder }}">
diff --git a/css/style.css b/css/style.css
index 1b03c1476d..487a7cf032 100644
--- a/css/style.css
+++ b/css/style.css
@@ -832,19 +832,15 @@ div.desktop-lang-switcher {
       }
     }
 
-   &:first-child {
-    a {
+   > li:first-child > a {
       border-start-start-radius: 10px;
       border-start-end-radius: 10px;
     }
-   }
 
-   &:last-child {
-    a {
+   > li:last-child > a {
       border-end-start-radius: 10px;
       border-end-end-radius: 10px;
     }
-   }
   }
 
   > ul.lang-list.open {
@@ -1693,7 +1689,6 @@ blockquote {
 
   .submenu-content {
     width: 100%;
-    left: -200%;
     position: static;
     display: none;
     margin-top: 7px;
@@ -1703,6 +1698,9 @@ blockquote {
     border: none;
     border-radius: 0;
     box-shadow: none;
+    max-height: 190px;
+    overflow-y: auto;
+    overflow-x: hidden;
     transform: none;
     cursor: pointer;
   }
diff --git a/js/app.js b/js/app.js
index 65afcfb39e..b8888e0642 100644
--- a/js/app.js
+++ b/js/app.js
@@ -1,13 +1,5 @@
-const langBtn = document.getElementById("langBtn");
-const langList = document.getElementById("langList");
 const i18nMsgBox = document.getElementById("i18n-notice-box");
 
-// open / close lang list
-langBtn.addEventListener("click", () => { 
-  langList.classList.toggle('open')
-  langList.ariaExpanded = langList.ariaExpanded === 'false' ? true : false;
-})
-
 // add/remove class 'scroll' on scroll by 5px
 const scrollTarget = document.querySelector('.logo-container');
 const scrollObserver = new IntersectionObserver(
diff --git a/js/menu.js b/js/menu.js
index ac0f39b383..6755dd3a2f 100644
--- a/js/menu.js
+++ b/js/menu.js
@@ -65,12 +65,20 @@ for (const el of itemsMenu) {
 }
 
 // Mobile Menu and Language Picker
-
+const langBtn = document.getElementById("langBtn");
+const langList = document.getElementById("langList");
 const linkItemsMenu = document.querySelectorAll(".submenu > a");
 const menu = document.querySelector("#navmenu");
 const overlay = document.querySelector("#overlay");
 const navButton = document.querySelector("#nav-button");
 
+// open / close lang list
+langBtn.addEventListener("click", () => {
+	// TODO : write helper function 
+	const isOpen = langList.classList.toggle("open");
+	langBtn.setAttribute("aria-expanded", isOpen);
+});
+
 for (const el of linkItemsMenu) {
 	el.addEventListener("click", (e) => {
 		if (el.classList.contains("open")) {
@@ -84,6 +92,9 @@ for (const el of linkItemsMenu) {
 }
 
 navButton?.addEventListener("click", () => {
+	// TODO : write helper function
+	const isOpen = langList.classList.toggle("open");
+  	langBtn.setAttribute("aria-expanded", isOpen);
 	menu?.classList.toggle("opens");
 	overlay?.classList.toggle("blurs");
 	document.body.classList.toggle("no-scroll");

From 29413a752884dd759b9541d09934a24a841d023b Mon Sep 17 00:00:00 2001
From: Shubham Oulkar <oulkarshubhu@gmail.com>
Date: Tue, 26 Aug 2025 20:20:57 +0530
Subject: [PATCH 06/10] close language list on overlay click event

---
 css/style.css | 3 ++-
 js/menu.js    | 3 +++
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/css/style.css b/css/style.css
index 487a7cf032..1226c519a8 100644
--- a/css/style.css
+++ b/css/style.css
@@ -820,7 +820,8 @@ div.desktop-lang-switcher {
     background-color: var(--card-bg);
     border: 1px solid;
     border-radius: 10px;
-    padding: 1px;
+    padding: 0px;
+    min-width: max-content;
     
     li  a {
       display: block;
diff --git a/js/menu.js b/js/menu.js
index 6755dd3a2f..60615742f1 100644
--- a/js/menu.js
+++ b/js/menu.js
@@ -106,6 +106,9 @@ overlay?.addEventListener("click", () => {
 	}
 	overlay.classList.remove("blurs");
 	document.body.classList.remove("no-scroll");
+	// TODO : write helper function 
+	const isOpen = langList.classList.toggle("open");
+	langBtn.setAttribute("aria-expanded", isOpen);
 });
 
 document

From 743f9cf0c787b5e958dbd5adef81b276303331bd Mon Sep 17 00:00:00 2001
From: Shubham Oulkar <oulkarshubhu@gmail.com>
Date: Tue, 26 Aug 2025 20:31:29 +0530
Subject: [PATCH 07/10] close on outside click except for lang btn

---
 css/style.css |  3 ++-
 js/menu.js    | 29 +++++++++++++++++++++--------
 2 files changed, 23 insertions(+), 9 deletions(-)

diff --git a/css/style.css b/css/style.css
index 487a7cf032..1226c519a8 100644
--- a/css/style.css
+++ b/css/style.css
@@ -820,7 +820,8 @@ div.desktop-lang-switcher {
     background-color: var(--card-bg);
     border: 1px solid;
     border-radius: 10px;
-    padding: 1px;
+    padding: 0px;
+    min-width: max-content;
     
     li  a {
       display: block;
diff --git a/js/menu.js b/js/menu.js
index 6755dd3a2f..3e0cb956cc 100644
--- a/js/menu.js
+++ b/js/menu.js
@@ -72,11 +72,27 @@ const menu = document.querySelector("#navmenu");
 const overlay = document.querySelector("#overlay");
 const navButton = document.querySelector("#nav-button");
 
-// open / close lang list
-langBtn.addEventListener("click", () => {
-	// TODO : write helper function 
-	const isOpen = langList.classList.toggle("open");
-	langBtn.setAttribute("aria-expanded", isOpen);
+function closeLangList() {
+  langList.classList.remove("open");
+  langBtn.setAttribute("aria-expanded", false);
+}
+
+function toggleLangList() {
+  const isOpen = langList.classList.toggle("open");
+  langBtn.setAttribute("aria-expanded", isOpen);
+}
+
+// toggle on button click
+langBtn.addEventListener("click", (e) => {
+  e.stopPropagation();
+  toggleLangList();
+});
+
+// close on outside click except for lang btn
+document.body.addEventListener("click", (e) => {
+  if (!langList.contains(e.target)) {
+    closeLangList();
+  }
 });
 
 for (const el of linkItemsMenu) {
@@ -92,9 +108,6 @@ for (const el of linkItemsMenu) {
 }
 
 navButton?.addEventListener("click", () => {
-	// TODO : write helper function
-	const isOpen = langList.classList.toggle("open");
-  	langBtn.setAttribute("aria-expanded", isOpen);
 	menu?.classList.toggle("opens");
 	overlay?.classList.toggle("blurs");
 	document.body.classList.toggle("no-scroll");

From 2814d643e6847d3b9e29fc70ff2e6d0c4de9d982 Mon Sep 17 00:00:00 2001
From: Shubham Oulkar <oulkarshubhu@gmail.com>
Date: Sun, 31 Aug 2025 17:55:36 +0530
Subject: [PATCH 08/10] CI (lighthouse): check correct header response

---
 .github/workflows/lighthouse.yml | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/.github/workflows/lighthouse.yml b/.github/workflows/lighthouse.yml
index 00a4fe1e25..de25aa7954 100644
--- a/.github/workflows/lighthouse.yml
+++ b/.github/workflows/lighthouse.yml
@@ -29,12 +29,12 @@ jobs:
         run: |
           PREVIEW_URL="https://deploy-preview-${{ github.event.pull_request.number }}--expressjscom-preview.netlify.app"
           echo "PREVIEW_URL=$PREVIEW_URL" >> "$GITHUB_ENV"
-          MAX_RETRIES=12
+          MAX_RETRIES=10
           DELAY=10
 
           echo "Checking Netlify preview: $PREVIEW_URL"
           for i in $(seq 1 $MAX_RETRIES); do
-            if curl -s --head --max-time 5 "$PREVIEW_URL" | grep "200 OK" > /dev/null; then
+            if curl -s -I "$PREVIEW_URL" | grep "HTTP/.* 200" > /dev/null; then
               echo "✅ Preview is live!"
               echo "skip_lighthouse=false" >> "$GITHUB_ENV"
               exit 0

From 035d48cabefa331bbfcfa1cd802020ac00cb9635 Mon Sep 17 00:00:00 2001
From: Shubham Oulkar <oulkarshubhu@gmail.com>
Date: Sun, 14 Sep 2025 08:13:26 +0530
Subject: [PATCH 09/10] add current language highlighting

Co-authored-by: bjohansebas 103585995+bjohansebas@users.noreply.github.com
---
 _includes/language-picker.html | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/_includes/language-picker.html b/_includes/language-picker.html
index 7c73ed663f..0a344ed9a3 100644
--- a/_includes/language-picker.html
+++ b/_includes/language-picker.html
@@ -1,3 +1,6 @@
+{% assign url_parts = page.url | split: '/' %}
+{% assign url_remainder = url_parts | slice: 2, url_parts.size | join: '/' %}
+{% assign current_lang = page.lang %}
 <div class="desktop-lang-switcher">
   <button id="langBtn" class="lang-btn" type="button" aria-expanded="false" aria-haspopup="listbox" aria-label="Change language">
     {% include icons/i18n.svg %}

From 25275d94f46bce14ed9c203bf6a2d326749f2fa7 Mon Sep 17 00:00:00 2001
From: Shubham Oulkar <oulkarshubhu@gmail.com>
Date: Sun, 14 Sep 2025 08:28:34 +0530
Subject: [PATCH 10/10] remove home link from translation

Signed-off-by: Shubham Oulkar <oulkarshubhu@gmail.com>
---
 _data/en/menu.yml | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/_data/en/menu.yml b/_data/en/menu.yml
index 456e4bf96d..de6f851575 100644
--- a/_data/en/menu.yml
+++ b/_data/en/menu.yml
@@ -1,6 +1,3 @@
-# Home
-home: Home
-
 # Getting started
 getting_started: Getting started
 installing: Installing