refactor: menu에 includes추가로 / 경로도 header에 Blog active

Author: devwqc

src/components/HeaderLink.astro

@@ -1,13 +1,17 @@
 ---
 import type { HTMLAttributes } from 'astro/types';
 
-type Props = HTMLAttributes<'a'>;
+type Props = HTMLAttributes<'a'> & {
+  incldues: string[];
+};
 
-const { href, class: className, ...props } = Astro.props;
+const { href, incldues, class: className, ...props } = Astro.props;
 
 const { pathname } = Astro.url;
 const subpath = pathname.match(/[^\/]+/g);
-const isActive = href === pathname || href === '/' + subpath?.[0];
+const isActive = incldues.find((path) => {
+  return path === pathname || path === '/' + subpath?.[0];
+});
 ---
 
 <a

src/components/Navigation.astro

@@ -7,7 +7,9 @@ import { menu } from '@/constants/menu';
   {
     menu.map((item) => (
       <li>
-        <HeaderLink href={item.path}>{item.label}</HeaderLink>
+        <HeaderLink href={item.path} incldues={item.includes}>
+          {item.label}
+        </HeaderLink>
       </li>
     ))
   }

src/components/NavigationMobile.astro

@@ -12,7 +12,7 @@ import HamburgerSvg from './HamburgerSvg.astro';
   {
     menu.map((item) => (
       <li>
-        <HeaderLink href={item.path} class="block">
+        <HeaderLink href={item.path} incldues={item.includes} class="block">
           {item.label}
         </HeaderLink>
       </li>

src/constants/menu.ts

@@ -1,10 +1,16 @@
-export const menu = [
+export const menu: {
+  path: string;
+  label: string;
+  includes: string[];
+}[] = [
   {
     path: '/blog',
     label: 'Blog',
+    includes: ['/', '/blog'],
   },
   {
     path: '/about',
     label: 'About',
+    includes: ['/about'],
   },
 ];