Add responsive homepage navigation menu for better section navigation. #91
Conversation
|
@Shaily-62 is attempting to deploy a commit to the idan lodzki's projects Team on Vercel. A member of the Team first needs to authorize it. |
WalkthroughAdds a new responsive NavMenu React component with mobile toggle state and link click handlers, plus a CSS module implementing desktop and mobile (hamburger) styles. Integrates NavMenu into the main index page and adds in-page anchor IDs for features and community sections. Changes
Suggested reviewers
📜 Recent review detailsConfiguration used: Path: .coderabbit.yaml Review profile: CHILL Plan: Pro 📒 Files selected for processing (3)
🚧 Files skipped from review as they are similar to previous changes (3)
Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
🧹 Nitpick comments (3)
opsimate-docs/src/components/NavMenu.js (1)
14-15: Consider addingaria-labelto the nav element.Since Docusaurus has a main navbar, adding an
aria-labelwould help screen reader users distinguish this secondary navigation.Apply this diff:
- <nav className={styles.navMenu}> + <nav className={styles.navMenu} aria-label="Section navigation">opsimate-docs/src/components/NavMenu.module.css (2)
68-79: Consider using a more maintainable positioning approach.The hardcoded
50pxoffset in the mobile menu positioning might not match the actual.navMenuheight if padding or font-size changes.Consider one of these approaches:
Option 1: Position relative to parent
.menuList { display: none; - position: absolute; - top: calc(var(--ifm-navbar-height) + 50px); + position: relative; + top: 0; left: 0; right: 0;Option 2: Use a CSS variable for .navMenu height
Define the height as a variable and reference it::root { --nav-menu-height: 50px; } .navMenu { height: var(--nav-menu-height); /* ... */ } .menuList { top: calc(var(--ifm-navbar-height) + var(--nav-menu-height)); /* ... */ }
37-56: Consider adding hamburger animation for better UX.A common UX pattern is to animate the hamburger bars into an "X" shape when the menu opens.
You could add these styles for the animated hamburger:
.menuToggle.open .bar:nth-child(1) { transform: rotate(-45deg) translate(-5px, 6px); } .menuToggle.open .bar:nth-child(2) { opacity: 0; } .menuToggle.open .bar:nth-child(3) { transform: rotate(45deg) translate(-5px, -6px); }Then update the component to add the
openclass:<button className={`${styles.menuToggle} ${menuOpen ? styles.open : ''}`} // ... >
📜 Review details
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (3)
opsimate-docs/src/components/NavMenu.js(1 hunks)opsimate-docs/src/components/NavMenu.module.css(1 hunks)opsimate-docs/src/pages/index.jsx(4 hunks)
🧰 Additional context used
🧬 Code graph analysis (1)
opsimate-docs/src/pages/index.jsx (1)
opsimate-docs/src/components/NavMenu.js (1)
NavMenu(4-42)
🔇 Additional comments (4)
opsimate-docs/src/components/NavMenu.js (1)
7-12: LGTM! Sections array aligns with available anchor IDs.The active sections match the anchor IDs added in index.jsx. The commented-out sections are appropriate for future expansion.
opsimate-docs/src/pages/index.jsx (2)
5-5: LGTM! NavMenu integration is well-placed.The component is correctly imported and positioned to appear below the main Docusaurus navbar, enabling proper sticky positioning for section navigation.
Also applies to: 94-94
106-106: LGTM! Anchor ID correctly enables navigation.The
id="features"attribute properly connects this section to the NavMenu navigation links.opsimate-docs/src/components/NavMenu.module.css (1)
1-13: LGTM! Sticky navigation with proper theme integration.The navigation uses Docusaurus CSS variables correctly and implements smooth transitions for theme changes. The sticky positioning relative to the navbar height is well-implemented.
|
@Shaily-62 add some images from mobile and pc |
PC
mobile
|
|
no need for that feature here |
2 participants
Issue Reference
[UI] Add Navigation Menu to Jump Between Sections on Homepage #64
What Was Changed
Added a responsive, theme-aware navigation menu to the homepage.
Created two new files:
-src/components/NavMenu.js — handles the menu logic, responsive toggle, and section navigation.
-src/components/NavMenu.module.css — includes light/dark mode styles and responsive layout.
-Integrated the NavMenu component into src/pages/index.jsx so it appears below the main Docusaurus navbar.
-Implemented smooth scrolling between sections (Features, Integrations, Community, Contact).
-Added a mobile hamburger menu for smaller screens.
Why Was It Changed
Improves navigation and usability on long homepage layouts.
Allows users to jump between key sections quickly without excessive scrolling.
Enhances overall user experience and site structure.
Keeps styling consistent with OpsiMate’s existing color theme and dark/light mode toggle.
Screenshots
Desktop View
Screenshot 2025-10-27 190258 Screenshot 2025-10-27 190251
#Mobile View
Screenshot 2025-10-27 190812
New Features
Added a responsive navigation menu with mobile hamburger toggle.
Navigation includes quick access links to Features and Community sections.
Mobile menu automatically closes when navigating to a section.
Summary by CodeRabbit
New Features
Style