[Bug] Labels are covered by navbar

[lanjd]

Checklist

• I am using the latest v2 version
• I have searched FAQ

Package name

vuepress-theme-hope

Which operating system are you using?

• macOS
• Windows
• Linux

Describe the bug

博客 手机的显示版本里 点击标签 提示被遮盖了 也不知道咋改

Additional context

No response

[Mister-Hope]

Sorry for the wrong delay, I am actually not finding a solution to this due to z-index limitation.

It seems that we may need to hide this or change label position in sidebar.

Suggestions about how to solve this in other ways are welcomed.

[Wu-JunHui]

Hi there. I've found a possible solution for this bug.

Current styles

Since the button label is based on the pseudo-element ( ::after ) of the button itself and is displayed by absolute positioning, it should be considered a content overflow when it locates outside the siderbar container. And now the part that overflows is hidden because of the two following reasons I presume:

（1）The z-index of sidebar is lower than navbar.

（2）The container of sidebar set a vertical scroll bar that displays automatically when content overflows in the Y direction.(overflow-y: auto)

Reason

Here's the part that I'm not exactly sure why that is, but I'm certain it's the right direction to solve the problem.

An element with absolute position behaves differently when it overflows on its parent container ( position: relative, overflow-y: auto ) in the Y direction.
（1）If it overflows above parent container, it will be hidden.
（2）If it overflows below parent container, it will trigger the vertical scroll bar of parent container.

It works the same when you try it with X direction.( Left will be hidden, right will show scroll bar). And when you switch the button in the sidebar , the vertical scroll bar of sidebar will appear for a moment, even if the content doesn't overflow.

Solution

（1）Change the z-index of sidebar into 180 .(highter than navbar)

（2）Remove this style of sidebar: overflow-y: auto，or set to its default value visible, so the content can overflow normally.

（3）Change the way of overflowing in the sidebar:
After removing the overflow-y: auto of sidebar , it's necessary to solve the problem that content will be hidden when it overflows in the Y direction.

Before any modification, the sidebar display content that overflows below through overflow-y: auto. Let's take the Timeline button for instance. As you can see, there are two vertical scroll bars display in the sidebar at the same time.

Expect for the slight visual incongruity, the function of these two bars seem to overlap. Therefore, why not remove the scroll bar of the sidebar and make buttons and its title area fixed. Meanwhile, set the corresponding content container with overflow-y: auto, of course you should set the container's height too.

Postscript

I was wondering if it's better to disable the scroll bar of blog home page when I open the sidebar. As the viewport is now largely occupied by the sidebar, I think the user may only focus on the sidebar and it doesn't seem to make much sense to scroll home page while scrolling the sidebar. Of course this is just a suggestion.

I used the latest verion( v2.0.0-beta.174 ) of vuepress-theme-hope to override the styles I mention up there. And it run normally as I post this. Hope it will help and good luck.

// index.scss
@media (max-width: 719px) {
  .sidebar {
    z-index: 180;
  }
}

.sidebar {
  overflow-y: visible;
}

// Take Timeline for instance
.timeline-list-wrapper .timeline-content {
  max-height: 70vh !important;
}

[Mister-Hope]

Track #2816 for your suggestions, we will add it in next verion.

For z-index problem, to like navbar shadow appear correctly, navbar z-index is expected to be higher than sidebar, so that's why I am saying that there is no solution for this.

For the scroll bar issue, the problem is that we have slots on sidebar for users to customize contents, so there might be extra contents before and after the sidebar. In this case fixing the 4 button at top could be a bad idea as they are out of dom flow.