feat(directory): add a popup for dropdown menu

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

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 {

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"
       }
     }
 }

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