diff --git a/src/components/AccountManager.tsx b/src/components/AccountManager.tsx index 1bc6407f..9fa5ca58 100644 --- a/src/components/AccountManager.tsx +++ b/src/components/AccountManager.tsx @@ -24,6 +24,7 @@ import { LoginPanel } from 'components/account/LoginPanel' import { EditorFieldProps } from 'components/editor/EditorFieldProps' import { authAtom } from 'store/auth' import { NetworkError } from 'utils/fetcher' +import { useCurrentSize } from 'utils/useCurrenSize' import { useNetworkState } from 'utils/useNetworkState' import { wrapErrorMessage } from 'utils/wrapErrorMessage' @@ -303,6 +304,7 @@ export const AccountAuthDialog: ComponentType<{ export const AccountManager: ComponentType = withGlobalErrorBoundary(() => { const [open, setOpen] = useState(false) const [authState] = useAtom(authAtom) + const { isSM } = useCurrentSize() return ( <> @@ -318,7 +320,7 @@ export const AccountManager: ComponentType = withGlobalErrorBoundary(() => { ) : ( )} diff --git a/src/components/NavExpandButton.tsx b/src/components/NavExpandButton.tsx new file mode 100644 index 00000000..bc9dfc65 --- /dev/null +++ b/src/components/NavExpandButton.tsx @@ -0,0 +1,19 @@ +import { Button } from '@blueprintjs/core' + +import { useAtomValue, useSetAtom } from 'jotai' + +import { navAtom, toggleExpandNavAtom } from 'store/nav' + +export const NavExpandButton = () => { + const expanded = useAtomValue(navAtom) + const toggleExpaned = useSetAtom(toggleExpandNavAtom) + + return ( +
+
+ ) +} diff --git a/src/components/OperationCard.tsx b/src/components/OperationCard.tsx index 756790d9..82ddd422 100644 --- a/src/components/OperationCard.tsx +++ b/src/components/OperationCard.tsx @@ -51,46 +51,69 @@ export const OperationCard = ({ setDrawerOpen(true)} > -
-

- {operationDoc.doc.title} -

- 下载原 JSON
} - > - diff --git a/src/components/drawer/NavAside.tsx b/src/components/drawer/NavAside.tsx new file mode 100644 index 00000000..b83049fa --- /dev/null +++ b/src/components/drawer/NavAside.tsx @@ -0,0 +1,48 @@ +import { Button, Portal } from '@blueprintjs/core' + +import { useAtomValue, useSetAtom } from 'jotai' +import { LINKS } from 'layouts/AppLayout' +import { NavLink } from 'react-router-dom' + +import { navAtom, toggleExpandNavAtom } from 'store/nav' + +export const NavAside = () => { + const nav = useAtomValue(navAtom) + const toggleNav = useSetAtom(toggleExpandNavAtom) + const navLinks = [...LINKS] + + if (!nav.expanded) return null + + return ( + + {/* todo: 这里可以重写移动端header 需要去掉top */} +
+
+ +
+
+ + ) +} diff --git a/src/layouts/AppLayout.tsx b/src/layouts/AppLayout.tsx index 86ddc019..d949ec94 100644 --- a/src/layouts/AppLayout.tsx +++ b/src/layouts/AppLayout.tsx @@ -5,9 +5,11 @@ import { FCC } from 'types' import { AccountManager } from 'components/AccountManager' import { BackToTop } from 'components/BackToTop' +import { NavExpandButton } from 'components/NavExpandButton' import { ThemeSwitchButton } from 'components/ThemeSwitchButton' +import { NavAside } from 'components/drawer/NavAside' -const LINKS: { +export const LINKS: { to: string label: string icon: IconName @@ -28,7 +30,7 @@ const LINKS: { export const AppLayout: FCC = ({ children }) => (
- +
MAA Copilot @@ -41,25 +43,31 @@ export const AppLayout: FCC = ({ children }) => (
- {LINKS.map((link) => ( - - {({ isActive }) => ( - - )} - - ))} +
+ {LINKS.map((link) => ( + + {({ isActive }) => ( + + )} + + ))} +
- - +
+ + + +
+
{children}
diff --git a/src/store/nav.ts b/src/store/nav.ts new file mode 100644 index 00000000..6d0b2625 --- /dev/null +++ b/src/store/nav.ts @@ -0,0 +1,16 @@ +import { atom } from 'jotai' + +interface NavState { + expanded?: boolean +} + +export const navAtom = atom({ + expanded: false, +}) + +export const toggleExpandNavAtom = atom(null, (get, set, value) => { + set(navAtom, { + ...get(navAtom), + expanded: !get(navAtom).expanded, + }) +}) diff --git a/src/utils/useCurrenSize.ts b/src/utils/useCurrenSize.ts new file mode 100644 index 00000000..a0ac2d66 --- /dev/null +++ b/src/utils/useCurrenSize.ts @@ -0,0 +1,15 @@ +import { useMemo } from 'react' +import { useWindowSize } from 'react-use' + +// https://tailwindcss.com/docs/container +export const useCurrentSize = () => { + const { width } = useWindowSize() + + const isSM = useMemo(() => width < 640, [width]) + const isMD = useMemo(() => width >= 640 && width < 768, [width]) + const isLG = useMemo(() => width >= 768 && width < 1024, [width]) + const isXL = useMemo(() => width >= 1024 && width < 1280, [width]) + const is2XL = useMemo(() => width >= 1280 && width < 1536, [width]) + + return { isSM, isMD, isLG, isXL, is2XL } +}