incluud/accessible-astro-starter

Active navigation menu styling and astro-i18next

resoltico opened this issue · 3 comments

resoltico commented

Hi!

It seems that the bold styling is not applied to an active navigation menu when astro-i18next is used.

It seems the localizePath function maybe an issue:

<li class="menu-item">
  <a href={localizePath("/about/")}>About</a>
</li>

Or at least this is what I think why it may not be working in my case.

Would you please kindly look into this / assist with this — source and preview.

Thank you very much!

markteekman commented

Hi @strauhmanis! I've looked into your issue and there's a clear case why it is not working. The Navigation.astro component checks the following on page load to dynamically determine the active menu item:

const setActiveMenuItem = () => {
  const mobileDesktopMenus = mainNav.querySelectorAll('nav > ul')
  
  mobileDesktopMenus.forEach(menu => {
    const menuItems = [...menu.querySelectorAll('a:not([rel*="external"])')]
    menuItems.forEach(menuItem => {
      if (menuItem.pathname === window.location.pathname) {
        menuItem.classList.add('is-active')
        menuItem.setAttribute('aria-current', 'page')
      }
    })
  })
}

With astro-i18next you're changing the window.location.pathname by appending /lv/ to it. In this case, the if statement returns false and no active item is being set. I think the following adjustment should make it work for you though:

const setActiveMenuItem = () => {
  const mobileDesktopMenus = mainNav.querySelectorAll('nav > ul')
  const currenPathname = window.location.pathname

  mobileDesktopMenus.forEach((menu) => {
    const menuItems = [...menu.querySelectorAll('a:not([rel*="external"])')]

    menuItems.forEach((menuItem) => {
      if (currenPathname.includes(menuItem.pathname) && menuItem.textContent !== 'Home') {
        menuItem.classList.add('is-active')
        menuItem.setAttribute('aria-current', 'page')
      } else if (menuItem.textContent === 'Home' && currenPathname === '/') {
        menuItem.classList.add('is-active')
        menuItem.setAttribute('aria-current', 'page')
      }
    })
  })
}

Let me know if is does!

  • ❤️1
resoltico commented

Thank you very much Mark!

I appreciate your help a lot with this external package, which is out of scope for you!

With the patch you suggested, apparently, styling works except for the root (Home) of the translated site.

Though, I just realised that there is no easy way to incorporate (to show on production website out of the box) translated navigation strings (i.e. Home, About, etc.) into existing Accessible Astro Starter navigation component.

There is an example of astro-i18next nav component here — but getting everything together would be complicated for a beginner like me.

I will now see if it may be easier to use astro-i18n instead of astro-i18next.

Thank you!

  • 👍1
markteekman commented

No problem Ervins, happy to help! Too bad it didn't solve your problem though. There is indeed no easy way to translate the string at the moment, and have the active menu item work in that case. I know people have been asking for i18n support on this theme and I'm still considering doing something with it. I'm working on a v2.0 for this theme at the moment with lots of improvements and new features, but with limited free time. Once I get that out of the way I can reconsider i18n support 🙂

Thank you for the examples, that should help me out for when I might be able to add this as a feature!

  • 👍1