Refactor

src/components/NavigationBar.tsx

@@ -3,11 +3,12 @@ import { useEffect } from "preact/hooks";
 import {
   Home,
   NotebookPen,
-  FileText,
+  BriefcaseBusiness,
   CodeXml,
   Terminal as TerminalIcon,
   Megaphone,
 } from "lucide-preact";
+import { navigationItems } from '../config/data';
 
 interface NavigationBarProps {
   currentPath: string;
@@ -66,8 +67,13 @@ export default function NavigationBar({ currentPath }: NavigationBarProps) {
       ? activePath.slice(0, -1)
       : activePath;
 
-  const isPostsPath = (path: string) => {
-    return path.startsWith("/posts") || path.startsWith("/post/");
+  const iconMap = {
+    Home,
+    NotebookPen,
+    BriefcaseBusiness,
+    CodeXml,
+    TerminalIcon,
+    Megaphone,
   };
 
   useEffect(() => {
@@ -100,70 +106,22 @@ export default function NavigationBar({ currentPath }: NavigationBarProps) {
     >
       <div class="overflow-visible">
         <ul class="menu menu-horizontal bg-base-200 rounded-box p-1.5 sm:p-2 shadow-lg flex flex-nowrap whitespace-nowrap">
-          <li class="mx-0.5 sm:mx-1">
-            <a href="/" class={normalizedPath === "/" ? "menu-active" : ""}>
-              <div class="tooltip" data-tip="Home">
-                <Home size={18} class="sm:w-5 sm:h-5" />
-              </div>
-            </a>
-          </li>
-
-          <li class="mx-0.5 sm:mx-1">
-            <a
-              href="/posts"
-              class={isPostsPath(normalizedPath) ? "menu-active" : ""}
-            >
-              <div class="tooltip" data-tip="Posts">
-                <NotebookPen size={18} class="sm:w-5 sm:h-5" />
-              </div>
-            </a>
-          </li>
-
-          <li class="mx-0.5 sm:mx-1">
-            <a
-              href="/resume"
-              class={normalizedPath === "/resume" ? "menu-active" : ""}
-            >
-              <div class="tooltip" data-tip="Resume">
-                <FileText size={18} class="sm:w-5 sm:h-5" />
-              </div>
-            </a>
-          </li>
-
-          <li class="mx-0.5 sm:mx-1">
-            <a
-              href="/projects"
-              class={
-                normalizedPath.startsWith("/projects") ? "menu-active" : ""
-              }
-            >
-              <div class="tooltip" data-tip="Projects">
-                <CodeXml size={18} class="sm:w-5 sm:h-5" />
-              </div>
-            </a>
-          </li>
-
-          <li class="mx-0.5 sm:mx-1">
-            <a
-              href="/talks"
-              class={normalizedPath.startsWith("/talks") ? "menu-active" : ""}
-            >
-              <div class="tooltip" data-tip="Talks">
-                <Megaphone size={18} class="sm:w-5 sm:h-5" />
-              </div>
-            </a>
-          </li>
-
-          <li class="mx-0.5 sm:mx-1">
-            <a
-              href="/terminal"
-              class={normalizedPath === "/terminal" ? "menu-active" : ""}
-            >
-              <div class="tooltip" data-tip="Terminal">
-                <TerminalIcon size={18} class="sm:w-5 sm:h-5" />
-              </div>
-            </a>
-          </li>
+          {navigationItems.map((item) => {
+            const Icon = iconMap[item.icon as keyof typeof iconMap];
+            const isActive = item.isActive 
+              ? item.isActive(normalizedPath)
+              : normalizedPath === item.path;
+            
+            return (
+              <li key={item.id} class="mx-0.5 sm:mx-1">
+                <a href={item.path} class={isActive ? "menu-active" : ""}>
+                  <div class="tooltip" data-tip={item.tooltip}>
+                    <Icon size={18} class="sm:w-5 sm:h-5" />
+                  </div>
+                </a>
+              </li>
+            );
+          })}
         </ul>
       </div>
     </div>