Merge pull request #116 from JohnsonMao/feature/menu-style

Feature/menu style

src/app/[lang]/Menu.tsx

@@ -17,30 +17,36 @@ export type MenuProps = {
 
 function Menu({ menu }: MenuProps) {
   const pathname = usePathname();
-
-  const isActiveLink = (href: DynamicRoutesWithoutLocalePath) => {
-    const locale = getLocale(pathname) || '';
-    const localePrefix = new RegExp(`^/${locale}/?`);
-    const adjustedPathname = pathname.replace(localePrefix, '/');
-
-    if (adjustedPathname === '/') return href === '/';
-
-    return adjustedPathname.startsWith(href) && href !== '/';
-  };
+  const locale = getLocale(pathname) || '';
+  const localePrefix = new RegExp(`^/${locale}/?([^/]*)/?`);
+  const rootPathname = localePrefix.exec(pathname)?.[1];
+  const activeLinkIndex = menu.findIndex(
+    (item) => item.href === `/${rootPathname}`
+  );
 
   return (
     <nav>
-      <ul className="flex rounded-full bg-gray-900/60 px-2 backdrop-blur-lg">
-        {menu.map(({ text, href }) => (
+      <ul
+        className={cn(
+          'fluorescent-box flex rounded-full px-2 backdrop-blur-sm',
+          'bg-zinc-100/80 dark:bg-zinc-900/80'
+        )}
+      >
+        {menu.map(({ text, href }, index) => (
           <li key={text}>
             <Link
               href={href}
               className={cn(
-                'block p-3 text-xl leading-none text-white/90 no-underline hover:text-white',
-                isActiveLink(href) && 'text-blue-500 hover:text-blue-500'
+                'relative block p-3 text-xl leading-none no-underline',
+                'text-zinc-700 hover:text-primary-500 dark:text-zinc-300 dark:hover:text-primary-500',
+                activeLinkIndex === index &&
+                  'fluorescent-text text-primary-500 dark:text-primary-500'
               )}
             >
               {text}
+              {activeLinkIndex === index && (
+                <span className="absolute inset-x-2 bottom-0 h-px translate-y-1/2 bg-gradient-to-l from-transparent via-primary-500 to-transparent" />
+              )}
             </Link>
           </li>
         ))}

src/app/[lang]/__tests__/menu.test.tsx

@@ -41,7 +41,7 @@ describe('Menu component', () => {
       render(<Menu menu={menu} />);
 
       const links = screen.getAllByRole('link');
-      const activeClassName = 'text-blue-500 hover:text-blue-500';
+      const activeClassName = 'text-primary-500';
 
       links.forEach((link) => {
         if (link.textContent === activeLinkText) {

src/app/[lang]/layout.tsx

@@ -5,6 +5,7 @@ import ThemeSwitcher from '@/components/ThemeSwitcher';
 import Header, { Avatar } from './Header';
 import Footer from './Footer';
 import Menu, { MenuProps } from './Menu';
+import cn from '@/utils/cn';
 
 export async function generateStaticParams() {
   return locales.map((lang) => ({ lang }));
@@ -59,7 +60,12 @@ async function I18nLayout({
     <>
       <Header avatar={<Avatar src={avatar.src} alt={avatar.alt} />}>
         <Menu menu={menu} />
-        <ThemeSwitcher className="rounded-full bg-gray-900/60 p-3 backdrop-blur-md" />
+        <ThemeSwitcher
+          className={cn(
+            'fluorescent-box rounded-full p-3 backdrop-blur-sm',
+            'bg-zinc-100/80 dark:bg-zinc-900/80'
+          )}
+        />
       </Header>
       {children}
       <Footer copyright={copyright} />

src/app/[lang]/posts/[postId]/page.tsx

@@ -48,7 +48,7 @@ async function PostPage({ params: { postId } }: PostParams) {
       <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 className="my-3 text-lg font-semibold text-gray-900 dark:text-gray-100">
               目錄
             </h4>
             <TableOfContents source={source} />

src/app/layout.tsx

@@ -2,6 +2,7 @@ import type { Metadata } from 'next';
 
 import { locales } from '~/i18n';
 import { createMetadata, createFeedOptions } from '~/data/metadata';
+import Container from '@/components/Container';
 import generateRSS from '@/utils/generateRSS';
 
 import Html from './Html';
@@ -22,7 +23,9 @@ function HtmlLayout({ children }: React.PropsWithChildren) {
   return (
     <Html>
       <body>
-        <div className="root-background fixed inset-x-0 top-0 -z-50 h-screen"></div>
+        <div className="lattice fixed inset-x-0 top-0 -z-50 h-screen">
+          <Container className="h-screen border-x-2 border-zinc-500/5 bg-zinc-100/70 dark:bg-zinc-900/70" />
+        </div>
         <Providers>{children}</Providers>
       </body>
     </Html>

src/components/Container/Container.tsx

@@ -12,8 +12,6 @@ function Container({ as = 'div', className, ...props }: ContainerProps) {
     <Component
       className={cn(
         'px-7 mx-2 md:mx-8 lg:mx-16 lg:px-14',
-        as === 'main' &&
-          'rounded-lg border-2 border-zinc-500 bg-zinc-100/70 dark:bg-zinc-900/70',
         className
       )}
       {...props}

src/components/TableOfContents/TableOfContents.tsx

@@ -53,7 +53,7 @@ function TableOfContents({ source }: TableOfContentsProps) {
               href={`#${heading.id}`}
               title={heading.text}
               className={cn(
-                'mb-0.5 block overflow-hidden text-ellipsis whitespace-nowrap text-left text-sm transition-colors hover:underline',
+                'mb-0.5 block overflow-hidden text-ellipsis whitespace-nowrap text-left text-sm hover:underline',
                 heading.id === activeId
                   ? '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',

tailwind.config.js

@@ -39,33 +39,60 @@ const tailwindcssConfig = {
     require('@tailwindcss/typography'),
     plugin(({ addComponents, theme }) => {
       addComponents({
-        '.root-background': {
-          '--base-color': theme('colors.zinc.100'),
-          '--line-color': 'rgba(0, 0, 0, 0.04)',
+        '.lattice': {
+          '--lattice-base-color': theme('colors.stone.100'),
+          '--lattice-line-color': 'rgba(0, 0, 0, 0.04)',
+          '--lattice-ratio': '10%',
+          '--lattice-size': '10px 10px',
           background: `
             linear-gradient(
               to left,
-              var(--line-color) 0,
-              var(--line-color) 10%,
-              transparent 10%,
+              var(--lattice-line-color) 0,
+              var(--lattice-line-color) var(--lattice-ratio),
+              transparent var(--lattice-ratio),
               transparent 100%
             ),
             linear-gradient(
               to top,
-              var(--line-color) 0,
-              var(--line-color) 10%,
-              transparent 10%,
+              var(--lattice-line-color) 0,
+              var(--lattice-line-color) var(--lattice-ratio),
+              transparent var(--lattice-ratio),
               transparent 100%
             ),
-            var(--base-color);`,
-          backgroundSize: '10px 10px;'
+            var(--lattice-base-color);`,
+          backgroundSize: 'var(--lattice-size);',
         },
-        '.dark .root-background': {
-          '--base-color': theme('colors.zinc.900'),
-          '--line-color': 'rgba(255, 255, 255, 0.04)',
-        }
-      })
-    })
+        '.dark .lattice': {
+          '--lattice-base-color': theme('colors.stone.900'),
+          '--lattice-line-color': 'rgba(255, 255, 255, 0.04)',
+        },
+      });
+      addComponents({
+        '.fluorescent-box': {
+          '--fluorescent-color': '35, 35, 35',
+          background: `
+            linear-gradient(
+              to top,
+              rgba(var(--fluorescent-color), .1) 0,
+              transparent 50%,
+              transparent 100%
+            )`,
+          boxShadow: `
+            0 0 1px rgba(var(--fluorescent-color), .8),
+            0 1px 3px rgba(var(--fluorescent-color), .2)`,
+        },
+        '.dark .fluorescent-box': {
+          '--fluorescent-color': '220, 220, 220',
+        },
+        '.fluorescent-text': {
+          '--fluorescent-color': theme('colors.primary.300'),
+          textShadow: '0 0 .25em var(--fluorescent-color)',
+        },
+        '.dark .fluorescent-text': {
+          '--fluorescent-color': theme('colors.primary.700'),
+        },
+      });
+    }),
   ],
 };