Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

navbar menu may exceeds the screen #988

Closed
4 tasks done
likui628 opened this issue Jul 14, 2022 · 1 comment · Fixed by #989
Closed
4 tasks done

navbar menu may exceeds the screen #988

likui628 opened this issue Jul 14, 2022 · 1 comment · Fixed by #989
Labels
bug Something isn't working theme Related to the theme

Comments

@likui628
Copy link
Contributor

Is your feature request related to a problem? Please describe.

If there are many navbar menus or the users have a low-resolution screen,
it is supposed that the navbar menus may succeed the screen height.
image

Describe the solution you'd like

add max-height and overflow-y properties
https://github.com/vuejs/vitepress/blob/main/src/client/theme-default/components/VPMenu.vue

.VPMenu {
  /** +++ **/
  max-height: 90vh;
  overflow-y: scroll;
 / ** +++ **/
  border-radius: 12px;
  padding: 12px;
  min-width: 128px;
  border: 1px solid var(--vp-c-divider-light);
  background-color: var(--vp-c-bg);
  box-shadow: var(--vp-shadow-3);
  transition: background-color 0.5s;
}

Describe alternatives you've considered

No response

Additional context

No response

Validations

@brc-dd brc-dd added bug Something isn't working theme Related to the theme labels Jul 14, 2022
@brc-dd
Copy link
Member

brc-dd commented Jul 14, 2022

Just realized that this is on Vue docs too. Patched it to look like this:

image

The max-height thing will work better with calc(100vh - var(--vp-nav-height-desktop)) (also it needs to be added only for desktops min-width: 768px). On mobiles it still works fine. Feel free to create a PR or I'll make once I get some time.

likui628 added a commit to likui628/vitepress that referenced this issue Jul 14, 2022
brc-dd added a commit that referenced this issue Jul 15, 2022
@github-actions github-actions bot locked as resolved and limited conversation to collaborators Jan 21, 2023
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
bug Something isn't working theme Related to the theme
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants