Repository: storybookjs/storybook
File: code/core/src/manager/components/sidebar/Menu.tsx (TypeScript)

Code before:
export const SidebarToggleButton = styled(ToggleButton)<
  ComponentProps<typeof ToggleButton> & {
    highlighted: boolean;
    isMobile: boolean;
  }
>(buttonStyleAdditions);

const MenuButtonGroup = styled.div({
  display: 'flex',
  gap: 6,
});

const SidebarMenuList: FC<{
  menu: MenuList;
  onHide: () => void;
}> = ({ menu, onHide }) => (
  <Container>
    {menu
      .filter((links) => links.length)
      .flatMap((links) => (
        <ActionList key={links.map((link) => link.id).join('_')}>
          {links.map((link) => (
            <ActionList.Item key={link.id} active={link.active}>
              <ActionList.Action
                {...(link.href && {
                  as: 'a',
                  href: link.href,
                  target: link.internal ? undefined : '_blank',
                  rel: link.internal ? 'canonical' : undefined,
                })}
                ariaLabel={false}
                id={`list-item-${link.id}`}
                disabled={link.disabled}
                onClick={(e) => {
                  // Prevent interaction with disabled links
                  if (link.disabled) {
                    e.preventDefault();
                    return;
                  }
                  // Prevent browser navigation for internal links, where we'll use our
                  // router API instead, but want to show an `href` for UX/SEO purposes.
                  if (link.href && link.internal) {
                    e.preventDefault();
                  }
                  link.onClick?.(e, {
                    id: link.id,
                    active: link.active,
                    disabled: link.disabled,
                    title: link.title,
                    href: link.href,
                  });

Review comment (suggestion):
It would be better to use `asChild` (with an `a` child element) rather than `as='a'`.

Code after:
export const SidebarToggleButton = styled(ToggleButton)<
  ComponentProps<typeof ToggleButton> & {
    highlighted: boolean;
    isMobile: boolean;
  }
>(buttonStyleAdditions);

const MenuButtonGroup = styled.div({
  display: 'flex',
  gap: 6,
});

const SidebarMenuList: FC<{
  menu: MenuList;
  onHide: () => void;
}> = ({ menu, onHide }) => (
  <Container>
    {menu
      .filter((links) => links.length)
      .flatMap((links) => (
        <ActionList key={links.map((link) => link.id).join('_')}>
          {links.map((link) => {
            const linkContent = (
              <>
                {(link.icon || link.input) && (
                  <ActionList.Icon>{link.icon || link.input}</ActionList.Icon>
                )}
                {(link.title || link.center) && (
                  <ActionList.Text>{link.title || link.center}</ActionList.Text>
                )}
                {link.right}
              </>
            );

            return (
              <ActionList.Item key={link.id} active={link.active}>
                <ActionList.Action
                  asChild={!!link.href}
                  ariaLabel={false}
                  id={`list-item-${link.id}`}
                  disabled={link.disabled}
                  onClick={(e) => {
                    // Prevent interaction with disabled links
                    if (link.disabled) {
                      e.preventDefault();
                      return;
                    }
                    // Prevent browser navigation for internal links, where we'll use our
                    // router API instead, but want to show an `href` for UX/SEO purposes.
                    if (link.href && link.internal) {
                      e.preventDefault();