fix: auto-collapse pages sidebar on mobile navigation by aniKet0753 · Pull Request #47 · open-devhub/website

aniKet0753 · 2026-07-18T01:11:58Z

What does this PR do?

This PR fixes the mobile sidebar behavior on the /pages route. Previously, when a user selected a page from the sidebar on mobile devices, the sidebar remained open after navigation. This change ensures the sidebar automatically collapses after a page is selected, providing a smoother and more intuitive mobile navigation experience.

Closes

Closes Pages sidebar doesn't collapse when another item is selected (mobile) #44

Type of change(s)

Checklist

I have tested the changes locally.
The fix works as expected on mobile devices.
No existing functionality was affected.

beetle-ai · 2026-07-18T01:12:05Z

Summary by Beetle

This PR fixes a mobile UX issue where the pages sidebar remains open after navigation on mobile devices. The fix implements an auto-collapse mechanism by passing a callback function (onNavigate) through the sidebar component hierarchy that closes the mobile sidebar when a user clicks on a page link. This improves the mobile navigation experience by automatically dismissing the sidebar overlay after selection.

📁 File Changes Summary (Consolidated across all commits):

File	Status	Changes	Description
`app/pages/layout.tsx`	Modified	+6/-4	Added `onNavigate` callback prop to `SidebarSection` and `SidebarContent` components to trigger sidebar collapse on mobile navigation. The callback is passed down from the main layout component and invoked when users click on page links, automatically closing the mobile sidebar overlay.

Total Changes: 1 file changed, +6 additions, -4 deletions

🎯 Key Changes:

Added onNavigate callback prop to SidebarSection component interface to accept a navigation callback function
Updated SidebarSection component to accept and pass through the onNavigate callback to child Link components via onClick handler
Modified SidebarContent component to accept and propagate the onNavigate callback to all SidebarSection instances
Connected mobile sidebar state by passing () => setMobileOpen(false) as the onNavigate callback from the main layout, ensuring the sidebar closes when navigation occurs
Maintained backward compatibility by making onNavigate an optional prop with ? type annotation

📊 Impact Assessment:

Security: No security implications. This is a pure UX enhancement with no changes to authentication, data handling, or access control mechanisms.
Performance: Minimal performance impact. The change adds a simple callback invocation on link clicks, which is negligible. No additional re-renders or state management overhead introduced.
Maintainability: Improves maintainability by establishing a clear callback pattern for component communication. The optional prop design maintains backward compatibility and makes the intent clear. Code is straightforward and easy to understand.
Testing: The change requires testing of mobile navigation flows to verify:
Sidebar closes after clicking a page link on mobile
Desktop behavior remains unchanged (sidebar stays open)
All page links properly trigger the callback
No regression in sidebar open/close functionality
Recommend adding integration tests for mobile navigation scenarios

⚙️ Settings

Severity Threshold: Medium — Balanced feedback — medium and high severity issues only. — Change in Settings
Custom Rules: Define your own review rules — Set Custom Rules
PR Summary: Configure PR summary — Change in Settings

📖 User Guide

Once repos are connected, PR analysis is automatically enabled. You can disable analysis for this repo from beetleai.dev/analysis
Comment @beetle on any PR to start analysis manually
Comment @beetle stop to stop any ongoing analysis

Follow us: Beetle · X · LinkedIn

