From 0669f7439587fe9c45f1e5042a5b579c2bdb8cef Mon Sep 17 00:00:00 2001
From: Pierre-Olivier Mercier <nemunaire@nemunai.re>
Date: Wed, 18 Sep 2024 10:56:25 +0200
Subject: [PATCH] ui: Make others menu items active when on respective page

---
 frontend/fic/src/lib/components/Header.svelte       | 7 ++++---
 frontend/fic/src/lib/components/HeaderIssues.svelte | 4 +++-
 2 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/frontend/fic/src/lib/components/Header.svelte b/frontend/fic/src/lib/components/Header.svelte
index 17ee385a..343f0b95 100644
--- a/frontend/fic/src/lib/components/Header.svelte
+++ b/frontend/fic/src/lib/components/Header.svelte
@@ -1,5 +1,6 @@
 <script>
  import { base } from '$app/paths';
+ import { page } from '$app/stores';
 
  import {
      Badge,
@@ -62,7 +63,7 @@
     <NavbarToggler on:click={() => (isOpen = !isOpen)} />
     <Collapse {isOpen} navbar expand="md" on:update={handleUpdate}>
         <Nav navbar>
-            <NavItem>
+            <NavItem active={$page.route && $page.route.id === "/"}>
                 <NavLink href=".">
                     <Icon name="house" />
                     Accueil
@@ -71,7 +72,7 @@
             <NavThemes />
             <NavTags />
             {#if $settings && $settings.end - $settings.start > 0 && $teams && Object.keys($teams).length}
-            <NavItem>
+            <NavItem active={$page.route && $page.route.id === "/rank"}>
                 <NavLink href="rank">
                     <Icon name="sort-down" />
                     Classement
@@ -79,7 +80,7 @@
             </NavItem>
             {/if}
             <HeaderIssues />
-            <NavItem>
+            <NavItem active={$page.route && $page.route.id === "/rules"}>
                 <NavLink href="rules">
                     <Icon name="signpost-split" />
                     Aide
diff --git a/frontend/fic/src/lib/components/HeaderIssues.svelte b/frontend/fic/src/lib/components/HeaderIssues.svelte
index 1b46799c..94d6a5af 100644
--- a/frontend/fic/src/lib/components/HeaderIssues.svelte
+++ b/frontend/fic/src/lib/components/HeaderIssues.svelte
@@ -1,4 +1,6 @@
 <script>
+ import { page } from '$app/stores';
+
  import {
      Badge,
      Icon,
@@ -24,7 +26,7 @@
 </script>
 
 {#if $issues.length}
-    <NavItem>
+    <NavItem active={$page.route && $page.route.id === "/issues"}>
         <NavLink href="issues">
             <Icon name="bug" />
             Problèmes