style: improve sidebar navigation UX on tablet/mobile viewports#308
style: improve sidebar navigation UX on tablet/mobile viewports#308vanshika2720 wants to merge 1 commit into
Conversation
✅ Deploy Preview for kmesh-net ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
|
[APPROVALNOTIFIER] This PR is NOT APPROVED This pull-request has been approved by: The full list of commands accepted by this bot can be found here. DetailsNeeds approval from an approver in each of these files:Approvers can indicate their approval by writing |
Signed-off-by: vanshika2720 <pahalvanshikaa@gmail.com>
vanshika2720
force-pushed
the
feature/improve-sidebar-navigation
branch
from
2a7a590 to
8c24c8f
Compare
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
This pull request updates src/css/custom.css to improve accessibility by increasing tap targets to 44px, adds smooth transitions for sidebar and menu components, and introduces tablet-specific viewport adjustments. Feedback highlights concerns regarding the use of !important on layout properties, the potential performance impact of the will-change property on large containers, and the technical limitations of transitioning the height property for dynamic elements.
|
/cc @hzxuzhonghu |
|
@vanshika2720 please attach screenshots about this new changes .. |
[UI/UX] Improve Sidebar Navigation Experience on Tablet/Mobile Devices
Description
This PR enhances the mobile and tablet navigation experience (specifically targeting viewports up to
996px, including the768px - 996pxtablet range) for the Docusaurus collapsible sidebar and mobile drawers.Key Improvements:
44x44pxinteractive area for all sidebar links, category collapse toggles (.menu__caret), mobile navbar toggles, and drawer close buttons to meet WCAG accessibility guidelines.cubic-beziertransitions andwill-changehints for the mobile sidebar drawer, documentation sidebar container, and collapsible menu categories to ensure fluid, high-performance interactions.z-indexhierarchies, subtle box-shadow depth, and tablet-optimized width constraints (320px/80vwmax) to prevent the sidebar drawer from improperly overlapping or obscuring main page content.Changes
src/css/custom.css: Added targeted media queries (max-width: 996pxandmin-width: 768px and max-width: 996px) to improve tap target dimensions, transition smoothness, and container layout.Verification & Testing
768px - 996px) and mobile (<768px) viewports.44x44pxaccessibility threshold.