Bold text for selected items in SideNav and WebsiteNav.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Mike Cao 2026-02-06 04:43:21 -08:00
parent 3467184b8f
commit 5f404f62d8
2 changed files with 14 additions and 2 deletions

View file

@ -98,6 +98,7 @@ export function SideNav(props: any) {
) : (
<Column gap="2">
{links.map(({ id, path, label, icon }) => {
const isSelected = pathname.startsWith(renderUrl(path, false));
return (
<Link key={id} href={renderUrl(path, false)} role="button">
<TooltipTrigger isDisabled={!isCollapsed} delay={0}>
@ -105,10 +106,16 @@ export function SideNav(props: any) {
<Row
alignItems="center"
hover={{ backgroundColor: 'surface-sunken' }}
backgroundColor={isSelected ? 'surface-sunken' : undefined}
borderRadius
minHeight="40px"
>
<IconLabel icon={icon} label={isCollapsed ? '' : label} padding />
<IconLabel
icon={icon}
label={isCollapsed ? '' : label}
weight={isSelected ? 'bold' : undefined}
padding
/>
</Row>
</Focusable>
<Tooltip placement="right">{label}</Tooltip>

View file

@ -93,7 +93,12 @@ export function WebsiteNav({
borderRadius
minHeight="40px"
>
<IconLabel icon={icon} label={isCollapsed ? '' : label} padding />
<IconLabel
icon={icon}
label={isCollapsed ? '' : label}
weight={isSelected ? 'bold' : undefined}
padding
/>
</Row>
</Focusable>
<Tooltip placement="right">{label}</Tooltip>