added some language button

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));
 }

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 

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>
+    );
+}