Use of Server Component for Navbar fetching

components/navbar.tsx

@@ -3,11 +3,24 @@ import '@/app/globals.css'
 import { usePathname } from 'next/navigation'
 import Links from '@/public/routes.json'; // move to api again but use this for inital hydration
 import Link from 'next/link';
+import React from 'react';
 
-export const PageNavbar = () => {
+export const PageNavbar = (props: {links: any}) => {
   const path = usePathname();
 
   let navbar: JSX.Element 
+  if (props.links.length != 0) {
+    navbar = (
+      <nav className='navbar'>
+        {props.links.map((item: {name: string, href: string}) => (
+          <Link className={(path === item.href ? "active" : "")} key={item.name} href={item.href}>
+            {item.name}
+          </Link>
+        ))}
+      </nav>
+    );
+  }
+  else {
     navbar = (
       <nav className='navbar'>
         {Links.links.map((item) => (
@@ -17,5 +30,8 @@ export const PageNavbar = () => {
         ))}
       </nav>
     );
+  }
+    
+    
   return navbar;
 }