From 83ffa6c85fc70e6c31cc0d35d1ab7ecb3b3dd4fa Mon Sep 17 00:00:00 2001
From: Haoyu Xu <i@halyul.dev>
Date: Sat, 24 Jun 2023 01:46:18 -0400
Subject: [PATCH] feat(directory): add a popup for dropdown menu

---
 directory/src/component/dropdown.jsx          |  6 ++++
 .../src/component/scss/dropdown.module.scss   | 30 +++++++++++++++++++
 directory/src/i18n.json                       |  8 +++++
 directory/src/routes/Root.jsx                 |  3 ++
 4 files changed, 47 insertions(+)

diff --git a/directory/src/component/dropdown.jsx b/directory/src/component/dropdown.jsx
index 3ab7869..433dd9d 100644
--- a/directory/src/component/dropdown.jsx
+++ b/directory/src/component/dropdown.jsx
@@ -20,6 +20,11 @@ export default function Dropdown(props) {
         >
           <span className={classes.content}>{props.text}</span>
           <span className={classes.icon}></span>
+          <section
+            className={classes.popup}
+          >
+            <span className={classes.text}>{props.altText}</span>
+          </section>
         </section>
         <ul className={classes.menu} style={props.activeColor}>
           {
@@ -75,4 +80,5 @@ Dropdown.propTypes = {
   onClick: PropTypes.func,
   activeColor: PropTypes.object,
   activeRule: PropTypes.func,
+  altText: PropTypes.string,
 };
\ No newline at end of file
diff --git a/directory/src/component/scss/dropdown.module.scss b/directory/src/component/scss/dropdown.module.scss
index 58afc33..7cb3c99 100644
--- a/directory/src/component/scss/dropdown.module.scss
+++ b/directory/src/component/scss/dropdown.module.scss
@@ -11,6 +11,36 @@
     flex-direction: row;
     align-items: center;
     color: var(--text-color);
+
+    &:hover {
+      .popup {
+        visibility: unset;
+        opacity: 1;
+      }
+    }
+
+    .popup {
+      opacity: 0;
+      position: absolute;
+      background-color: var(--root-background-color);
+      width: max-content;
+      height: max-content;
+      max-height: 61.8vh;
+      max-width: 61.8vw;
+      z-index: -1;
+      top: 2em;
+      right: 0;
+      cursor: auto;
+      transition: all cubic-bezier(0.65, 0.05, 0.36, 1) 0.3s;
+      overflow: auto;
+      padding: 0.5rem;
+      border: 1px solid var(--border-color);
+      visibility: hidden;
+
+      .text {
+        font-size: 1rem;
+      }
+    }
   }
 
   .content {
diff --git a/directory/src/i18n.json b/directory/src/i18n.json
index 5b7078c..fea15e5 100644
--- a/directory/src/i18n.json
+++ b/directory/src/i18n.json
@@ -142,6 +142,14 @@
       "ko-KR": {
         "zh-CN": "韩语",
         "en-US": "Korean"
+      },
+      "switch_language": {
+        "zh-CN": "🌐 切换语言",
+        "en-US": "🌐 Switch Language"
+      },
+      "fast_navigation": {
+        "zh-CN": "🧭 快速导航",
+        "en-US": "🧭 Fast Navigation"
       }
     }
 }
\ No newline at end of file
diff --git a/directory/src/routes/Root.jsx b/directory/src/routes/Root.jsx
index 581aa8f..3a7e0ef 100644
--- a/directory/src/routes/Root.jsx
+++ b/directory/src/routes/Root.jsx
@@ -242,6 +242,7 @@ function LanguageDropdown() {
     return (
       <Dropdown
         text={i18n(language)}
+        altText={i18n("switch_language")}
         menu={i18nValues.available.map((item) => {
           return {
             name: i18n(item),
@@ -286,6 +287,7 @@ function HeaderButton() {
   let location = useLocation();
   const { operators } = useConfig()
   const { language } = useLanguage()
+  const { i18n } = useI18n()
 
   const fastNavigateDict = useMemo(() => {
     const dict = {}
@@ -325,6 +327,7 @@ function HeaderButton() {
       <Border>
         <Dropdown
           menu={fastNavigateList}
+          altText={i18n("fast_navigation")}
           onClick={(item) => {
             navigate(item.value)
           }}