fix: #7384

3 files changed, 64 insertions, 29 deletions

diff --git a/packages/bank/src/components/menu/LangSelector.tsx b/packages/bank/src/components/menu/LangSelector.tsx
index 4b09cf5..5bd7e4f 100644
--- a/packages/bank/src/components/menu/LangSelector.tsx
+++ b/packages/bank/src/components/menu/LangSelector.tsx
@@ -20,7 +20,7 @@
  */
 
 import { h, VNode, Fragment } from 'preact';
-import { useState } from 'preact/hooks';
+import { useCallback, useEffect, useState } from 'preact/hooks';
 import langIcon from '../../assets/icons/languageicon.svg';
 import { useTranslationContext } from '../../context/translation';
 import { strings as messages } from '../../i18n/strings';
@@ -47,29 +47,54 @@ function getLangName(s: keyof LangsNames | string): string {
 export function LangSelectorLikePy(): VNode {
   const [updatingLang, setUpdatingLang] = useState(false);
   const { lang, changeLanguage } = useTranslationContext();
-
+  const [hidden, setHidden] = useState(true)
+  useEffect(() => {
+    function bodyKeyPress(event:KeyboardEvent) {
+      console.log(event.code)
+      if (event.code === 'Escape') 
+        setHidden(true);
+      
+    }
+    function bodyOnClick(event:Event) {
+      setHidden(true);
+    }
+    document.body.addEventListener('click', bodyOnClick)
+    document.body.addEventListener('keydown', bodyKeyPress as any)
+    return () => {
+      document.body.removeEventListener('keydown', bodyKeyPress as any)
+      document.body.removeEventListener('click', bodyOnClick)
+    }
+  },[])
   return (
     <Fragment>
-      <span>{getLangName(lang)}</span>
-      <div style="position: relative; overflow: visible;">
-        <div
-          class="nav"
-          style="position: absolute; background: inherit; max-height: 60vh; overflow-y: scroll">
-          {Object.keys(messages)
-            .filter((l) => l !== lang)
-            .map((l) => (
-              <a
-                key={l}
-                class="navbtn"
-                value={l}
-                onClick={() => {
-                  changeLanguage(l);
-                  setUpdatingLang(false);
-                }}>
-                {getLangName(l)}
-              </a>
-            ))}
-          <br />
+      <button name="language" onClick={(ev) => {
+        setHidden(h => !h);
+        ev.stopPropagation();
+      }}>
+        {getLangName(lang)}
+      </button>
+      <div id="lang" class={hidden ? 'hide' : ''}>
+        <div style="position: relative; overflow: visible;">
+          <div
+            class="nav"
+            style="position: absolute; max-height: 60vh; overflow-y: scroll">
+            {Object.keys(messages)
+              .filter((l) => l !== lang)
+              .map((l) => (
+                <a
+                  key={l}
+                  href="#"
+                  class="navbtn langbtn"
+                  value={l}
+                  onClick={() => {
+                    changeLanguage(l);
+                    setUpdatingLang(false);
+                  }}>
+                  {getLangName(l)}
+                </a>
+              ))}
+            <br />
+          </div>
         </div>
       </div>
     </Fragment>
diff --git a/packages/bank/src/scss/colors-bank.scss b/packages/bank/src/scss/colors-bank.scss
index eed57cc..c346109 100644
--- a/packages/bank/src/scss/colors-bank.scss
+++ b/packages/bank/src/scss/colors-bank.scss
@@ -2,6 +2,7 @@ nav,
 nav a,
 nav span,
 .navcontainer,
+nav button,
 .demobar,
 .navbtn {
   color: white;
@@ -9,6 +10,7 @@ nav span,
 }
 
 nav a.active,
+nav button,
 nav span.active,
 .navbtn.active {
   background-color: #7a0606;
@@ -17,8 +19,13 @@ nav span.active,
 nav a.active:hover,
 nav span.active:hover,
 .navbtn.active:hover,
+nav button:hover,
 nav a:hover,
 nav span:hover,
 .navbtn:hover {
   background: #df3d3d;
 }
+
+nav a.navbtn.langbtn:focus {
+  background-color: #df3d3d;
+}
\ No newline at end of file
diff --git a/packages/bank/src/scss/demo.scss b/packages/bank/src/scss/demo.scss
index 1452a66..71db4b4 100644
--- a/packages/bank/src/scss/demo.scss
+++ b/packages/bank/src/scss/demo.scss
@@ -76,6 +76,7 @@ nav {
 }
 
 nav a,
+nav button,
 nav span,
 .navbtn {
   border: none;
@@ -89,6 +90,7 @@ nav span,
 }
 
 nav a,
+nav button,
 nav span,
 .navbtn {
   padding: 15px 32px;
@@ -107,6 +109,7 @@ nav span.active,
 }
 
 nav a.active:hover,
+nav button.active:hover,
 nav span.active:hover,
 .navbtn.active:hover {
   background: #3daee9;
@@ -122,16 +125,16 @@ nav .right {
   float: right;
   margin-right: 5vw;
 }
-nav .right div.nav {
+nav .hide div.nav {
   display: none;
 }
-nav .right div.nav:hover {
-  display: block;
-}
+// nav .right div.nav:hover {
+//   display: block;
+// }
 
-nav .right:hover div.nav {
-  display: block;
-}
+// nav .right:hover div.nav {
+//   display: block;
+// }
 
 .langbtn {
   width: 100%;