feat: active navbar link

src/documents/views/html/document.page.tsx

@@ -11,10 +11,10 @@ export function DocumentPage(document: DocumentModel, user?: User) {
 
   return (
     <Layout title={document.name}>
-      <NavigationBar user={user} />
+      <NavigationBar user={user} currentPage={`/${document.name}`} />
       <Page>
         <div class="container mx-auto">
-          <div class="text-abru-light-75 my-9 text-[48px] font-bold capitalize" safe>
+          <div class="my-9 text-[48px] font-bold capitalize text-abru-light-75" safe>
             {document.name}
           </div>
           <article class="prose prose-invert mb-16 max-w-none">{safeParsed}</article>

src/games/views/html/game-list.page.tsx

@@ -21,7 +21,7 @@ export async function GameListPage(props: { user?: User | undefined; page: numbe
 
   return (
     <Layout title="games" embedStyle={resolve(import.meta.dirname, 'game-list.css')}>
-      <NavigationBar user={props.user} />
+      <NavigationBar user={props.user} currentPage="/games" />
       <Page>
         <div class="container mx-auto">
           <div class="my-9 text-[48px] font-bold text-abru-light-75">Games</div>

src/games/views/html/game.page.tsx

@@ -17,7 +17,7 @@ export async function GamePage(props: { game: GameModel; user?: User | undefined
       title={`game #${props.game.number}`}
       embedStyle={resolve(import.meta.dirname, 'style.css')}
     >
-      <NavigationBar user={props.user} />
+      <NavigationBar user={props.user} currentPage={`/games/${props.game.number}`} />
       <Page>
         <div class="container relative mx-auto grid grid-cols-4 gap-x-4">
           <div class="order-first flex flex-col">

src/hall-of-game/views/html/hall-of-fame.page.tsx

@@ -20,7 +20,7 @@ export async function HallOfFamePage(props: { user?: User | undefined }) {
 
   return (
     <Layout title="Hall of fame" embedStyle={resolve(import.meta.dirname, 'hall-of-fame.page.css')}>
-      <NavigationBar user={props.user} />
+      <NavigationBar user={props.user} currentPage="/hall-of-fame" />
       <Page>
         <div class="container mx-auto grid grid-cols-1 gap-x-4 gap-y-2 p-2 lg:grid-cols-2 lg:gap-y-0 lg:p-0">
           <div class="my-9 text-[48px] font-bold text-abru-light-75 lg:col-span-2">

src/html/components/games-link.tsx

@@ -2,14 +2,18 @@ import { collections } from '../../database/collections'
 import { GameState } from '../../database/models/game.model'
 import { GameLiveIndicator } from './game-live-indicator'
 
-export async function GamesLink() {
+export async function GamesLink(props: { active: boolean }) {
   const gamesLiveCount = await collections.games.countDocuments({
     state: {
       $in: [GameState.created, GameState.configuring, GameState.launching, GameState.started],
     },
   })
   return (
-    <a href="/games" class={['menu-item', gamesLiveCount > 0 && 'accent']} id="navbar-games-link">
+    <a
+      href="/games"
+      class={['menu-item', gamesLiveCount > 0 && 'accent', props.active && 'active']}
+      id="navbar-games-link"
+    >
       {gamesLiveCount > 0 ? <GameLiveIndicator /> : <></>}
       Games
     </a>

src/html/components/navigation-bar.tsx

@@ -5,7 +5,7 @@ import { IconBrandSteam } from './icons/icon-brand-steam'
 import { Profile } from './profile'
 import Html from '@kitajs/html'
 
-export function NavigationBar(props: Html.PropsWithChildren<{ user?: User | undefined }>) {
+export function NavigationBar(props: { user?: User | undefined; currentPage: string }) {
   return (
     <nav class="flex min-h-[95px] flex-row justify-center">
       <div class="container flex flex-row items-center justify-between">
@@ -21,25 +21,25 @@ export function NavigationBar(props: Html.PropsWithChildren<{ user?: User | unde
   )
 }
 
-function Menu(props: Html.PropsWithChildren<{ user?: User | undefined }>) {
-  const { user } = props
-  let btn = <SteamButton />
-  if (user) {
-    btn = <Profile {...user.player} />
-  }
+function Menu({ user, currentPage }: { user?: User | undefined; currentPage: string }) {
+  const btn = user ? <Profile {...user.player} /> : <SteamButton />
 
   return (
     <div class="flex flex-col gap-[10px] px-4 lg:flex-row lg:items-center lg:px-0">
-      <GamesLink />
-      <MenuItem href="/players">Players</MenuItem>
-      <MenuItem href="/rules">Rules</MenuItem>
+      <GamesLink active={currentPage.startsWith('/games')} />
+      <MenuItem href="/players" active={currentPage.startsWith('/players')}>
+        Players
+      </MenuItem>
+      <MenuItem href="/rules" active={currentPage === '/rules'}>
+        Rules
+      </MenuItem>
 
-      <MenuItem href="/hall-of-fame">
+      <MenuItem href="/hall-of-fame" active={currentPage === '/hall-of-fame'}>
         <IconCrown />
         HOF
       </MenuItem>
 
-      <MenuItem href="/statistics">
+      <MenuItem href="/statistics" active={currentPage === '/statistics'}>
         <IconChartPie />
         Stats
       </MenuItem>
@@ -70,9 +70,13 @@ function Menu(props: Html.PropsWithChildren<{ user?: User | undefined }>) {
   )
 }
 
-function MenuItem({ href, children }: Html.PropsWithChildren<{ href: string }>) {
+function MenuItem({
+  href,
+  children,
+  active,
+}: Html.PropsWithChildren<{ href: string; active: boolean }>) {
   return (
-    <a href={href} class="menu-item">
+    <a href={href} class={['menu-item', active && 'active']}>
       {children}
     </a>
   )

src/players/views/html/player-list.page.tsx

@@ -17,7 +17,7 @@ export async function PlayerListPage(user?: User) {
 
   return (
     <Layout title="players" embedStyle={resolve(import.meta.dirname, 'style.css')}>
-      <NavigationBar user={user} />
+      <NavigationBar user={user} currentPage="/players" />
       <Page>
         <div class="container mx-auto">
           <div class="my-9 text-[48px] font-bold text-abru-light-75">Players</div>

src/players/views/html/player-settings.page.tsx

@@ -9,7 +9,7 @@ export async function PlayerSettingsPage(props: { user: User }) {
 
   return (
     <Layout title="Settings">
-      <NavigationBar user={props.user} />
+      <NavigationBar user={props.user} currentPage="/settings" />
       <Page>
         <div class="container mx-auto">
           <form action="" method="post">

src/players/views/html/player.page.tsx

@@ -53,7 +53,7 @@ export async function PlayerPage(props: {
 
   return (
     <Layout title={props.player.name} embedStyle={resolve(import.meta.dirname, 'style.css')}>
-      <NavigationBar user={props.user} />
+      <NavigationBar user={props.user} currentPage={`/players/${props.player.steamId}`} />
       <Page>
         <div class="container relative mx-auto grid grid-cols-2 gap-[30px]">
           <div class="col-span-2">

src/queue/views/html/queue.page.tsx

@@ -34,7 +34,7 @@ export async function QueuePage(props: { user?: User | undefined }) {
       title={`[${current}/${required}] ${environment.WEBSITE_NAME}`}
       embedStyle={resolve(import.meta.dirname, 'queue.page.css')}
     >
-      <NavigationBar user={props.user} />
+      <NavigationBar user={props.user} currentPage="/" />
       <Page>
         <div class="container mx-auto grid grid-cols-1 gap-y-8 lg:grid-cols-4 lg:gap-x-4">
           <div class="order-1 grid grid-cols-1 gap-y-2 lg:col-span-4">

src/statistics/views/html/statistics.page.tsx

@@ -8,7 +8,7 @@ import { PlayedMapsCount } from './played-maps-count'
 export async function StatisticsPage(user?: User) {
   return (
     <Layout title="statistics">
-      <NavigationBar user={user} />
+      <NavigationBar user={user} currentPage="/statistics" />
       <Page>
         <div class="container mx-auto grid grid-cols-1 gap-4 px-2 lg:grid-cols-2">
           <div class="lg:col-span-2">