fix: fix trailing slash of Astro.url.pathname

astro.config.mjs

@@ -7,6 +7,7 @@ import { defineConfig } from 'astro/config'
 export default defineConfig({
   integrations: [tailwind(), react(), sitemap()],
   site: 'https://zen-browser.app',
+  trailingSlash: 'never',
   i18n: {
     defaultLocale: 'en',
     locales: ['en', 'ja'],

src/components/NavBar.astro

@@ -96,13 +96,31 @@ const {
         </DropdownItems>
       </Dropdown>
       <a
-        class={`hidden items-center hover:bg-muted rounded-lg p-3 lg:block${Astro.url.pathname === getLocalePath('/about') ? ' text-coral' : ''}`}
+        class:list={{
+          hidden: true,
+          'items-center': true,
+          'hover:bg-muted': true,
+          'rounded-lg': true,
+          'p-3': true,
+          'lg:block': true,
+          'text-coral': Astro.url.pathname === getLocalePath('/about'),
+        }}
+        data-active={Astro.url.pathname === getLocalePath('/about')}
         href={getLocalePath('/about')}
       >
         <span>{menu.aboutUs}</span>
       </a>
       <a
-        class={`hidden items-center hover:bg-muted rounded-lg p-3 lg:block${Astro.url.pathname === getLocalePath('/mods') ? ' text-coral' : ''}`}
+        class:list={{
+          hidden: true,
+          'items-center': true,
+          'hover:bg-muted': true,
+          'rounded-lg': true,
+          'p-3': true,
+          'lg:block': true,
+          'text-coral': Astro.url.pathname === getLocalePath('/mods'),
+        }}
+        data-active={Astro.url.pathname === getLocalePath('/mods')}
         href={getLocalePath('/mods')}
       >
         <span>{menu.mods}</span>