wire up language selector

_i18n/en.yml

@@ -13,6 +13,8 @@ message_board: "Message Board"
 app_store: 'App Store'
 offline_maps: 'Offline Maps'
 
+language_prompt: 'Language'
+
 apps:
   breadcrumb: "App Store"
   footer: The Butter App Store is built on F-Droid free software

_includes/header.html

@@ -2,10 +2,12 @@
   <div class="header-container">
     <img src="{{ site.baseurl }}/assets/images/butter-app-icon-large.svg" alt="Paddy, the Butter Box Mascot" class="header-image" />
     <div class="title">{% t site_name %}</div>
-    <div class="language-selector">
+    <a class="language-selector" href="#" data-micromodal-trigger="language-selector-modal">
       <img src="{{ site.baseurl }}/assets/images/globe.svg" alt="language selector icon"/>
       <span class="language-code">{{ site.lang | upcase }}</span>
       <img src="{{ site.baseurl }}/assets/images/caret-down.svg"/>
-    </div>
+    </a>
   </div>
 </header>
+
+{% include language-selector.html %}

_includes/language-selector.html

@@ -0,0 +1,28 @@
+<div class="modal micromodal-slide" id="language-selector-modal" aria-hidden="true">
+    <div class="modal__overlay" tabindex="-1" data-micromodal-close>
+        <div class="modal__container language-selector-container" role="dialog" aria-modal="true" aria-labelledby="product-modal-title">
+            <main class="modal__content" id="product-modal-content">
+                <div class="modal__content__header">
+                    <div class="header__text">
+                        <h2 class="modal__title ls-40" id="product-modal-title">{% t language_prompt %}</h2>
+                    </div>
+                </div>
+                <div class="modal__content__description">
+                    {% for lang in site.languages %}
+                    {% if forloop.index0 == 0 %}
+                    <a class="language-selection" href="{{ page.url | relative_url }}">
+                        <input type="radio" id="{{ lang }}" onclick="location.href='{{ page.url | relative_url }}'" name="language" value="{{ lang }}" {% if site.lang == lang %}checked{% endif %}>
+                        <label for="{{ lang }}" onclick="location.href='{{ page.url | relative_url }}'">{{ site.data.home.language_selector[lang] }}</label>
+                    </a href="">
+                    {% else %}
+                    <a class="language-selection" href="{{ lang + page.url | relative_url }}">
+                        <input type="radio" id="{{ lang }}" onclick="location.href='{{ lang + page.url | relative_url }}'" name="language" value="{{ lang }}" {% if site.lang == lang %}checked{% endif %}>
+                        <label for="{{ lang }}" onclick="location.href='{{ lang + page.url | relative_url }}'">{{ site.data.home.language_selector[lang] }}</label>
+                    </a href="">
+                    {% endif %}
+                  {% endfor %}
+                </div>
+            </main>
+        </div>
+    </div>
+</div>

_scss/pages/home.scss

@@ -80,6 +80,10 @@ a:active {
     padding: 0 10px;
     width: 100px;
   }
+  .language-selector:hover {
+    cursor: pointer;
+    text-decoration: none;
+  }
 
   .language-code {
     margin: 0 8px;
@@ -103,6 +107,56 @@ a:active {
   font-weight: bold;
 }
 
+.language-selector-container {
+  h2.modal__title {
+    text-align: left;
+    font-size: 18px;
+    font-weight: 500;
+    margin: 20px 0;
+  }
+  min-width: 300px;
+}
+
+.language-selection {
+  align-items: center;
+  display: flex;
+  margin: 15px 0px;
+  input[type="radio"] {
+    appearance: none;
+    width: 18px;
+    height: 18px;
+    border: 2px solid #9B9A98;
+    border-radius: 50%;
+    position: relative;
+    cursor: pointer;
+  }
+
+  input[type="radio"]::before {
+    content: '';
+    display: block;
+    width: 10px;
+    height: 10px;
+    border-radius: 50%;
+    background: #333; /* Change this to your desired color */
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    opacity: 0;
+    transition: opacity 0.2s ease-in-out;
+  }
+
+  label {
+    font-size: 16px;
+    margin-left: 20px;
+    cursor: pointer;
+  }
+}
+.language-selection:hover {
+  text-decoration: none;
+}
+
+
 .content {
   padding: 20px;
 }

index.html

@@ -30,4 +30,5 @@ layout: default
         {% t offline_maps %}
       </a>
     </div>
-</div></div>
+  </div>
+</div>