feat: update

components/common/Header/index.tsx

@@ -11,17 +11,22 @@ export default function Header() {
 
   const toggleMenu = useCallback(() => {
     setOpen((o) => !o);
-  }, [setOpen]);
+  }, []);
 
   const closeMenu = useCallback(() => {
     setOpen(false);
-  }, [setOpen]);
+  }, []);
 
   return (
     <header className={clsx("header", { open })}>
       <ClickAwayListener onClickAway={closeMenu}>
         <div className="container">
-          <Link href="/" className="logo mr-5" title="NovelDit" onClick={closeMenu}>
+          <Link
+            href="/"
+            className="logo mr-5"
+            title="NovelDit"
+            onClick={closeMenu}
+          >
             {/* eslint-disable-next-line @next/next/no-img-element */}
             <img src="/logo.svg" alt="NovelDit" />
             <span>NovelDit</span>
@@ -30,7 +35,12 @@ export default function Header() {
             <nav>
               <ul>
                 <li>
-                  <Link className="menu-item" href="/novels" title="Genre" onClick={closeMenu}>
+                  <Link
+                    className="menu-item"
+                    href="/novels"
+                    title="Genre"
+                    onClick={closeMenu}
+                  >
                     <svg width="24" height="24">
                       <use href="/icons.svg#browse"></use>
                     </svg>

components/novel/Toc/index.tsx

@@ -11,10 +11,11 @@ interface TocProps {
   novel: string;
   chapter: string;
   className?: string;
+  onChangeSettings?: (type?: string) => void;
 }
 
 const Toc = (props: TocProps) => {
-  const { novel, chapter, className } = props;
+  const { novel, chapter, className, onChangeSettings } = props;
 
   const { data: { data: chapters } = { data: null } } = useGet<ChapterListData>(
     `/api/novel/${novel}/chapters`
@@ -46,7 +47,12 @@ const Toc = (props: TocProps) => {
               [styles["current"]]: item.uri === `${novel}/${chapter}`,
             })}
           >
-            <Link href={`/novel/${item.uri}`} title={item.name} key={item.id}>
+            <Link
+              href={`/novel/${item.uri}`}
+              title={item.name}
+              key={item.id}
+              onClick={() => onChangeSettings("")}
+            >
               <i>{i + 1}</i>
               <strong>{item.name}</strong>
             </Link>
@@ -55,7 +61,7 @@ const Toc = (props: TocProps) => {
       }
       return list;
     },
-    [chapter, chapters, novel]
+    [chapter, chapters, novel, onChangeSettings]
   );
 
   return (

pages/novel/[slug]/[chapter].tsx

@@ -190,6 +190,7 @@ const Chapter: NextPageWithLayout = () => {
             <Toc
               novel={query.slug as string}
               chapter={query.chapter as string}
+              onChangeSettings={handleChangeSettings}
             />
           ) : null}
         </div>