fix(TOC): mobile button not hide with the nav.

ZL-Asica · Nov 14, 2024 · 9f86b05 · 9f86b05
1 parent 8621dbb
commit 9f86b05
Showing 1 changed file with 8 additions and 6 deletions.
diff --git a/src/components/posts/TOC.tsx b/src/components/posts/TOC.tsx
@@ -17,11 +17,15 @@ const TOC = ({ items, showThumbnail = true }: TOCProperties) => {
   const { isVisible } = useVisibilityOnScroll(showThumbnail ? undefined : 0);
 
   return (
-    <>
+    <div
+      className={`${isVisible ? 'opacity-100' : 'opacity-0'} duration-200 ease-in-out`}
+    >
       <button
+        hidden={!isVisible}
+        aria-hidden={!isVisible}
         onClick={handleToggle}
         aria-label='Toggle Table of Contents'
-        className={`fixed bottom-28 right-8 z-50 flex h-12 w-12 items-center justify-center rounded-full bg-sakuraPink p-3 text-white shadow-lg transition-transform duration-300 ease-in-out md:right-16 lg:right-20 xl:hidden ${
+        className={`fixed bottom-28 right-8 z-50 flex h-12 w-12 items-center justify-center rounded-full bg-sakuraPink p-3 text-white shadow-lg transition-transform md:right-16 lg:right-20 xl:hidden ${
           isOpen ? 'translate-y-2' : 'hover:scale-110'
         }`}
       >
@@ -31,9 +35,7 @@ const TOC = ({ items, showThumbnail = true }: TOCProperties) => {
         ref={tocReference}
         hidden={!isVisible}
         aria-hidden={!isVisible}
-        className={`${
-          isVisible ? 'opacity-100' : 'opacity-0'
-        } fixed bottom-40 top-auto z-40 max-h-[60vh] w-auto max-w-56 overflow-auto rounded-lg bg-white p-3 shadow-md transition-all duration-200 ease-in-out dark:bg-gray-800 xl:bottom-auto xl:top-36 ${
+        className={`fixed bottom-40 top-auto z-40 max-h-[60vh] w-auto max-w-56 overflow-auto rounded-lg bg-white p-3 shadow-md transition-all dark:bg-gray-800 xl:bottom-auto xl:top-36 ${
           isOpen ? 'translate-x-0' : '-translate-x-full'
         } right-8 xl:right-[calc((100vw-1280px)/2+10px)] xl:block xl:translate-x-0 ${!isOpen && 'hidden xl:block'} text-wrap break-words`}
       >
@@ -49,7 +51,7 @@ const TOC = ({ items, showThumbnail = true }: TOCProperties) => {
           />
         ))}
       </nav>
-    </>
+    </div>
   );
 };