Fix selected menu items with queries

Author: rvsia

packages/react-renderer-demo/src/app/src/components/navigation/find-connected-links.js

@@ -1,4 +1,4 @@
-const query = /\?.*/;
+export const query = /\?.*/;
 
 const findConnectedLinks = (pathname, navSchema) => navSchema.find(({ link }) => pathname.replace(/^\//, '').replace(query, '') === link);
 

packages/react-renderer-demo/src/app/src/components/navigation/mapper.js

@@ -14,6 +14,7 @@ import RouterNavLink from 'next/link';
 import { useRouter } from 'next/router';
 
 import { navStyles } from './nav-styles';
+import { query } from './find-connected-links';
 
 const useStyles = makeStyles(navStyles);
 
@@ -24,7 +25,7 @@ const Item = ({ href, linkText, component }) => {
   return (
     <ListItem
       button
-      selected={href.replace('/?', '?') === router.asPath}
+      selected={href.replace('/?', '?') === router.asPath.replace(query, '')}
       key={href || linkText}
       className={classes.nested}
       component={forwardRef((props, ref) => (