Browse Source

revert(docs): revert active navigation change (#1058)

* fix: enhance header link activation state in useNavigation composable

- Updated the `_useHeaderLinks` function to include an `active` property for each header link, utilizing the current route path to determine the active state.
- Removed unnecessary blank lines for cleaner code structure.

* refactor: lint

- Removed trailing commas from the header link definitions in the `_useHeaderLinks` function for improved consistency and readability.
- Ensured that the `active` property for each header link is correctly formatted, enhancing the overall clarity of the navigation logic.
Alvaro Saburido 3 days ago
parent
commit
dd13115bf2
1 changed files with 5 additions and 0 deletions
  1. 5 0
      docs/app/composables/useNavigation.ts

+ 5 - 0
docs/app/composables/useNavigation.ts

@@ -10,6 +10,7 @@ export interface HeaderLink {
 }
 
 function _useHeaderLinks() {
+  const route = useRoute()
   const headerLinks = computed<HeaderLink[]>(() => {
     const to = ''
 
@@ -18,21 +19,25 @@ function _useHeaderLinks() {
       description: 'Learn how to get started with TresJS to build your 3D first app.',
       icon: 'i-lucide-rocket',
       to: `${to}/getting-started`,
+      active: route.path.startsWith(`${to}/getting-started`),
     }, {
       label: 'Essentials',
       description: 'Get the key concepts and best practices.',
       icon: 'i-lucide-book-open',
       to: `${to}/essentials`,
+      active: route.path.startsWith(`${to}/essentials`),
     }, {
       label: 'API',
       description: 'Explore the TresJS components, composables, utilities and more.',
       icon: 'i-lucide-code-xml',
       to: `${to}/api`,
+      active: route.path.startsWith(`${to}/api`),
     }, {
       label: 'Cookbook',
       description: 'Discover and explore official and community examples.',
       icon: 'i-lucide-cooking-pot',
       to: `${to}/cookbook`,
+      active: route.path.startsWith(`${to}/cookbook`),
     }/*  {      label: 'Community',      description: 'Find answers and support from the community.',      icon: 'i-lucide-messages-square',      to: `${to}/community`,      active: route.path.startsWith(`${to}/community`)    } */]
   })