Fix navbar not highlighting the active page (#2870)

.changeset/fix-navbar-active-nested-items.md

@@ -0,0 +1,5 @@
+---
+"@tabler/preview": patch
+---
+
+Fixed the navbar not highlighting the active page for nested, RTL and settings pages.

preview/pages/changelog.astro

@@ -6,6 +6,6 @@ import changelog from '../../core/CHANGELOG.md?raw'
 const changelogHtml = renderMarkdown(changelog)
 ---
 
-<ProseLayout title="Changelog" pageMenu="changelog">
+<ProseLayout title="Changelog" pageMenu="help.changelog">
   <Fragment set:html={changelogHtml} />
 </ProseLayout>

preview/pages/layout-rtl.astro

@@ -4,7 +4,7 @@ import HomepageContent from '@shared/components/HomepageContent.astro'
 import HeaderActionsButtons from '@shared/components/layout/HeaderActionsButtons.astro'
 ---
 
-<DefaultLayout title="RTL mode" pretitle="Overview" pageMenu="home" pageLibs={['apexcharts', 'jsvectormap']} rtl>
+<DefaultLayout title="RTL mode" pretitle="Overview" pageMenu="layout.rtl-mode" pageLibs={['apexcharts', 'jsvectormap']} rtl>
   <HeaderActionsButtons slot="page-header-actions" />
   <HomepageContent rtl />
 </DefaultLayout>

preview/pages/layout-vertical-right.astro

@@ -4,7 +4,7 @@ import HomepageContent from '@shared/components/HomepageContent.astro'
 import HeaderActionsButtons from '@shared/components/layout/HeaderActionsButtons.astro'
 ---
 
-<DefaultLayout title="Dashboard" pageHeader="Right vertical layout" pretitle="Overview" pageMenu="layout.vertical-end" pageLibs={['apexcharts', 'jsvectormap']} sidebar sidebarEnd hideTopbar>
+<DefaultLayout title="Dashboard" pageHeader="Right vertical layout" pretitle="Overview" pageMenu="layout.vertical-right" pageLibs={['apexcharts', 'jsvectormap']} sidebar sidebarEnd hideTopbar>
   <HeaderActionsButtons slot="page-header-actions" />
   <HomepageContent />
 </DefaultLayout>

preview/pages/payment-providers.astro

@@ -10,7 +10,7 @@ import CardTitle from '@ui/CardTitle.astro'
 const providers = payments as { name: string; logo: string }[]
 ---
 
-<DefaultLayout title="Payment Providers" pageMenu="addons.payments">
+<DefaultLayout title="Payment Providers" pageMenu="addons.payment-providers">
   <div class="row row-cards">
     <div class="col-12">
       <Card>

preview/pages/wysiwyg.astro

@@ -1,5 +1,4 @@
 ---
-// The front matter uses `menu: base.wysiwyg` (not `page-menu`), so no pageMenu prop.
 import DefaultLayout from '@shared/layouts/DefaultLayout.astro'
 import Card from '@ui/Card.astro'
 import CardBody from '@ui/CardBody.astro'
@@ -7,7 +6,7 @@ import Wysiwyg from '@ui/Wysiwyg.astro'
 import FormGroup from '@ui/FormGroup.astro'
 ---
 
-<DefaultLayout title="HugeRTE" pageLibs={['hugerte']}>
+<DefaultLayout title="HugeRTE" pageMenu="plugins.wysiwyg" pageLibs={['hugerte']}>
   <Card>
     <CardBody>
       <FormGroup label="Your name" for="wysiwyg-name">

shared/components/navbar/NavbarMenuItem.astro

@@ -28,7 +28,7 @@ const hasChildren = !!item.children
 const isExternal = (url?: string) => !!url && (url.includes('http://') || url.includes('https://'))
 const relative = (url?: string) => (isExternal(url) ? url : `./${url}`)
 
-const active = level1Key === currentPage[0] && itemKey === currentPage[1] && currentPage.length === 2
+const active = level1Key === currentPage[0] && itemKey === currentPage[1]
 
 const itemClasses = ['dropdown-item', hasChildren && 'dropdown-toggle', active && 'active', item.color && `text-${item.color}`]
 ---
@@ -45,13 +45,16 @@ const itemClasses = ['dropdown-item', hasChildren && 'dropdown-toggle', active &
       </a>
 
       <div class="dropdown-menu">
-        {Object.entries(item.children!).map(([, child]) => (
-          <a href={relative(child.url)} class="dropdown-item">
-            {child.title}
+        {Object.entries(item.children!).map(([childKey, child]) => {
+          const childActive = level1Key === currentPage[0] && itemKey === currentPage[1] && childKey === currentPage[2]
+          return (
+            <a href={relative(child.url)} class:list={['dropdown-item', childActive && 'active']} aria-current={childActive ? 'page' : undefined}>
+              {child.title}
 
-            {child.badge && <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">{child.badge}</span>}
-          </a>
-        ))}
+              {child.badge && <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">{child.badge}</span>}
+            </a>
+          )
+        })}
       </div>
     </div>
   ) : (

shared/layouts/SettingsLayout.astro

@@ -17,7 +17,7 @@ interface Props {
 const { active, title = 'Settings' } = Astro.props
 ---
 
-<DefaultLayout title={title} pageHeader="Account Settings">
+<DefaultLayout title={title} pageHeader="Account Settings" pageMenu="extra.settings">
   <div class="card">
     <div class="row g-0">
       <!-- BEGIN SETTINGS NAV -->