diff --git a/directory/src/component/dropdown.jsx b/directory/src/component/dropdown.jsx index 433dd9d..320520e 100644 --- a/directory/src/component/dropdown.jsx +++ b/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' @@ -13,7 +13,7 @@ export default function Dropdown(props) { return ( <> -
+
toggleDropdown()} diff --git a/directory/src/component/scss/dropdown.module.scss b/directory/src/component/scss/dropdown.module.scss index 7cb3c99..a2479b0 100644 --- a/directory/src/component/scss/dropdown.module.scss +++ b/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; diff --git a/directory/src/routes/Root.jsx b/directory/src/routes/Root.jsx index 3a7e0ef..cef9f1d 100644 --- a/directory/src/routes/Root.jsx +++ b/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 ( { navigate(item.value) diff --git a/directory/src/routes/path/Home.jsx b/directory/src/routes/path/Home.jsx index fef6515..75b5c2d 100644 --- a/directory/src/routes/path/Home.jsx +++ b/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) diff --git a/directory/src/state/header.js b/directory/src/state/header.js index 0017087..0692fde 100644 --- a/directory/src/state/header.js +++ b/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, } }