fix(desktop): Settings sidebar redirected to /chats instead of scrolling
App uses HashRouter, so an <a href="#profile"> changes the routing hash and the router can't find a match — it falls back to /chats. Replace anchors with buttons that scroll the target section via scrollIntoView and update the active highlight optimistically.
This commit is contained in:
@@ -159,11 +159,23 @@ export function SettingsPage() {
|
|||||||
{sections.map(({ id, label, Icon }) => {
|
{sections.map(({ id, label, Icon }) => {
|
||||||
const active = activeId === id;
|
const active = activeId === id;
|
||||||
return (
|
return (
|
||||||
<a
|
// NOTE: must NOT be an `<a href="#id">` — the app uses
|
||||||
|
// HashRouter where the URL hash IS the route. Anchor links
|
||||||
|
// would navigate away from /settings instead of scrolling.
|
||||||
|
// We scroll the section into view programmatically and
|
||||||
|
// optimistically set activeId so the click feels instant.
|
||||||
|
<button
|
||||||
key={id}
|
key={id}
|
||||||
href={'#' + id}
|
type="button"
|
||||||
|
onClick={() => {
|
||||||
|
const el = document.getElementById(id);
|
||||||
|
if (el) {
|
||||||
|
el.scrollIntoView({ behavior: 'smooth', block: 'start' });
|
||||||
|
setActiveId(id);
|
||||||
|
}
|
||||||
|
}}
|
||||||
className={
|
className={
|
||||||
'flex cursor-pointer items-center gap-2.5 rounded-lg px-3 py-2 text-sm font-medium transition focus:outline-none focus-visible:ring-2 focus-visible:ring-accent/40 ' +
|
'flex w-full cursor-pointer items-center gap-2.5 rounded-lg px-3 py-2 text-left text-sm font-medium transition focus:outline-none focus-visible:ring-2 focus-visible:ring-accent/40 ' +
|
||||||
(active
|
(active
|
||||||
? 'bg-accent/15 text-fg'
|
? 'bg-accent/15 text-fg'
|
||||||
: 'text-fg-muted hover:bg-surface-2 hover:text-fg')
|
: 'text-fg-muted hover:bg-surface-2 hover:text-fg')
|
||||||
@@ -175,7 +187,7 @@ export function SettingsPage() {
|
|||||||
}
|
}
|
||||||
/>
|
/>
|
||||||
<span className="truncate">{label}</span>
|
<span className="truncate">{label}</span>
|
||||||
</a>
|
</button>
|
||||||
);
|
);
|
||||||
})}
|
})}
|
||||||
</nav>
|
</nav>
|
||||||
|
|||||||
Reference in New Issue
Block a user