feat: header responsive

Signed-off-by: Innei <[email protected]>

Author: Innei

src/components/layout/header/Header.tsx

@@ -1,11 +1,20 @@
 import { memo } from 'react'
 
-import { BluredBackground } from './BluredBackground'
-import { HeaderContent } from './HeaderContent'
-import { HeaderDataConfigureProvider } from './HeaderDataConfigureProvider'
-import { Logo } from './Logo'
-import { SiteOwnerAvatar } from './SiteOwnerAvatar'
-import { UserAuth } from './UserAuth'
+import { clsxm } from '~/utils/helper'
+
+import { BluredBackground } from './internal/BluredBackground'
+import { headerGrid } from './internal/grid.css'
+import {
+  HeaderCenterArea,
+  HeaderLeftButtonArea,
+  HeaderLogoArea,
+} from './internal/HeaderArea'
+import { HeaderContent } from './internal/HeaderContent'
+import { HeaderDataConfigureProvider } from './internal/HeaderDataConfigureProvider'
+import { HeaderDrawerButton } from './internal/HeaderDrawerButton'
+import { Logo } from './internal/Logo'
+import { SiteOwnerAvatar } from './internal/SiteOwnerAvatar'
+import { UserAuth } from './internal/UserAuth'
 
 export const Header = () => {
   return (
@@ -19,17 +28,26 @@ const MemoedHeader = memo(() => {
   return (
     <header className="fixed left-0 right-0 top-0 z-[9] h-[4.5rem]">
       <BluredBackground />
-      <div className="relative mx-auto grid h-full min-h-0 max-w-7xl grid-cols-[4.5rem_auto_4.5rem] lg:px-8">
-        <div className="relative">
+      <div
+        className={clsxm(
+          'relative mx-auto grid h-full min-h-0 max-w-7xl grid-cols-[4.5rem_auto_4.5rem] lg:px-8',
+          headerGrid,
+        )}
+      >
+        <HeaderLeftButtonArea>
+          <HeaderDrawerButton />
+        </HeaderLeftButtonArea>
+
+        <HeaderLogoArea>
           <Logo />
-          <SiteOwnerAvatar />
-        </div>
-        <div className="flex min-w-0 flex-grow">
-          <div className="flex flex-grow items-center justify-center">
-            <HeaderContent />
-          </div>
-        </div>
-        <div className="flex items-center">
+          <SiteOwnerAvatar className="hidden lg:inline-block" />
+        </HeaderLogoArea>
+
+        <HeaderCenterArea>
+          <HeaderContent />
+        </HeaderCenterArea>
+
+        <div className="flex h-full w-full items-center">
           <UserAuth />
         </div>
       </div>

src/components/layout/header/BluredBackground.tsx renamed to src/components/layout/header/internal/BluredBackground.tsx

@@ -0,0 +1,10 @@
+export const HeaderActionButton: Component = ({ children }) => {
+  return (
+    <button
+      type="button"
+      className="group h-10 rounded-full bg-gradient-to-b from-zinc-50/50 to-white/90 px-3 text-sm shadow-lg shadow-zinc-800/5 ring-1 ring-zinc-900/5 backdrop-blur transition dark:from-zinc-900/50 dark:to-zinc-800/90 dark:ring-white/10 dark:hover:ring-white/20"
+    >
+      {children}
+    </button>
+  )
+}

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

@@ -0,0 +1,39 @@
+'use client'
+
+import { OnlyDesktop } from '~/components/ui/viewport'
+import { clsxm } from '~/utils/helper'
+
+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>
+  )
+}
+
+export const HeaderLeftButtonArea: Component = ({ children }) => {
+  return (
+    <div
+      className={clsxm(
+        'relative flex h-full w-full items-center justify-center lg:hidden',
+        styles['header--grid__left-button'],
+      )}
+    >
+      {children}
+    </div>
+  )
+}
+
+export const HeaderCenterArea: Component = ({ children }) => {
+  return (
+    <OnlyDesktop>
+      <div className="flex min-w-0 flex-grow">
+        <div className="flex flex-grow items-center justify-center">
+          {children}
+        </div>
+      </div>
+    </OnlyDesktop>
+  )
+}

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

@@ -4,10 +4,9 @@ import React, { memo, useMemo } from 'react'
 import { motion, useMotionValue } from 'framer-motion'
 import Link from 'next/link'
 import { usePathname } from 'next/navigation'
-import type { IHeaderMenu } from './config'
+import type { IHeaderMenu } from '../config'
 
 import { FloatPopover } from '~/components/ui/float-popover'
-import { OnlyLg } from '~/components/ui/viewport'
 import { usePageScrollDirection } from '~/providers/root/page-scroll-info-provider'
 import { clsxm } from '~/utils/helper'
 
@@ -16,11 +15,9 @@ import { useHeaderConfig } from './HeaderDataConfigureProvider'
 
 export const HeaderContent = () => {
   return (
-    <OnlyLg>
-      <AnimatedMenu>
-        <ForDesktop />
-      </AnimatedMenu>
-    </OnlyLg>
+    <AnimatedMenu>
+      <ForDesktop />
+    </AnimatedMenu>
   )
 }
 
@@ -116,6 +113,7 @@ const HeaderMenuItem = memo<{
     </MenuPopover>
   )
 })
+
 const MenuPopover: Component<{
   subMenu: IHeaderMenu['subMenu']
 }> = memo(({ children, subMenu }) => {
@@ -128,17 +126,17 @@ const MenuPopover: Component<{
       placement="bottom"
       offset={10}
       popoverWrapperClassNames="z-[19] relative"
-      popoverClassNames="rounded-xl"
+      popoverClassNames="rounded-xl !p-0"
       TriggerComponent={TriggerComponent}
     >
       {!!subMenu.length && (
-        <div className="relative flex w-[130px] flex-col p-4">
+        <div className="relative flex w-[130px] flex-col px-4">
           {subMenu.map((m) => {
             return (
               <Link
                 key={m.title}
                 href={m.path}
-                className="flex w-full items-center justify-around space-x-2 py-3 duration-200 first:pt-0 last:pb-0 hover:text-accent"
+                className="flex w-full items-center justify-around space-x-2 py-3 duration-200 hover:text-accent"
                 role="button"
               >
                 {!!m.icon && <span>{m.icon}</span>}

src/components/layout/header/HeaderContent.tsx renamed to src/components/layout/header/internal/HeaderContent.tsx

@@ -6,7 +6,7 @@ import { createContext, useContext, useEffect, useMemo, useState } from 'react'
 import { useAggregationQuery } from '~/hooks/data/use-aggregation'
 import { cloneDeep } from '~/lib/_'
 
-import { headerMenuConfig as baseHeaderMenuConfig } from './config'
+import { headerMenuConfig as baseHeaderMenuConfig } from '../config'
 
 const HeaderMenuConfigContext = createContext({
   config: baseHeaderMenuConfig,

src/components/layout/header/HeaderDataConfigureProvider.tsx renamed to src/components/layout/header/internal/HeaderDataConfigureProvider.tsx

@@ -0,0 +1,22 @@
+import type { SVGProps } from 'react'
+
+import { HeaderActionButton } from './HeaderActionButton'
+
+function IcBaselineMenuOpen(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg width="1em" height="1em" viewBox="0 0 24 24" {...props}>
+      <path
+        fill="currentColor"
+        d="M3 18h13v-2H3v2zm0-5h10v-2H3v2zm0-7v2h13V6H3zm18 9.59L17.42 12L21 8.41L19.59 7l-5 5l5 5L21 15.59z"
+      />
+    </svg>
+  )
+}
+
+export const HeaderDrawerButton = () => {
+  return (
+    <HeaderActionButton>
+      <IcBaselineMenuOpen />
+    </HeaderActionButton>
+  )
+}

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

@@ -3,19 +3,25 @@
 import Image from 'next/image'
 
 import { useAggregationSelector } from '~/providers/root/aggregation-data-provider'
+import { clsxm } from '~/utils/helper'
 
-export const SiteOwnerAvatar = () => {
+export const SiteOwnerAvatar: Component = ({ className }) => {
   const avatar = useAggregationSelector((data) => data.user.avatar)
 
   if (!avatar) return
   return (
-    <div className="absolute bottom-[8px] right-[-5px] overflow-hidden rounded-full border-[1.5px] border-accent/50">
+    <div
+      className={clsxm(
+        'absolute bottom-[8px] right-[-5px] overflow-hidden rounded-full border-[1.5px] border-accent/50',
+        className,
+      )}
+    >
       <Image
         src={avatar}
         alt=""
         width={25}
         height={25}
-        className="rounded-full border-[1.5px] border-transparent"
+        className="rounded-full border-[1.5px] border-base-100"
       />
     </div>
   )

src/components/layout/header/Logo.tsx renamed to src/components/layout/header/internal/Logo.tsx

@@ -4,24 +4,19 @@ import React from 'react'
 import { AnimatePresence } from 'framer-motion'
 import { usePathname } from 'next/navigation'
 
-import {
-  SignedIn,
-  SignedOut,
-  SignInButton,
-  UserButton,
-  useUser,
-} from '@clerk/nextjs'
+import { SignedIn, SignedOut, SignInButton, UserButton } from '@clerk/nextjs'
 
 import { appConfig } from '~/app.config'
 import { UserArrowLeftIcon } from '~/components/icons/user-arrow-left'
 import { FloatPopover } from '~/components/ui/float-popover'
 
+import { HeaderActionButton } from './HeaderActionButton'
+
 function url(path = '') {
   return new URL(path, appConfig.site.url)
 }
 
 export function UserAuth() {
-  console.log(useUser())
   const pathname = usePathname()
 
   return (
@@ -39,7 +34,11 @@ export function UserAuth() {
         </div>
       </SignedIn>
       <SignedOut key="sign-in">
-        <FloatPopover TriggerComponent={TriggerComponent} type="tooltip">
+        <FloatPopover
+          TriggerComponent={TriggerComponent}
+          wrapperClassNames="h-full w-full flex items-center justify-center"
+          type="tooltip"
+        >
           登陆
         </FloatPopover>
       </SignedOut>
@@ -51,12 +50,9 @@ const TriggerComponent = () => {
   const pathname = usePathname()
   return (
     <SignInButton mode="modal" redirectUrl={url(pathname).href}>
-      <button
-        type="button"
-        className="group h-10 rounded-full bg-gradient-to-b from-zinc-50/50 to-white/90 px-3 text-sm shadow-lg shadow-zinc-800/5 ring-1 ring-zinc-900/5 backdrop-blur transition dark:from-zinc-900/50 dark:to-zinc-800/90 dark:ring-white/10 dark:hover:ring-white/20"
-      >
+      <HeaderActionButton>
         <UserArrowLeftIcon className="h-4 w-4" />
-      </button>
+      </HeaderActionButton>
     </SignInButton>
   )
 }

src/components/layout/header/SiteOwnerAvatar.tsx renamed to src/components/layout/header/internal/SiteOwnerAvatar.tsx

@@ -0,0 +1,17 @@
+import { style } from '@vanilla-extract/css'
+
+export const headerGrid = style({
+  gridTemplateAreas: "'left center right'",
+})
+
+export const headerLogoGrid = style({
+  gridArea: 'left',
+})
+
+export const headerCenterGrid = style({
+  gridArea: 'center',
+})
+
+export const headerRightGrid = style({
+  gridArea: 'right',
+})

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

@@ -0,0 +1,17 @@
+.header--grid {
+  grid-area: 'left center right';
+}
+
+.header--grid__logo {
+  grid-area: center;
+}
+
+.header--grid__left-button {
+  @apply hidden;
+}
+
+@screen lg {
+  .header--grid__logo {
+    grid-area: left;
+  }
+}

src/components/layout/header/internal/grid.css.ts

@@ -8,7 +8,7 @@ import { viewportAtom } from '~/atoms/viewport'
 import { useIsClient } from '~/hooks/common/use-is-client'
 
 const selector = (v: ExtractAtomValue<typeof viewportAtom>) => v.lg
-export const OnlyLg: Component = ({ children }) => {
+export const OnlyDesktop: Component = ({ children }) => {
   const isClient = useIsClient()
 
   const isLg = useAtomValue(selectAtom(viewportAtom, selector))

src/components/layout/header/internal/grid.module.css

@@ -0,0 +1,22 @@
+'use client'
+
+import { useAtomValue } from 'jotai'
+import { selectAtom } from 'jotai/utils'
+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.sm || v.md || !v.sm) && !v.lg
+export const OnlyMobile: Component = ({ children }) => {
+  const isClient = useIsClient()
+
+  const isMobile = useAtomValue(selectAtom(viewportAtom, selector))
+
+  if (!isClient) return null
+
+  if (!isMobile) return null
+
+  return <>{children}</>
+}

src/components/ui/viewport/OnlyLg.tsx renamed to src/components/ui/viewport/OnlyDesktop.tsx

@@ -1 +1 @@
-export * from './OnlyLg'
+export * from './OnlyDesktop'

src/components/ui/viewport/OnlyMobile.tsx

@@ -1,18 +1,18 @@
-import { OnlyLg } from '~/components/ui/viewport'
+import { OnlyDesktop } from '~/components/ui/viewport'
 
 import { NoteTimeline } from './NoteTimeline'
 import { NoteTopicInfo } from './NoteTopicInfo'
 
 export const NoteLeftSidebar: Component = ({ className }) => {
   return (
     <div className={className}>
-      <OnlyLg>
+      <OnlyDesktop>
         <div className="sticky top-20 mt-20">
           <NoteTimeline />
 
           <NoteTopicInfo />
         </div>
-      </OnlyLg>
+      </OnlyDesktop>
     </div>
   )
 }