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 './globals.css'
import { PageNavbar } from '@/components/navbar' import { PageNavbar } from '@/components/navbar'
import * as fs from 'fs';
export const metadata = { export const metadata = {
title: 'Stellaris Ethics Compass', title: 'Stellaris Ethics Compass',
description: '', description: '',
} }
export default function RootLayout({ export default async function RootLayout({
children, children,
}: { }: {
children: React.ReactNode children: React.ReactNode
}) { }) {
const navLinks = JSON.parse(fs.readFileSync('public/routes_api.json', 'utf-8')).links;
return ( return (
<html lang="en"> <html lang="en">
<body> <body>
<PageNavbar /> <PageNavbar links={navLinks}/>
{children} {children}
</body> </body>
</html> </html>

18
components/navbar.tsx
View file

@ -3,11 +3,24 @@ import '@/app/globals.css'
import { usePathname } from 'next/navigation' import { usePathname } from 'next/navigation'
import Links from '@/public/routes.json'; // move to api again but use this for inital hydration import Links from '@/public/routes.json'; // move to api again but use this for inital hydration
import Link from 'next/link'; import Link from 'next/link';
import React from 'react';
export const PageNavbar = () => { export const PageNavbar = (props: {links: any}) => {
const path = usePathname(); const path = usePathname();
let navbar: JSX.Element 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 = ( navbar = (
<nav className='navbar'> <nav className='navbar'>
{Links.links.map((item) => ( {Links.links.map((item) => (
@ -17,5 +30,8 @@ export const PageNavbar = () => {
))} ))}
</nav> </nav>
); );
}
return navbar; return navbar;
} }