feat : improve language picker component (#2040)

Signed-off-by: Shubham Oulkar <oulkarshubhu@gmail.com>
Co-authored-by: Sebastian Beltran <bjohansebas@gmail.com>

_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,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>

_includes/language-picker.html

@@ -1,22 +1,21 @@
-<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 %}
+<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 %}
+  </button>
+  <ul id="langList" class="lang-list" role="listbox">
+    {% 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>