feat(directory): useHeader to handle fast navigation

directory/src/component/dropdown.jsx

@@ -1,5 +1,5 @@
 import React, {
-  useState
+  useState,
 } from 'react'
 import PropTypes from 'prop-types';
 import classes from './scss/dropdown.module.scss'

directory/src/component/scss/dropdown.module.scss

@@ -67,6 +67,7 @@
     opacity: 0;
     position: absolute;
     background-color: var(--root-background-color);
+    min-width: 38.2vw;
     width: max-content;
     max-height: 61.8vh;
     max-width: 61.8vw;

directory/src/routes/Root.jsx

@@ -284,49 +284,16 @@ HeaderTabsElement.propTypes = {
 
 function HeaderButton() {
   const navigate = useNavigate()
-  let location = useLocation();
-  const { operators } = useConfig()
-  const { language } = useLanguage()
   const { i18n } = useI18n()
+  const {
+    fastNavigation
+  } = useHeader()
 
-  const fastNavigateDict = useMemo(() => {
-    const dict = {}
-    operators.forEach((item) => {
-      if (!(item.date in dict)) {
-        dict[item.date] = []
-      }
-      dict[item.date].push({
-        codename: item.codename,
-        link: item.link,
-      })
-    })
-    return dict
-  }, [operators])
-
-  const fastNavigateList = useMemo(() => {
-    const list = []
-    for (const [key, value] of Object.entries(fastNavigateDict)) {
-      list.push({
-        name: key,
-        value: null,
-        type: "date",
-      })
-      value.forEach((item) => {
-        list.push({
-          name: item.codename[language],
-          value: item.link,
-          type: "item",
-        })
-      })
-    }
-    return list
-  }, [fastNavigateDict, language])
-
-  if (location.pathname === routes.find((item) => item.index).path) {
+  if (fastNavigation.length > 0) {
     return (
       <Border>
         <Dropdown
-          menu={fastNavigateList}
+          menu={fastNavigation}
           altText={i18n("fast_navigation")}
           onClick={(item) => {
             navigate(item.value)

directory/src/routes/path/Home.jsx

@@ -33,13 +33,15 @@ export default function Home() {
     setTitle,
     setTabs,
     currentTab,
-    setHeaderIcon
+    setHeaderIcon,
+    setFastNavigation
   } = useHeader()
-  const { config } = useConfig()
+  const { config, operators } = useConfig()
   const [content, setContent] = useState([])
   const [voiceOn] = useAtom(voiceOnAtom)
   const [voiceSrc, setVoiceSrc] = useState(null)
   const [voiceReplay, setVoiceReplay] = useState(false)
+  const { language } = useLanguage()
 
   useEffect(() => {
     setTitle('dynamic_compile')
@@ -66,6 +68,43 @@ export default function Home() {
 
   const isShown = useCallback((type) => currentTab === 'all' || currentTab === type, [currentTab])
 
+  const fastNavigateDict = useMemo(() => {
+    const dict = {}
+    operators.forEach((item) => {
+      if (!(item.date in dict)) {
+        dict[item.date] = []
+      }
+      dict[item.date].push({
+        codename: item.codename,
+        link: item.link,
+        type: item.type
+      })
+    })
+    return dict
+  }, [operators])
+
+  useEffect(() => {
+    const list = []
+    for (const [key, value] of Object.entries(fastNavigateDict)) {
+      const newValue = value.filter((item) => isShown(item.type))
+      if (newValue.length > 0) {
+        list.push({
+          name: key,
+          value: null,
+          type: "date",
+        })
+        newValue.forEach((item) => {
+          list.push({
+            name: item.codename[language],
+            value: item.link,
+            type: "item",
+          })
+        })
+      }
+    }
+    setFastNavigation(list)
+  }, [currentTab, fastNavigateDict, isShown, language, setFastNavigation])
+
   const handleVoicePlay = useCallback((src) => {
     if (!voiceOn) {
       setVoiceSrc(null)

directory/src/state/header.js

@@ -8,6 +8,7 @@ const tabsAtom = atom([]);
 const currentTabAtom = atom(null);
 const appbarExtraAreaAtom = atom([]);
 const headerIconAtom = atom(null);
+const fastNaviationAtom = atom([]);
 
 export function useHeader() {
   const [key, setTitle] = useAtom(keyAtom);
@@ -16,6 +17,7 @@ export function useHeader() {
   const [currentTab, setCurrentTab] = useAtom(currentTabAtom);
   const [appbarExtraArea, setAppbarExtraArea] = useAtom(appbarExtraAreaAtom);
   const [headerIcon, setHeaderIcon] = useAtom(headerIconAtom);
+  const [fastNavigation, setFastNavigation] = useAtom(fastNaviationAtom);
   const { i18n } = useI18n()
 
   useEffect(() => {
@@ -29,6 +31,7 @@ export function useHeader() {
     tabs, setTabs,
     currentTab, setCurrentTab,
     appbarExtraArea, setAppbarExtraArea,
-    headerIcon, setHeaderIcon
+    headerIcon, setHeaderIcon,
+    fastNavigation, setFastNavigation,
   }
 }