How to make my second tab the default one in my panel page?

The CMS Questions
1

Hi there!

I have my panel page for the site divided into three tabs: Home, Work, About.
I would like the work section to become active when I navigate back up from a work subpage via the top bar view button. I thought I could solve this with some custom panel js, but I cannot get it to work.

Here’s what I have:

document.addEventListener("DOMContentLoaded", function() {
  window.setTimeout(() => {

    const topBarViewButton = document.querySelector('.k-topbar-view-button');
    topBarViewButton.href += "#work";

  }, 500);
});

While this correctly changes the href attribute of the a tag, if I click on it, it still redirects me to mysite.test/panel/site instead of mysite.test/panel/site#work. It feels like the href attribute might be overwritten by some routing logic in the background?

Any ideas, how I could make this work?

Thanks!

2

Yes, I think that is the case, if you look at Topbar.vue and Link.vue.

3

Uff, had a quick look, that stuff is way above my head. I assume there is no easy way to overwrite this behaviour then, right?

4

Yep, same here.

Probably not, but because of 1, I can’t be sure.

5

Ok, I came up with a dirty hack. Doesn’t look too nice code wise, but it works. :wink:

I just insert an invisible a tag on top of the actual link via JavaScript and that a tag can then do the proper routing to the tab directly:

document.addEventListener("DOMContentLoaded", function() {
  window.setTimeout(() => {

    const topBarViewButton = document.querySelector('.k-topbar-view-button');
    const workLink = document.createElement("A");
    topBarViewButton.parentNode.insertBefore(workLink, topBarViewButton);

    workLink.classList.add('.k-link', '.k-topbar-button');
    workLink.href = "/panel/site#work";

    Object.assign(workLink.style, {
      width: topBarViewButton.offsetWidth + "px",
      height: topBarViewButton.offsetHeight + "px",
      left: topBarViewButton.offsetLeft + "px",
      position: "absolute"
    });

  }, 500);
});

As you see, this has some really nasty sizing, but it works well for my specific use case. Maybe somebody else finds it useful in the future.

texnixe 6

:open_mouth: