Use of Server Component for Navbar fetching
This commit is contained in:
parent
5bd4f2aab3
commit
c4aa0dc93c
2 changed files with 22 additions and 3 deletions
|
@ -1,20 +1,23 @@
|
|||
import './globals.css'
|
||||
import { PageNavbar } from '@/components/navbar'
|
||||
import * as fs from 'fs';
|
||||
|
||||
export const metadata = {
|
||||
title: 'Stellaris Ethics Compass',
|
||||
description: '',
|
||||
}
|
||||
|
||||
export default function RootLayout({
|
||||
export default async function RootLayout({
|
||||
children,
|
||||
}: {
|
||||
children: React.ReactNode
|
||||
}) {
|
||||
const navLinks = JSON.parse(fs.readFileSync('public/routes_api.json', 'utf-8')).links;
|
||||
|
||||
return (
|
||||
<html lang="en">
|
||||
<body>
|
||||
<PageNavbar />
|
||||
<PageNavbar links={navLinks}/>
|
||||
{children}
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
@ -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;
|
||||
}
|
Reference in a new issue