From 277e56bd0474407c479e891adbd4184de3a443f5 Mon Sep 17 00:00:00 2001
From: Osama Jandali <osamajandaly@gmail.com>
Date: Mon, 11 Mar 2024 14:50:13 +0200
Subject: [PATCH] Refactor header component and add LanguagePicker component

---
 src/components/Header.astro                   | 94 ++++++++++---------
 src/components/LanguagePicker.astro           | 17 ++--
 src/layouts/Layout.astro                      |  4 -
 ...tion-has-quadrupled-in-the-last-decade.mdx |  2 +-
 4 files changed, 60 insertions(+), 57 deletions(-)

diff --git a/src/components/Header.astro b/src/components/Header.astro
index 3e02fa8..b65a918 100644
--- a/src/components/Header.astro
+++ b/src/components/Header.astro
@@ -3,6 +3,7 @@ import { getLangFromUrl } from '../i18n/utils';
 const lang = getLangFromUrl(Astro.url);
 
 import { Icon } from "astro-icon";
+import LanguagePicker from './LanguagePicker.astro';
 const { isHomepage } = Astro.props;
 const links = [
   {
@@ -28,49 +29,52 @@ const links = [
 ];
 
 ---
-
-<nav
-  class="text-xs lg:text-sm text-center font-bold max-w-5xl mx-auto px-4 flex items-center justify-between flex-wrap  my-4 relative"
->
-  <a href="/" aria-label="SoGS Logo">
-    <Icon name="logo-alt" className="w-32 lg:w-40" />
-  </a>
-  <button
-    class="lg:hidden block focus:outline-none"
-    onclick="document.querySelector('ul').classList.toggle('hidden')"
-  >
-    <Icon name="menu" className="w-6 h-6" />
-  </button>
-  <ul
-    class="hidden lg:flex gap-4 items-center absolute lg:static bg-white lg:bg-transparent shadow-md lg:shadow-none z-50 top-10 left-0 w-full lg:w-auto py-3 lg:py-0"
+<div class=" max-w-5xl mx-auto px-4  my-4">
+  <LanguagePicker />
+  <nav
+    class="text-xs lg:text-sm text-center font-bold flex items-center justify-between flex-wrap  relative"
   >
-    {
-      links.map(({ label, url }) => (
-        <li class="py-3 lg:py-0">
-          <a
-            href={url}
-            target={url.startsWith("http") ? "_blank" : "_self"}
-            rel={url.startsWith("http") ? "noopener noreferrer" : ""}
-            class={`${Astro.url.pathname === url ? "text-secondary" : ""}`}
-          >
-            {label}
-          </a>
-        </li>
-      ))
-    }
-    {
-      !isHomepage && (
-        <li class="py-3 lg:py-0">
-          <a
-            class="bg-primary inline-block hover:bg-primary-light font-bold py-2 px-4 rounded 
-            transition duration-200 ease-in-out
-            "
-            href=`/${lang}`
-          >
-            More Insights
-          </a>
-        </li>
-      )
-    }
-  </ul>
-</nav>
+    <a href="/" aria-label="SoGS Logo">
+      <Icon name="logo-alt" className="w-32 lg:w-40" />
+    </a>
+    <button
+      class="lg:hidden block focus:outline-none"
+      onclick="document.querySelector('ul').classList.toggle('hidden')"
+    >
+      <Icon name="menu" className="w-6 h-6" />
+    </button>
+    <ul
+      class="hidden lg:flex gap-4 items-center absolute lg:static bg-white lg:bg-transparent shadow-md lg:shadow-none z-50 top-10 left-0 w-full lg:w-auto py-3 lg:py-0"
+    >
+      {
+        links.map(({ label, url }) => (
+          <li class="py-3 lg:py-0">
+            <a
+              href={url}
+              target={url.startsWith("http") ? "_blank" : "_self"}
+              rel={url.startsWith("http") ? "noopener noreferrer" : ""}
+              class={`${Astro.url.pathname === url ? "text-secondary" : ""}`}
+            >
+              {label}
+            </a>
+          </li>
+        ))
+      }
+      {
+        !isHomepage && (
+          <li class="py-3 lg:py-0">
+            <a
+              class="bg-primary inline-block hover:bg-primary-light font-bold py-2 px-4 rounded 
+              transition duration-200 ease-in-out
+              "
+              href=`/${lang}`
+            >
+              More Insights
+            </a>
+          </li>
+        )
+      }
+    </ul>
+  </nav>
+
+</div>
diff --git a/src/components/LanguagePicker.astro b/src/components/LanguagePicker.astro
index fc62bb6..58d5200 100644
--- a/src/components/LanguagePicker.astro
+++ b/src/components/LanguagePicker.astro
@@ -1,10 +1,13 @@
 ---
-import { languages } from '../i18n/ui';
+import { languages } from "../i18n/ui";
 ---
-<ul>
-  {Object.entries(languages).map(([lang, label]) => (
-    <li>
-      <a href=`/${lang}/`>{label}</a>
-    </li>
-  ))}
+
+<ul class="text-xs flex justify-end mb-2 gap-2">
+  {
+    Object.entries(languages).map(([lang, label]) => (
+      <li>
+        <a href={`/${lang}/`}>{label}</a>
+      </li>
+    ))
+  }
 </ul>
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
index 4966caf..aec2975 100644
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@@ -1,7 +1,6 @@
 ---
 import "../styles/base.css";
 
-import LanguagePicker from '../components/LanguagePicker.astro';
 import { getLangFromUrl } from '../i18n/utils';
 const lang = getLangFromUrl(Astro.url);
 
@@ -117,8 +116,5 @@ const { title, description, image } = metaData
     >
     <!-- End Google Tag Manager (noscript) -->
 
-    <footer>
-      <LanguagePicker />
-    </footer>
   </body>
 </html>
diff --git a/src/pages/ja/insights/software-legislation-has-quadrupled-in-the-last-decade.mdx b/src/pages/ja/insights/software-legislation-has-quadrupled-in-the-last-decade.mdx
index cfe06ad..6255609 100644
--- a/src/pages/ja/insights/software-legislation-has-quadrupled-in-the-last-decade.mdx
+++ b/src/pages/ja/insights/software-legislation-has-quadrupled-in-the-last-decade.mdx
@@ -1,6 +1,6 @@
 ---
 shortDescription: "Software legislation is on the rise"
-layout: ../../layouts/InsightLayout.astro
+layout: ../../../layouts/InsightLayout.astro
 insightNo: 6
 title: ソフトウェアの法整備は、この10年で4倍になった
 image: software-legislation-has-quadrupled-in-the-last-decade.png