Refactor navigation to use config-driven components

Co-authored-by: johndoe6345789 <224850594+johndoe6345789@users.noreply.github.com>

src/app/[locale]/(marketing)/layout.tsx

@@ -1,7 +1,9 @@
 import { getTranslations, setRequestLocale } from 'next-intl/server';
-import Link from 'next/link';
 import { DemoBanner } from '@/components/DemoBanner';
 import { LocaleSwitcher } from '@/components/LocaleSwitcher';
+import { NavLink } from '@/components/NavLink';
+import { marketingNavigation } from '@/config/navigation';
+import { styles } from '@/config/styles';
 import { BaseTemplate } from '@/templates/BaseTemplate';
 
 export default async function Layout(props: {
@@ -21,67 +23,24 @@ export default async function Layout(props: {
       <BaseTemplate
         leftNav={(
           <>
-            <li>
-              <Link
-                href="/"
-                className="border-none text-gray-700 hover:text-gray-900"
-              >
-                {t('home_link')}
-              </Link>
-            </li>
-            <li>
-              <Link
-                href="/about/"
-                className="border-none text-gray-700 hover:text-gray-900"
-              >
-                {t('about_link')}
-              </Link>
-            </li>
-            <li>
-              <Link
-                href="/counter/"
-                className="border-none text-gray-700 hover:text-gray-900"
-              >
-                {t('counter_link')}
-              </Link>
-            </li>
-            <li>
-              <Link
-                href="/portfolio/"
-                className="border-none text-gray-700 hover:text-gray-900"
-              >
-                {t('portfolio_link')}
-              </Link>
-            </li>
-            <li>
-              <a
-                className="border-none text-gray-700 hover:text-gray-900"
-                href="https://github.com/ixartz/Next-js-Boilerplate"
-              >
-                GitHub
-              </a>
-            </li>
+            {marketingNavigation.left.map(link => (
+              <li key={link.id}>
+                <NavLink href={link.href} external={link.external}>
+                  {link.label || t(link.translationKey)}
+                </NavLink>
+              </li>
+            ))}
           </>
         )}
         rightNav={(
           <>
-            <li>
-              <Link
-                href="/sign-in/"
-                className="border-none text-gray-700 hover:text-gray-900"
-              >
-                {t('sign_in_link')}
-              </Link>
-            </li>
-
-            <li>
-              <Link
-                href="/sign-up/"
-                className="border-none text-gray-700 hover:text-gray-900"
-              >
-                {t('sign_up_link')}
-              </Link>
-            </li>
+            {marketingNavigation.right.map(link => (
+              <li key={link.id}>
+                <NavLink href={link.href}>
+                  {t(link.translationKey)}
+                </NavLink>
+              </li>
+            ))}
 
             <li>
               <LocaleSwitcher />
@@ -89,7 +48,7 @@ export default async function Layout(props: {
           </>
         )}
       >
-        <div className="py-5 text-xl [&_p]:my-6">{props.children}</div>
+        <div className={styles.containers.contentPadding}>{props.children}</div>
       </BaseTemplate>
     </>
   );

src/components/NavLink.tsx

@@ -0,0 +1,34 @@
+import Link from 'next/link';
+import { styles } from '@/config/styles';
+
+type NavLinkProps = {
+  href: string;
+  children: React.ReactNode;
+  external?: boolean;
+};
+
+/**
+ * Navigation link component with consistent styling
+ * Used for navigation menus in layouts
+ */
+export function NavLink({ href, children, external }: NavLinkProps) {
+  if (external) {
+    return (
+      <a
+        className={styles.links.nav}
+        href={href}
+      >
+        {children}
+      </a>
+    );
+  }
+
+  return (
+    <Link
+      href={href}
+      className={styles.links.nav}
+    >
+      {children}
+    </Link>
+  );
+}

src/config/navigation.ts

@@ -0,0 +1,61 @@
+/**
+ * Navigation configuration for marketing layout
+ * Defines navigation items for left and right navigation menus
+ */
+
+export type NavLink = {
+  id: string;
+  translationKey: string;
+  href: string;
+  external?: boolean;
+  label?: string; // For links without translation (like GitHub)
+};
+
+export type NavigationConfig = {
+  left: NavLink[];
+  right: NavLink[];
+};
+
+export const marketingNavigation: NavigationConfig = {
+  left: [
+    {
+      id: 'home',
+      translationKey: 'home_link',
+      href: '/',
+    },
+    {
+      id: 'about',
+      translationKey: 'about_link',
+      href: '/about/',
+    },
+    {
+      id: 'counter',
+      translationKey: 'counter_link',
+      href: '/counter/',
+    },
+    {
+      id: 'portfolio',
+      translationKey: 'portfolio_link',
+      href: '/portfolio/',
+    },
+    {
+      id: 'github',
+      label: 'GitHub',
+      translationKey: '',
+      href: 'https://github.com/ixartz/Next-js-Boilerplate',
+      external: true,
+    },
+  ],
+  right: [
+    {
+      id: 'sign-in',
+      translationKey: 'sign_in_link',
+      href: '/sign-in/',
+    },
+    {
+      id: 'sign-up',
+      translationKey: 'sign_up_link',
+      href: '/sign-up/',
+    },
+  ],
+};

src/config/styles.ts

@@ -8,6 +8,7 @@ export const styles = {
     primary: 'text-blue-700 hover:border-b-2 hover:border-blue-700',
     primaryBold: 'font-bold text-blue-700 hover:border-b-2 hover:border-blue-700',
     hoverBlue: 'hover:text-blue-700',
+    nav: 'border-none text-gray-700 hover:text-gray-900',
   },
   text: {
     centerSmall: 'text-center text-sm',
@@ -27,4 +28,7 @@ export const styles = {
   lists: {
     baseMarginTop: 'mt-3 text-base',
   },
+  containers: {
+    contentPadding: 'py-5 text-xl [&_p]:my-6',
+  },
 } as const;