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

Fix ugly looking navigation on mobile #2823

Merged
merged 4 commits into from
Nov 25, 2024

Conversation

Blargian
Copy link
Collaborator

@Blargian Blargian commented Nov 24, 2024

Summary

I'm sure there are very few people looking at ClickHouse docs on mobile... never the less, the secondary (docs) navigation bar looks horrible on mobile:

image

This PR adds custom React components Hamburger, HamburgerMenu and MobileMenu (grouped under DocsCategoryMobileNav) such that the secondary menu acts in a similar way to the primary menu (displays a burger menu and navigation overlay for smaller screen sizes).

Result

demo

Still to do:

  • Fix search bar styling for dark theme.
  • Hide navbar when link is clicked.
  • Move dropdownCategories in src/theme/NavBar/Content/index.js to it's own config file, accessible by this new component.

Checklist

@Blargian Blargian changed the title [WIP] Fix ugly looking navigation on mobile Fix ugly looking navigation on mobile Nov 25, 2024
@Blargian Blargian marked this pull request as ready for review November 25, 2024 13:26
@justindeguzman
Copy link
Contributor

Thanks @Blargian. I'm going to merge this in as an improvement, but my suggest would be to:

  • Flip the menus so that the top-level categories are the first menu, and the second menu opens the navbar for the current category
  • For the top-level menu, it maybe should not be an icon but instead "Getting Started", "Cloud", etc. The double menus may look confusing
Screenshot 2024-11-25 at 11 44 07 AM

@justindeguzman justindeguzman merged commit d21cc5f into ClickHouse:main Nov 25, 2024
3 checks passed
@Blargian
Copy link
Collaborator Author

Blargian commented Nov 25, 2024

Thanks @Blargian. I'm going to merge this in as an improvement, but my suggest would be to:

  • Flip the menus so that the top-level categories are the first menu, and the second menu opens the navbar for the current category
  • For the top-level menu, it maybe should not be an icon but instead "Getting Started", "Cloud", etc. The double menus may look confusing
Screenshot 2024-11-25 at 11 44 07 AM

Thanks @justindeguzman, that makes sense. I'm thinking now maybe just a change to the styling of the menu you implemented for mobile is required:
image

The secondary menu on mobile could show the categories: Getting started, Cloud, Managing Data etc and instead of the sub-menu popping up on hover, it could slide out from the left of the screen or something.

I'll see what can be done.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants