update

components/VirtualScroll/index.tsx

@@ -37,7 +37,7 @@ export default function VirtualScroll(props: VirtualScrollProps) {
     [itemHeight, scrollY]
   );
   const limit = useMemo(() => {
-    return Math.floor(wrapHeight / itemHeight) + 1;
+    return Math.floor(wrapHeight / itemHeight) + 2;
   }, [itemHeight, wrapHeight]);
   const [wrapElement, setWrapElement] = useState<HTMLDivElement | null>(null);
 

components/novel/Settings/index.tsx

@@ -46,6 +46,7 @@ interface SettingsProps {
   fontSize: number;
   changeIsSerif: (isSerif: boolean) => void;
   changeFontSize: (fontSize: FontSize) => void;
+  onChangeSettings: (type?: string) => void;
 }
 
 function valuetext(value: number) {
@@ -53,7 +54,8 @@ function valuetext(value: number) {
 }
 
 const Settings = (props: SettingsProps) => {
-  const { isSerif, fontSize, changeIsSerif, changeFontSize } = props;
+  const { isSerif, fontSize, changeIsSerif, changeFontSize, onChangeSettings } =
+    props;
 
   const handleChangeFontSize = useCallback(
     (add = 1) => {
@@ -67,14 +69,24 @@ const Settings = (props: SettingsProps) => {
 
   return (
     <div className={styles["toolbar-inner"]}>
-      <div className={styles["toolbar-display-title"]}>Display Options</div>
+      <div className={styles["toolbar-display-title"]}>
+        Display Options
+        <button
+          className={styles["btn-close"]}
+          onClick={() => onChangeSettings("")}
+        >
+          <svg className={styles["icon-close"]}>
+            <use href="/icons.svg#close"></use>
+          </svg>
+        </button>
+      </div>
       <div className={styles["toolbar-display-label"]}>Background</div>
       <div className="btn-group w-full">
         <button
           className="btn btn-primary btn-dark-outline"
           onClick={() => toggleTheme("light")}
         >
-          <svg className="icon-sun  mr-2" viewBox="0 0 16 16">
+          <svg className="icon-sun  mr-2">
             <use href="/icons.svg#sun"></use>
           </svg>
           Light
@@ -83,7 +95,7 @@ const Settings = (props: SettingsProps) => {
           className="btn btn-primary btn-light-outline"
           onClick={() => toggleTheme("dark")}
         >
-          <svg className="icon-moon mr-2" viewBox="0 0 16 16">
+          <svg className="icon-moon mr-2">
             <use href="/icons.svg#moon"></use>
           </svg>
           Dark

components/novel/Toc/index.tsx

@@ -11,7 +11,7 @@ interface TocProps {
   novel: string;
   chapter: string;
   className?: string;
-  onChangeSettings?: (type?: string) => void;
+  onChangeSettings: (type?: string) => void;
 }
 
 const Toc = (props: TocProps) => {
@@ -66,7 +66,17 @@ const Toc = (props: TocProps) => {
 
   return (
     <div className={clsx(styles["toolbar-inner"], className)}>
-      <div className={styles["toolbar-display-title"]}>Chapters</div>
+      <div className={styles["toolbar-display-title"]}>
+        Chapters
+        <button
+          className={styles["btn-close"]}
+          onClick={() => onChangeSettings("")}
+        >
+          <svg className={styles["icon-close"]}>
+            <use href="/icons.svg#close"></use>
+          </svg>
+        </button>
+      </div>
       {chapters ? (
         <VirtualScroll
           component="ol"
@@ -77,18 +87,6 @@ const Toc = (props: TocProps) => {
           startIndex={startIndex}
         />
       ) : null}
-      {/* {chapters ? (
-        <ol>
-          {chapters.chapters.map((item) => (
-            <li key={item.id}>
-              <Link href={`/novel/${item.uri}`} title={item.name}>
-                <i>1</i>
-                <strong>{item.name}</strong>
-              </Link>
-            </li>
-          ))}
-        </ol>
-      ) : null} */}
     </div>
   );
 };

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

@@ -184,6 +184,7 @@ const Chapter: NextPageWithLayout = () => {
                 fontSize={fontSize}
                 changeIsSerif={handleSetIsSerif}
                 changeFontSize={handleSetFontSize}
+                onChangeSettings={handleChangeSettings}
               />
             ) : null}
             {menu === "toc" ? (

public/icons.svg

@@ -57,4 +57,7 @@
         <path d="M450.132791 39.305973c-15.722389-55.028362-94.334336-55.028362-110.056725 0L2.044697 943.343357c-7.861195 31.444779 7.861195 62.889557 31.444779 78.611946 31.444779 7.861195 62.889557-7.861195 78.611946-31.444779L222.158147 707.507518l353.753759 0 102.19553 275.141812c7.861195 31.444779 47.167168 47.167168 78.611946 31.444779 31.444779-7.861195 47.167168-47.167168 31.444779-78.611946L450.132791 39.305973zM261.46412 589.589598 395.104429 227.974645l133.640309 361.614953L261.46412 589.589598z"></path>
         <path d="M1196.946282 589.589598l-117.91792 0L1079.028362 471.671678c0-31.444779-23.583584-62.889557-62.889557-62.889557S961.110443 440.2269 961.110443 471.671678l0 117.91792-117.91792 0c-31.444779 0-62.889557 23.583584-62.889557 62.889557S811.747745 707.507518 851.053718 707.507518l117.91792 0 0 117.91792c0 31.444779 23.583584 62.889557 62.889557 62.889557s62.889557-23.583584 62.889557-62.889557L1094.750752 707.507518l117.91792 0C1236.252255 707.507518 1259.835839 683.923934 1259.835839 644.617961S1236.252255 589.589598 1196.946282 589.589598z"></path>
     </symbol>
+    <symbol id="close" focusable="false" aria-hidden="true" viewBox="0 0 24 24">
+        <path d="M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"></path>
+    </symbol>
 </svg>

styles/chapter.module.scss

@@ -36,23 +36,12 @@
 .toolbar {
   color-scheme: dark;
 
-  @apply fixed bottom-0 left-0 w-full bg-gray-900 z-30 text-gray-400; // hidden;
-  @apply lg:bg-gray-800 lg:right-0 lg:w-auto lg:left-auto lg:h-full lg:flex lg:items-center lg:justify-center;
+  @apply fixed bottom-0 left-0 w-full bg-gray-900 z-30 text-gray-400 shadow-lg shadow-white; // hidden;
+  @apply lg:bg-gray-800 lg:right-0 lg:w-auto lg:left-auto lg:h-full lg:flex lg:items-center lg:justify-center lg:shadow-none;
   .toolbar-items {
     @apply flex lg:flex-col lg:w-full;
   }
   .toolbar-item {
-    // position: relative;
-    // display: flex;
-    // height: 100%;
-    // flex-basis: 100%;
-    // cursor: pointer;
-    // flex-direction: column;
-    // align-items: center;
-    // justify-content: center;
-    // gap: 0.25rem;
-    // border-color: currentColor;
-
     @apply flex-1 flex items-center justify-center py-5 lg:border-t lg:border-t-gray-900 lg:p-4 lg:hover:bg-gray-700 lg:last:border-b lg:last:border-b-gray-900;
     svg {
       @apply w-5 h-5 lg:w-4 lg:h-4;
@@ -65,10 +54,16 @@
 .toolbar-display {
   color-scheme: dark;
 
-  @apply fixed bottom-0 left-0 w-full bg-gray-900 text-gray-100 z-30 pt-4 pb-16 px-5 shadow-xl shadow-white/10;
+  @apply fixed bottom-0 left-0 w-full bg-gray-900 text-gray-100 z-30 pt-4 pb-24 px-5 shadow-xl shadow-white/10;
   @apply lg:w-96 lg:max-h-[calc(100vh-65px)] lg:sticky lg:top-[65px] lg:pb-4 lg:px-0;
   .toolbar-display-title {
-    @apply text-base mb-2;
+    @apply flex text-base mb-2 items-center justify-between;
+    .btn-close {
+      @apply w-6 h-6;
+      .icon-close {
+        @apply w-6 h-6;
+      }
+    }
   }
   .toolbar-display-label {
     @apply text-sm mb-2 mt-5;