fix(shell): restore Settings access in the collapsed sidebar rail (#3998)

This commit is contained in:
Cyrus Gray
2026-06-23 19:30:33 +05:30
committed by GitHub
parent f1dcce4644
commit 0c94699e5e
2 changed files with 49 additions and 0 deletions
@@ -83,4 +83,31 @@ describe('CollapsedNavRail', () => {
'page'
);
});
it('renders a Settings icon that navigates to /settings', () => {
renderWithProviders(<CollapsedNavRail />, { initialEntries: ['/home'] });
const settings = screen.getByRole('button', { name: 'nav.settings' });
expect(settings).toBeInTheDocument();
fireEvent.click(settings);
expect(mockNavigate).toHaveBeenCalledWith('/settings');
});
it('marks Settings active on /settings routes', () => {
renderWithProviders(<CollapsedNavRail />, { initialEntries: ['/settings/general'] });
expect(screen.getByRole('button', { name: 'nav.settings' })).toHaveAttribute(
'aria-current',
'page'
);
});
it('defers to Wallet on the wallet sub-page — only one icon stays active', () => {
renderWithProviders(<CollapsedNavRail />, { initialEntries: ['/settings/wallet-balances'] });
expect(screen.getByRole('button', { name: 'nav.settings' })).not.toHaveAttribute(
'aria-current'
);
expect(screen.getByRole('button', { name: 'nav.wallet' })).toHaveAttribute(
'aria-current',
'page'
);
});
});
@@ -49,6 +49,11 @@ export default function CollapsedNavRail() {
};
const homeActive = location.pathname === '/chat' || location.pathname.startsWith('/chat/');
// Settings defers to the more-specific Wallet rail item so the wallet sub-page
// doesn't light up both icons at once.
const settingsActive =
matchActive('/settings', location.pathname) &&
!matchActive('/settings/wallet-balances', location.pathname);
return (
<nav className="flex flex-col items-center gap-0.5" aria-label={t('nav.home')}>
@@ -112,6 +117,23 @@ export default function CollapsedNavRail() {
</button>
);
})}
{/* Settings — reached via the header gear when expanded, which is hidden
in the collapsed rail, so it gets its own icon here. */}
<button
type="button"
onClick={() => navigate('/settings')}
title={t('nav.settings')}
aria-label={t('nav.settings')}
aria-current={settingsActive ? 'page' : undefined}
data-analytics-id="collapsed-rail-settings"
className={`${RAIL_BTN} ${
settingsActive
? 'bg-white text-stone-900 shadow-sm dark:bg-neutral-800 dark:text-neutral-100'
: 'text-stone-500 hover:bg-stone-100 hover:text-stone-700 dark:text-neutral-400 dark:hover:bg-neutral-800/60 dark:hover:text-neutral-200'
}`}>
<NavIcon id="settings" className="h-4 w-4" />
</button>
</nav>
);
}