Skip to content

🐛 Fixed mobile admin nav bar reloading admin and its dark-mode active state #28609

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.

Sign up for GitHub

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

Merged
9larsons merged 2 commits into from
Jun 16, 2026
Merged

🐛 Fixed mobile admin nav bar reloading admin and its dark-mode active state #28609

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
5d84106
🐛 Fixed the active mobile nav item showing a light pill in dark mode
9larsons Jun 15, 2026
b5940c1
🐛 Fixed mobile nav links reloading all of admin instead of navigating
9larsons Jun 16, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 5 additions & 2 deletions apps/admin/src/layout/app-sidebar/mobile-nav-bar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,16 +13,19 @@ interface MobileNavBarButtonProps extends Omit<React.ComponentProps<typeof Butto

function MobileNavBarButton({ to, activeOnSubpath = false, children, ...props }: MobileNavBarButtonProps) {
const isActive = useIsActiveLink({ path: to, activeOnSubpath });
// Use a hash route (e.g. "#/posts") so navigation stays client-side; a bare
// relative href like "posts" triggers a full page load and reloads all of admin.
const href = `#/${to?.replace(/^\/?#\//, '')}`;

@coderabbitai coderabbitai Bot Jun 16, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟡 Minor | ⚡ Quick win

Avoid generating #/undefined when to is absent.

At Line 18, optional chaining still allows template-literal coercion to "undefined", so Line 28 can render href="#/undefined" if to is ever omitted. Guard the value (or require to) before building href.

Suggested fix 
 interface MobileNavBarButtonProps extends Omit<React.ComponentProps<typeof Button>, 'asChild'> {
-    to?: string;
+    to: string;
     activeOnSubpath?: boolean;
 }
@@
-    const href = `#/${to?.replace(/^\/?#\//, '')}`;
+    const href = `#/${to.replace(/^\/?#\//, '')}`;

Also applies to: 28-28

🤖 Prompt for AI Agents 
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@apps/admin/src/layout/app-sidebar/mobile-nav-bar.tsx` at line 18, The href
variable construction uses optional chaining with a template literal, but this
still allows undefined values to be coerced into the string "undefined",
resulting in href="`#/undefined`" being rendered when the to prop is absent. Add a
guard condition to check if to exists before building the href string, either by
using a null coalescing operator (like to ?? ''), by wrapping the href
construction in a conditional check, or by making the to prop mandatory. Apply
this same guard wherever href is used to ensure no "undefined" paths are
generated.


return (
<Button
asChild
className={`w-full max-w-16 min-w-9 rounded-full hover:bg-gray-200 ${isActive ? 'bg-gray-200' : 'bg-transparent'}`} {...props}
className={`w-full max-w-16 min-w-9 rounded-full hover:bg-sidebar-accent hover:text-sidebar-accent-foreground ${isActive ? 'bg-sidebar-accent text-sidebar-accent-foreground' : 'bg-transparent'}`} {...props}
variant="ghost"
size="icon"
data-active={isActive}
>
<a href={to}>
<a href={href}>
{children}
</a>
</Button>
Expand Down
Loading