beetle-ai · 2026-07-18T01:12:55Z

                const isActive = currentSlug === `/pages/${page.slug}`;
                return (
-                  <Link key={page.slug} href={`/pages/${page.slug}`}>
+                  <Link onClick={onNavigate} key={page.slug} href={`/pages/${page.slug}`}>


The onClick={onNavigate} handler is being called without checking if onNavigate is defined. Since onNavigate is an optional prop, it could be undefined, and passing undefined to onClick may cause unexpected behavior or errors.

Confidence: 4/5

Suggested Fix

Suggested change

<Link onClick={onNavigate} key={page.slug} href={`/pages/${page.slug}`}>

<Link onClick={onNavigate && onNavigate} key={page.slug} href={`/pages/${page.slug}`}>

Alternatively, use optional chaining:

Suggested change

<Link onClick={onNavigate} key={page.slug} href={`/pages/${page.slug}`}>

<Link onClick={() => onNavigate?.()} key={page.slug} href={`/pages/${page.slug}`}>

The second approach is more idiomatic in React - it safely calls onNavigate only if it's defined, preventing potential runtime errors when the callback is not provided.

beetle-ai · 2026-07-18T01:23:15Z

Summary by Beetle

This PR addresses a callback handling issue in the sidebar navigation component. The change modifies how the onNavigate callback is invoked when a user clicks on a page link, ensuring the callback is only executed if it's defined. This is a defensive programming fix that prevents potential runtime errors when the callback prop is optional or undefined.

📁 File Changes Summary (Consolidated across all commits):

File	Status	Changes	Description
`app/pages/layout.tsx`	Modified	+1/-1	Fixed callback invocation in `SidebarSection` component by wrapping `onNavigate` in an optional chaining arrow function to safely handle cases where the callback may be undefined

Total Changes: 1 file changed, +1 additions, -1 deletions

🎯 Key Changes:

Callback Safety Fix: Changed onClick={onNavigate} to onClick={() => onNavigate?.()} in the Link component within the sidebar navigation
Optional Chaining: Implemented optional chaining (?.) to safely invoke the callback only if it's defined, preventing "Cannot read property of undefined" errors
Defensive Programming: Ensures the component gracefully handles scenarios where onNavigate prop is not provided or is undefined

📊 Impact Assessment:

Security: ✅ No security implications. This change improves robustness by preventing potential runtime errors that could be exploited or cause unexpected behavior.
Performance: ✅ Negligible performance impact. The arrow function wrapper adds minimal overhead (microseconds), and optional chaining is optimized by modern JavaScript engines. No performance degradation expected.
Maintainability: ✅ Improved maintainability. The optional chaining pattern is a modern JavaScript best practice that makes the code more defensive and easier to understand. It clearly communicates that onNavigate is an optional callback.
Testing: ⚠️ Moderate testing consideration. Test cases should verify:
Navigation works correctly when onNavigate is provided
Navigation doesn't throw errors when onNavigate is undefined or null
The Link component still navigates to the correct href regardless of callback state

⚙️ Settings

Severity Threshold: Medium — Balanced feedback — medium and high severity issues only. — Change in Settings
Custom Rules: Define your own review rules — Set Custom Rules
PR Summary: Configure PR summary — Change in Settings

📖 User Guide

Once repos are connected, PR analysis is automatically enabled. You can disable analysis for this repo from beetleai.dev/analysis
Comment @beetle on any PR to start analysis manually
Comment @beetle stop to stop any ongoing analysis

Follow us: Beetle · X · LinkedIn

beetle-ai · 2026-07-18T01:24:00Z

✅ You're good to merge this PR! No issues found. Great job!

Settings

⚙️ Settings

Severity Threshold: Medium — Balanced feedback — medium and high severity issues only. — Change in Settings
Custom Rules: Define your own review rules — Set Custom Rules
PR Summary: Configure PR summary — Change in Settings

📖 User Guide

Once repos are connected, PR analysis is automatically enabled. You can disable analysis for this repo from beetleai.dev/analysis
Comment @beetle on any PR to start analysis manually
Comment @beetle stop to stop any ongoing analysis

calebephrem

Awesome

calebephrem · 2026-07-18T06:12:53Z

Tysm for contributing!

fix: auto-collapse pages sidebar on mobile navigation

aca3e82

devhub-bot Bot added the fix Bug fix label Jul 18, 2026

beetle-ai Bot reviewed Jul 18, 2026

View reviewed changes

callback on defined

fd0e9e8

vercel Bot deployed to Preview July 18, 2026 06:08 View deployment

calebephrem approved these changes Jul 18, 2026

View reviewed changes

calebephrem merged commit d0daf87 into open-devhub:main Jul 18, 2026
2 checks passed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

fix: auto-collapse pages sidebar on mobile navigation#47

fix: auto-collapse pages sidebar on mobile navigation#47
calebephrem merged 2 commits into
open-devhub:mainfrom
aniKet0753:fix/mobile-sidebar

aniKet0753 commented Jul 18, 2026

Uh oh!

beetle-ai Bot commented Jul 18, 2026 •

edited

Loading

Uh oh!

beetle-ai Bot Jul 18, 2026

Uh oh!

beetle-ai Bot commented Jul 18, 2026 •

edited

Loading

Uh oh!

beetle-ai Bot commented Jul 18, 2026

Uh oh!

calebephrem left a comment

Uh oh!

Uh oh!

calebephrem commented Jul 18, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

	<Link onClick={onNavigate} key={page.slug} href={`/pages/${page.slug}`}>
	<Link onClick={onNavigate && onNavigate} key={page.slug} href={`/pages/${page.slug}`}>

	<Link onClick={onNavigate} key={page.slug} href={`/pages/${page.slug}`}>
	<Link onClick={() => onNavigate?.()} key={page.slug} href={`/pages/${page.slug}`}>

Uh oh!

Conversation

aniKet0753 commented Jul 18, 2026

What does this PR do?

Closes

Type of change(s)

Checklist

Uh oh!

beetle-ai Bot commented Jul 18, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary by Beetle

📁 File Changes Summary (Consolidated across all commits):

🎯 Key Changes:

📊 Impact Assessment:

Uh oh!

beetle-ai Bot Jul 18, 2026

Choose a reason for hiding this comment

Uh oh!

beetle-ai Bot commented Jul 18, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary by Beetle

📁 File Changes Summary (Consolidated across all commits):

🎯 Key Changes:

📊 Impact Assessment:

Uh oh!

beetle-ai Bot commented Jul 18, 2026

Uh oh!

calebephrem left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

calebephrem commented Jul 18, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

beetle-ai Bot commented Jul 18, 2026 •

edited

Loading

beetle-ai Bot commented Jul 18, 2026 •

edited

Loading