Always show site title on large screens

jiajiafish · Mar 27, 2023 · dc064c7 · dc064c7
1 parent 8a98219
commit dc064c7
Show file tree

Hide file tree

Showing 2 changed files with 50 additions and 28 deletions.
diff --git a/components/Header.js b/components/Header.js
@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useRef, useState } from 'react'
+import { forwardRef, useCallback, useEffect, useRef, useState } from 'react'
 import Link from 'next/link'
 import Image from 'next/image'
 import BLOG from '@/blog.config'
@@ -32,7 +32,7 @@ const NavBar = () => {
   )
 }
 
-const Header = ({ navBarTitle, fullWidth }) => {
+export default function Header ({ navBarTitle, fullWidth }) {
   const { dark } = useTheme()
 
   // Favicon
@@ -73,7 +73,10 @@ const Header = ({ navBarTitle, fullWidth }) => {
   function handleClickHeader (/** @type {MouseEvent} */ ev) {
     if (![navRef.current, titleRef.current].includes(ev.target)) return
 
-    window.scrollTo({ top: 0, behavior: 'smooth' })
+    window.scrollTo({
+      top: 0,
+      behavior: 'smooth'
+    })
   }
 
   return (
@@ -106,29 +109,32 @@ const Header = ({ navBarTitle, fullWidth }) => {
               onError={() => setFavicon(true)}
             />
           </Link>
-          {navBarTitle ? (
-            <p
-              ref={titleRef}
-              className="ml-2 font-medium text-day dark:text-night header-name"
-              onClick={handleClickHeader}
-            >
-              {navBarTitle}
-            </p>
-          ) : (
-            <p
-              ref={titleRef}
-              className="ml-2 font-medium text-day dark:text-night header-name"
-              onClick={handleClickHeader}
-            >
-              {BLOG.title},{' '}
-              <span className="font-normal">{BLOG.description}</span>
-            </p>
-          )}
+          <HeaderName
+            ref={titleRef}
+            siteTitle={BLOG.title}
+            siteDescription={BLOG.description}
+            postTitle={navBarTitle}
+            onClick={handleClickHeader}
+          />
         </div>
         <NavBar />
       </div>
     </>
   )
 }
 
-export default Header
+const HeaderName = forwardRef(function HeaderName ({ siteTitle, siteDescription, postTitle, onClick }, ref) {
+  return (
+    <p
+      ref={ref}
+      className="header-name ml-2 font-medium text-gray-600 dark:text-gray-300 grid-rows-1 grid-cols-1"
+      onClick={onClick}
+    >
+      {postTitle && <span className="post-title row-start-1 col-start-1">{postTitle}</span>}
+      <span className="row-start-1 col-start-1">
+        <span className="site-title">{siteTitle}</span>
+        <span className="site-description font-normal">, {siteDescription}</span>
+      </span>
+    </p>
+  )
+})
diff --git a/styles/globals.css b/styles/globals.css
@@ -91,7 +91,6 @@ body::-webkit-scrollbar-thumb {
 
 .header-name {
   display: none;
-  opacity: 0;
   overflow: hidden;
 }
 
@@ -127,13 +126,30 @@ nav {
     @apply max-w-full border-b border-opacity-50 border-gray-200 dark:border-gray-600 dark:border-opacity-50;
   }
   .header-name {
-    display: block;
+    display: grid;
+  }
+  .site-title,
+  .post-title {
+    @apply transition duration-500;
+  }
+  .site-description {
     opacity: 0;
-    transition: all 0.5s cubic-bezier(0.4, 0, 0, 1);
+    transition: opacity 0.5s cubic-bezier(0.4, 0, 0, 1);
+  }
+  .sticky-nav-full .site-description {
+    @apply opacity-0 transition duration-500;
+  }
+  .post-title {
+    @apply opacity-0;
+  }
+  .post-title ~ span .site-description {
+    @apply hidden;
+  }
+  .sticky-nav-full .post-title {
+    @apply opacity-100;
   }
-  .sticky-nav-full .header-name {
-    opacity: 1;
-    @apply dark:text-gray-300 text-gray-600;
+  .sticky-nav-full .post-title ~ span .site-title {
+    @apply opacity-0;
   }
 }