From dc232b7ed3dcc0b8094eee2a889ca70eb7f0ad5d Mon Sep 17 00:00:00 2001
From: RickardHF <RickardHF>
Date: Tue, 3 Oct 2023 15:47:17 +0200
Subject: [PATCH] added some language button

---
 src/app/globals.css             |  9 ++++++++
 src/components/Header.tsx       | 20 +++--------------
 src/components/LanguageMenu.tsx | 40 +++++++++++++++++++++++++++++++++
 src/public/icons/globe.svg      |  1 +
 4 files changed, 53 insertions(+), 17 deletions(-)
 create mode 100644 src/components/LanguageMenu.tsx
 create mode 100644 src/public/icons/globe.svg

diff --git a/src/app/globals.css b/src/app/globals.css
index 591da3d..1676452 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -43,6 +43,15 @@ header {
   font-size: large;
 }
 
+.use-background {
+  background-color: var(--background-color);
+}
+
+.shadow-foreground {
+  filter: drop-shadow(-0.01rem -0.01rem 0.1rem var(--foreground-rgb)) 
+  drop-shadow(0.2rem 0.2rem 0.2rem var(--button-background-one));
+}
+
 .shadow-color-one {
   filter: drop-shadow(0.2rem 0.2rem 0.2rem var(--button-background-one));
 }
diff --git a/src/components/Header.tsx b/src/components/Header.tsx
index 0575112..ede8a73 100644
--- a/src/components/Header.tsx
+++ b/src/components/Header.tsx
@@ -1,8 +1,8 @@
 'use client'
 
-import { Language } from "nextjs-static-page-localizer/interfaces";
 import { useTranslationsFetcher, useLocalization } from "nextjs-static-page-localizer";
-import { LocalizedLink, LanguageSwitcher } from "nextjs-static-page-localizer/components";
+import { LocalizedLink } from "nextjs-static-page-localizer/components";
+import LanguageMenu from "./LanguageMenu";
 
 export default function Header() {
 
@@ -13,21 +13,7 @@ export default function Header() {
     return (
     <header className="flex w-full ver-flex justify-center items-center">
         <div className="flex w-full hor-flex justify-end px-10">
-            {
-                configuration?.languages.map((language:Language) => {
-                    return (
-                        <LanguageSwitcher
-                            key={language.code}
-                            className="flex place-items-center gap-2 lg:pointer-events-auto lg:p-0 link-item shadow-color-one px-2 hover:underline" 
-                            lang={language.code}
-                            >
-                                <h2
-                                    className="px-2"
-                                >{language.name}</h2>
-                        </LanguageSwitcher>
-                    )
-                })
-            }
+            <LanguageMenu />
         </div>
         <div className="flex hor-flex justify-around w-1/2 items-center px-8 py-4 min-w-[300px] max-w-full">
             <LocalizedLink 
diff --git a/src/components/LanguageMenu.tsx b/src/components/LanguageMenu.tsx
new file mode 100644
index 0000000..4258310
--- /dev/null
+++ b/src/components/LanguageMenu.tsx
@@ -0,0 +1,40 @@
+'use client'
+
+import { useLocalization } from "nextjs-static-page-localizer";
+import { LanguageSwitcher } from "nextjs-static-page-localizer/components";
+import { useDetermineLanguage } from "nextjs-static-page-localizer/dist/helpers/language-determinor";
+import { useEffect, useRef, useState } from "react";
+
+export default function LanguageMenu() {
+
+    const language = useDetermineLanguage();
+    const { configuration } = useLocalization();
+
+    return (
+        <details className="flex flex-col justify-end list-none relative mt-2">
+            <summary className="px-2 cursor-pointer flex justify-end">
+                <div className="relative select-none">
+                    <img src="/icons/globe.svg" alt="Language" className="w-8 h-8" />
+                    <h2 className="absolute left-[60%] top-[40%] shadow-foreground link-item">{language?.toUpperCase() ?? ''}</h2>
+                </div>
+            </summary>
+            <div className="flex flex-col justify-end p-4 absolute right-0 top-full use-background mt-2 rounded-lg z-10">
+                {
+                    configuration?.languages.map((language) => {
+                        return (
+                            <LanguageSwitcher
+                                key={language.code}
+                                className="flex justify-end gap-4 shadow-color-one link-item"
+                                lang={language.code}
+                            >
+                                <h2>
+                                    {language.name}
+                                </h2>
+                            </LanguageSwitcher>
+                        )
+                    })
+                }
+            </div>
+        </details>
+    );
+}
diff --git a/src/public/icons/globe.svg b/src/public/icons/globe.svg
new file mode 100644
index 0000000..1e177f1
--- /dev/null
+++ b/src/public/icons/globe.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24" fill="#FFFFFF"><path d="M480-80q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-7-.5-14.5T799-507q-5 29-27 48t-52 19h-80q-33 0-56.5-23.5T560-520v-40H400v-80q0-33 23.5-56.5T480-720h40q0-23 12.5-40.5T563-789q-20-5-40.5-8t-42.5-3q-134 0-227 93t-93 227h200q66 0 113 47t47 113v40H400v110q20 5 39.5 7.5T480-160Z"/></svg>
\ No newline at end of file