Add an interactive method for right-swiping to pop up the TOC to the reader page.

.vscode/settings.json

@@ -1,15 +1,16 @@
 {
   "cSpell.words": [
+    "alipay",
     "frontmatter",
+    "giscus",
+    "github",
     "micromessenger",
+    "nextjs",
+    "prin",
     "readerpage",
     "rehype",
-    "wechat",
-    "alipay",
+    "Swipeable",
     "vercel",
-    "github",
-    "giscus",
-    "nextjs",
-    "prin"
+    "wechat"
   ]
 }

components/readerpage/DrawerTOC.tsx

@@ -1,11 +1,12 @@
 import { Sheet, SheetContent, SheetHeader, SheetTitle, SheetTrigger } from "@/components/ui/sheet";
+import useDrawerTOCState from "@/stores/useDrawerTOCState";
 import { TTOCItem } from "@/types/toc.type";
 import Link from "next/link";
-import { useState } from "react";
 import { FaHeading } from "react-icons/fa";
 
 export const DrawerTOC = (props: { data: TTOCItem[] }) => {
-  const [isTOCOpen, setIsTOCOpen] = useState(false);
+  const isTOCOpen = useDrawerTOCState((state) => state.isOpen);
+  const setIsTOCOpen = useDrawerTOCState((state) => state.changeDrawerTOCOpen);
   return (
     <Sheet open={isTOCOpen} onOpenChange={setIsTOCOpen}>
       <SheetTrigger

pages/blog/[id].tsx

@@ -14,6 +14,7 @@ import { Config } from "@/data/config";
 import { normalizeDate } from "@/lib/date";
 import { getPostFileContent, sortedPosts } from "@/lib/post-process";
 import { getTOCTree } from "@/lib/toc";
+import useDrawerTOCState from "@/stores/useDrawerTOCState";
 import { fontFangZhengXiaoBiaoSongCN, fontSourceSerifScreenCN } from "@/styles/font";
 import { TFrontmatter } from "@/types/frontmatter.type";
 import { TPostListItem } from "@/types/post-list";
@@ -24,6 +25,7 @@ import { MDXRemote, MDXRemoteSerializeResult } from "next-mdx-remote";
 import { serialize } from "next-mdx-remote/serialize";
 import Link from "next/link";
 import { renderToString } from "react-dom/server";
+import { useSwipeable } from "react-swipeable";
 import rehypeAutolinkHeadings from "rehype-autolink-headings";
 import rehypeKatex from "rehype-katex";
 import rehypePresetMinify from "rehype-preset-minify";
@@ -45,7 +47,12 @@ type ReaderPageProps = {
 
 const ReaderPage = (props: ReaderPageProps) => {
   const source = props.source;
-
+  const setIsTOCOpen = useDrawerTOCState((state) => state.changeDrawerTOCOpen);
+  const handleRightSwipe = useSwipeable({
+    onSwipedRight: () => {
+      setIsTOCOpen(true);
+    },
+  });
   return (
     <Page>
       <SEO
@@ -91,6 +98,7 @@ const ReaderPage = (props: ReaderPageProps) => {
               className={`typesetting ${fontSourceSerifScreenCN.className} mt-0 mb-10 ${
                 !props.frontMatter.allowShare && "select-none"
               }`}
+              {...handleRightSwipe}
             >
               {source && (
                 <MDXRemote

stores/useDrawerTOCState.ts

@@ -0,0 +1,16 @@
+import { create } from "zustand";
+
+type State = {
+  isOpen: boolean;
+};
+
+type Action = {
+  changeDrawerTOCOpen: (open: State["isOpen"]) => void;
+};
+
+const useDrawerTOCState = create<State & Action>((set) => ({
+  isOpen: false,
+  changeDrawerTOCOpen: (open) => set({ isOpen: open }),
+}));
+
+export default useDrawerTOCState;