Need help for manually setting active for header menu

[TetraTheta]

This is a partial continuation of this.

Long story short, I have to manually set active for the header menu

Things have changed since the last comment.

Now I host my site from my home server rather than clouds like GCP or OCI. Because of this and the policy of my country's ISP, I must use cloudflared along with Cloudflare DNS to make my site load fast behind Cloudflare.

This is how things work:

• I run my site as a private website using NGINX. The only way to access my site is localhost:80. This is not exposed to the public.
• cloudflared tunnels the website to the closest Cloudflare CDN. Now people can access my site at tetralog.haipa.xyz.

Without cloudflared, every packet coming to my site will come via Los Angeles (LAX), across the Pacific Ocean. This will increase the loading time of my site heavily, and sometimes it will throw an HTTP 522 error like this:

I can't change this behavior (LAX thing) without using the Enterprise plan of Cloudflare. I saw multiple articles saying that using Pro or Business plan doesn't help with this situation. This is because of the policy of ISPs in my country, so it can't be helped anyway.

I don't have other choices.

---

This also made me use port 80 for my website. If I use other port, like 8080 or 4343, it will make a few links on my site look like tetralog.haipa.xyz:8080 and I can't control it. The only way to prevent that port number appearance is by using port 80 or 443.

I tested both 80 and 443 ports, so I'll just say 'port 80'. Using port 443 doesn't change anything.

---

Like I said before, header menu active behaves differently on port the website is on. I don't know why, but it does.

This is my local test server. '명조' is highlighted as I want.

This is the same page on live tetralog.haipa.xyz, which is actually localhost:80 on my server. '게임' is highlighted instead of '명조'. This is not what I want.

Now, because of this, I have to find out a way to manually set the active state of the header menu.

I see the active state is controlled by three files:

• assets/hb/modules/header/js/index.ts
• layouts/partials/hb/modules/header/menu.html
• layouts/partials/hb/modules/header/submenu.html

I think I should modify assets/hb/modules/header/js/index.ts to be like this:

// Manually define which ID must be 'active' depending on current URL
const customMap = {
  'b/game/wuthering-waves': 'header-menu-wuthering-waves'
  'b/game/wuthering-waves/main': 'header-menu-wuthering-waves-main'
  // ...
}
// somewhere after 'const isMenuParent'
// pseudo-code start
// if (const key, value in customMap) {
//   if (current pathname starts with key) {
//     activeMenu(menu corresponding to value)
//     activeMenu(menu corresponding to parent of value if exists)
//     return to avoid activating wrong menus from if checks
//   }
// }
// pseudo-code end
// rest of the if checks

But I have a few problems with this idea:

• How do I determine 'b/game/wuthering-waves' and 'b/game/wuthering-waves/main'?
  This might not be a problem because 'header-menu-wuthering-waves' will also be checked from 'header-menu-wuthering-waves-main' because the former is the parent of the latter.
• The submenu doesn't have an ID, according to submenu.html
  I have to 'override' this, but is there any hook that I can use for this?

Sorry for asking this kind of question.

[razonyang]

How do I determine 'b/game/wuthering-waves' and 'b/game/wuthering-waves/main'?

1. Use location.pathname or location.href to determine which page you're viewing at.
2. Use document.querySelector('.hb-header-submenu[href="URL"]') to find the submenu <a> element, please dont forgot to replace URL.

The active state is controlled by JavaScript now, not templates, there maybe useless code in template.

[razonyang]

I think I found the cause, I remember you trimed the trailing slash from your site, right? However the menu links weren't. So that will cause the JavaScript could not find the right element.

The easest way to solve this is appending the slash to location.pathname or location.href if there isn't in JavaScript.

[TetraTheta]

Thank you for letting me know about that!

My 'slash trimming script' should remove all trailing slash from every link. It seems the script didn't do its job properly... I'll check my 'slash trimming script' then re-test it.

Sorry, I should've check it first...

[TetraTheta]

Oh my, I didn't run 'slash trimming script' properly after building site... I'm very embarrassed...

I really appreciate for your (wasted because of me) time. I'm really sorry again.

[razonyang]

No problem.