From f7a9616e994755a2fb93b9815cc2b9216f3e76db Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Martin=20Ra=C4=8D=C3=A1k?= <martin.racak@ourworldindata.org>
Date: Thu, 5 Sep 2024 17:51:11 +0200
Subject: [PATCH] Add active state to admin nav

---
 adminSiteClient/Link.tsx   | 4 ++--
 adminSiteClient/admin.scss | 5 +++++
 2 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/adminSiteClient/Link.tsx b/adminSiteClient/Link.tsx
index 5fa2aca652a..e6baf1260ba 100644
--- a/adminSiteClient/Link.tsx
+++ b/adminSiteClient/Link.tsx
@@ -1,5 +1,5 @@
 import React from "react"
-import { Link as ReactLink } from "react-router-dom"
+import { NavLink } from "react-router-dom"
 import { AdminAppContext, AdminAppContextType } from "./AdminAppContext.js"
 
 interface LinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
@@ -15,6 +15,6 @@ export class Link extends React.Component<LinkProps> {
     render() {
         const { native, to, ...rest } = this.props
         if (native) return <a href={this.context.admin.url(to)} {...rest} />
-        else return <ReactLink to={to} {...rest} />
+        else return <NavLink to={to} {...rest} />
     }
 }
diff --git a/adminSiteClient/admin.scss b/adminSiteClient/admin.scss
index b619b6641c0..53c5b0c5636 100644
--- a/adminSiteClient/admin.scss
+++ b/adminSiteClient/admin.scss
@@ -185,6 +185,11 @@ $nav-height: 45px;
         color: #b8c7ce;
     }
 
+    li > a.active {
+        font-weight: bold;
+        background: #1a2226;
+    }
+
     li > a:hover {
         color: #fff;
         background: #1e282c;