feat: header meta mobile design

Signed-off-by: Innei <tukon479@gmail.com>

global.d.ts

@@ -25,6 +25,15 @@ declare global {
     updateCallbackDone: () => void
     skipTransition(): void
   }
+
+  declare module 'react' {
+    export interface HTMLAttributes<T>
+      extends AriaAttributes,
+        DOMAttributes<T> {
+      'data-hide-print'?: boolean
+      'data-testid'?: string
+    }
+  }
 }
 
 export {}

src/app/notes/layout.tsx

@@ -19,7 +19,8 @@ export default async (props: PropsWithChildren) => {
 
         <main
           className={clsx(
-            'relative bg-base-100 p-[30px_45px] md:col-start-1 lg:col-auto',
+            'relative bg-base-100 md:col-start-1 lg:col-auto',
+            '-m-4 p-[2rem_1rem] lg:m-0 lg:p-[30px_45px]',
             'rounded-[0_6px_6px_0] border border-[#bbb3]',
             'note-layout-main',
           )}

src/components/layout/header/Header.tsx

@@ -1,7 +1,9 @@
 import { memo } from 'react'
 
+import { OnlyMobile } from '~/components/ui/viewport/OnlyMobile'
 import { clsxm } from '~/utils/helper'
 
+import { AnimatedLogo } from './internal/AnimatedLogo'
 import { BluredBackground } from './internal/BluredBackground'
 import styles from './internal/grid.module.css'
 import {
@@ -13,7 +15,6 @@ import { HeaderContent } from './internal/HeaderContent'
 import { HeaderDataConfigureProvider } from './internal/HeaderDataConfigureProvider'
 import { HeaderDrawerButton } from './internal/HeaderDrawerButton'
 import { HeaderMeta } from './internal/HeaderMeta'
-import { Logo } from './internal/Logo'
 import { SiteOwnerAvatar } from './internal/SiteOwnerAvatar'
 import { UserAuth } from './internal/UserAuth'
 
@@ -40,8 +41,11 @@ const MemoedHeader = memo(() => {
         </HeaderLeftButtonArea>
 
         <HeaderLogoArea>
-          <Logo />
+          <AnimatedLogo />
           <SiteOwnerAvatar className="hidden lg:inline-block" />
+          <OnlyMobile>
+            <HeaderMeta />
+          </OnlyMobile>
         </HeaderLogoArea>
 
         <HeaderCenterArea>

src/components/layout/header/internal/AnimatedLogo.tsx

@@ -0,0 +1,30 @@
+'use client'
+
+import { AnimatePresence, motion } from 'framer-motion'
+
+import { useViewport } from '~/atoms'
+
+import { useHeaderMetaShouldShow } from './hooks'
+import { Logo } from './Logo'
+
+export const AnimatedLogo = () => {
+  const shouldShowMeta = useHeaderMetaShouldShow()
+
+  const isDesktop = useViewport(($) => $.lg && $.w !== 0)
+
+  if (isDesktop) return <Logo />
+
+  return (
+    <AnimatePresence>
+      {!shouldShowMeta && (
+        <motion.div
+          initial={{ opacity: 0 }}
+          animate={{ opacity: 1 }}
+          exit={{ opacity: 0 }}
+        >
+          <Logo />
+        </motion.div>
+      )}
+    </AnimatePresence>
+  )
+}

src/components/layout/header/internal/HeaderArea.tsx

@@ -8,7 +8,9 @@ import styles from './grid.module.css'
 export const HeaderLogoArea: Component = ({ children }) => {
   return (
     <div className={clsxm('relative', styles['header--grid__logo'])}>
-      <div className={clsxm('relative flex justify-center')}>{children}</div>
+      <div className={clsxm('relative flex h-full w-full justify-center')}>
+        {children}
+      </div>
     </div>
   )
 }

src/components/layout/header/internal/HeaderMeta.tsx

@@ -35,7 +35,8 @@ export const HeaderMeta = () => {
     <AnimatePresence>
       {show && (
         <motion.div
-          className="absolute inset-0 flex min-w-0 items-center justify-between px-[4rem]"
+          className="absolute inset-0 flex min-w-0 items-center justify-between px-0 lg:px-[4rem]"
+          data-testid="header-meta"
           {...animationProps}
         >
           <div className="align-center flex min-w-0 flex-shrink flex-grow flex-col">
@@ -47,7 +48,7 @@ export const HeaderMeta = () => {
             </h2>
           </div>
 
-          <div className="flex min-w-0 flex-shrink-0 flex-col text-right leading-5">
+          <div className="hidden min-w-0 flex-shrink-0 flex-col text-right leading-5 lg:flex">
             <span className="whitespace-pre text-base-content"> {slug}</span>
             <span className="font-medium text-gray-400 dark:text-gray-600">
               {seoTitle}

src/components/layout/header/internal/UserAuth.tsx

@@ -22,7 +22,7 @@ export function UserAuth() {
   return (
     <AnimatePresence>
       <SignedIn key="user-info">
-        <div className="pointer-events-auto flex h-10 items-center">
+        <div className="pointer-events-auto flex h-10 w-full items-center justify-center">
           <UserButton
             afterSignOutUrl={url(pathname).href}
             appearance={{

src/components/ui/viewport/OnlyDesktop.tsx

@@ -7,7 +7,7 @@ import type { ExtractAtomValue } from 'jotai/vanilla'
 import { viewportAtom } from '~/atoms/viewport'
 import { useIsClient } from '~/hooks/common/use-is-client'
 
-const selector = (v: ExtractAtomValue<typeof viewportAtom>) => v.lg
+const selector = (v: ExtractAtomValue<typeof viewportAtom>) => v.lg && v.w !== 0
 export const OnlyDesktop: Component = ({ children }) => {
   const isClient = useIsClient()