Chellaris/chellaris-galaxy-political-compass
Chellaris/chellaris-galaxy-political-compass
Archived
1
0
Fork 0
Code Issues 2 Pull requests Activity

Use of Server Component for Navbar fetching

Browse source
This commit is contained in:
Neshura 2023-06-10 16:09:47 +02:00
parent 5bd4f2aab3
commit c4aa0dc93c
Signed by: Neshura
GPG key ID: B6983AAA6B9A7A6C
2 changed files with 22 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
app/layout.tsx
View file

@ -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>

18
components/navbar.tsx
View file

@ -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;
}