feat: add side-nav router integration API

[tomivirkki]

Description

This PR adds onNavigate and location properties to <vaadin-side-nav>. The properties can be used to integrate the component with a client-side router.

Example usage with React router:

import { SideNav, SideNavItem } from "@vaadin/react-components";
import { useNavigate, useLocation } from "react-router";

function SideNavigation() {
  const navigate = useNavigate();
  const location = useLocation();

  return (
    <SideNav onNavigate={({ path }) => navigate(path)} location={location}>
      <SideNavItem path="contacts">Contacts</SideNavItem>
      <SideNavItem path="hello">Hello</SideNavItem>
    </SideNav>
  );
}

Fixes #6468

Note: Once navigation API is available in all supported browsers, we can update <vaadin-side-nav-item> to use it and remove the location property.

Type of change

Feature

[sonarcloud]

Quality Gate passed

Issues
3 New issues

Measures
0 Security Hotspots
No data about Coverage
0.0% Duplication on New Code

See analysis details on SonarCloud

[vaadin-bot]

This ticket/PR has been released with Vaadin 24.4.0.