Fix highlight on current active page

src/components/navbar.astro

@@ -1,6 +1,9 @@
 ---
-const currentPagePath = Astro.url.pathname;
+import { getPathnameWithoutExtension } from "~/lib/utils";
+
+const currentPagePath = getPathnameWithoutExtension(Astro.url);
 ---
+
 <nav class="navbar navbar-expand-lg bg-body-tertiary">
   <div class="container-fluid">
     <a class="navbar-brand" href="/">

src/layouts/boardsLayout.astro

@@ -3,10 +3,11 @@ interface Props {
   title: string;
 }
 const { title } = Astro.props;
+import { getPathnameWithoutExtension } from '~/lib/utils';
 import Layout from './layout.astro';
 import './layout.css';
 import boards from "~/lib/getboards";
-const currentPagePath = Astro.url.pathname;
+const currentPagePath = getPathnameWithoutExtension(Astro.url);
 ---
 <Layout title={title}>
   <section class="jumbotron text-center">

src/lib/utils.ts

@@ -0,0 +1,6 @@
+import path from "path";
+
+export function getPathnameWithoutExtension(url: URL) {
+  const parsedPath = path.parse(url.pathname);
+  return path.join(parsedPath.dir, parsedPath.name);
+}