✨ update post page style

JohnsonMao · Nov 4, 2023 · c1811df · c1811df
1 parent 4b0b07a
commit c1811df
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 18 deletions.
diff --git a/src/app/[lang]/Header.tsx b/src/app/[lang]/Header.tsx
@@ -35,10 +35,12 @@ function Header({ avatar, children, scrollThreshold = 100 }: HeaderProps) {
   );
 
   const handleScrollUp = useCallback(
-    (scrollY: number) => {
+    (scrollY: number, deltaScrollY: number) => {
       const newHeaderTranslateY = scrollY - scrollThreshold * 2;
 
-      if (newHeaderTranslateY > headerTranslateY) {
+      if (deltaScrollY < scrollThreshold / -4) {
+        setHeaderFixed(true);
+      } else if (newHeaderTranslateY > headerTranslateY) {
         setHeaderTranslateY(newHeaderTranslateY);
       } else if (scrollY - scrollThreshold < headerTranslateY) {
         setHeaderFixed(true);
@@ -72,7 +74,7 @@ function Header({ avatar, children, scrollThreshold = 100 }: HeaderProps) {
       if (isScrollingDown) {
         handleScrollDown(currentScrollY);
       } else {
-        handleScrollUp(currentScrollY);
+        handleScrollUp(currentScrollY, deltaScrollY);
       }
 
       handleAvatarScale(currentScrollY);

diff --git a/src/app/[lang]/posts/[postId]/page.tsx b/src/app/[lang]/posts/[postId]/page.tsx
@@ -45,19 +45,23 @@ async function PostPage({ params: { postId } }: PostParams) {
         </H1>
         <time>{formattedDate}</time>
       </Container>
-      <Container as="main" className="py-8">
-        <article className="prose prose-xl prose-slate mx-auto dark:prose-invert">
-          {content}
-        </article>
-        <Link href="/">回首頁</Link>
-        <Comment />
+      <Container as="main" className="mx-2 block py-8 lg:flex lg:px-2">
+        <aside className="hidden w-40 shrink-0 lg:block xl:w-60">
+          <nav className="sticky top-[var(--header-height)] px-4">
+            <h4 className="my-3 text-lg font-semibold text-gray-900 transition-colors dark:text-gray-100">
+              目錄
+            </h4>
+            <TableOfContents source={source} />
+          </nav>
+        </aside>
+        <div>
+          <article className="prose prose-xl prose-slate mx-auto dark:prose-invert">
+            {content}
+          </article>
+          <Link href="/">回首頁</Link>
+          <Comment />
+        </div>
       </Container>
-      <aside className="fixed bottom-0 left-4 top-16 w-40 overflow-auto">
-        <p className="my-3 text-lg font-semibold text-gray-900 transition-colors dark:text-gray-100">
-          目錄
-        </p>
-        <TableOfContents source={source} />
-      </aside>
     </>
   );
 }

diff --git a/src/app/css/globals.css b/src/app/css/globals.css
@@ -6,5 +6,6 @@
 @import "./prism-vsc-dark-plus.css";
 
 :root {
-  scroll-padding-top: 2rem;
+  --header-height: 100px;
+  scroll-padding-top: var(--header-height);
 }
diff --git a/src/components/TableOfContents/TableOfContents.tsx b/src/components/TableOfContents/TableOfContents.tsx
@@ -51,10 +51,11 @@ function TableOfContents({ source }: TableOfContentsProps) {
           <li key={heading.id}>
             <Link
               href={`#${heading.id}`}
+              title={heading.text}
               className={cn(
-                'mb-3 text-left text-sm transition-colors hover:underline',
+                'mb-0.5 block overflow-hidden text-ellipsis whitespace-nowrap text-left text-sm transition-colors hover:underline',
                 heading.id === activeId
-                  ? 'text-primary-500 hover:text-primary-600 dark:hover:text-primary-400 font-medium'
+                  ? 'font-medium text-primary-500 hover:text-primary-600 dark:hover:text-primary-400'
                   : 'font-normal text-gray-500 hover:text-gray-800 dark:text-gray-400 dark:hover:text-gray-200',
                 heading.level === 3 && 'pl-4'
               )}