allow SubNavigation to collapse menu

scm-ui/ui-components/src/navigation/SubNavigation.tsx

@@ -1,5 +1,5 @@
-import React, { FC, ReactElement, useContext } from "react";
+import React, { FC, ReactElement, useContext, useEffect } from "react";
-import { Link, Route } from "react-router-dom";
+import { Link, useRouteMatch } from "react-router-dom";
 import classNames from "classnames";
 import { MenuContext } from "./MenuContext";
 
@@ -14,52 +14,42 @@ type Props = {
   title?: string;
 };
 
-const SubNavigation: FC<Props> = ({
+const SubNavigation: FC<Props> = ({ to, activeOnlyWhenExact, icon, collapsed, title, label, children }) => {
-  to,
+  const parents = to.split("/");
-  icon,
+  parents.splice(-1, 1);
-  label,
+  const parent = parents.join("/");
-  activeOnlyWhenExact,
+
-  activeWhenMatch,
+  const match = useRouteMatch({
-  children,
+    path: parent,
-  collapsed,
+    exact: activeOnlyWhenExact
-  title
+  });
-}) => {
+
   const menuContext = useContext(MenuContext);
 
-  const isActive = (route: any) => {
+  useEffect(() => {
-    return route.match || activeWhenMatch && activeWhenMatch(route);
+    if (menuContext.menuCollapsed) {
-  };
+      menuContext.setMenuCollapsed(false);
+    }
+  }, [match]);
 
-  const renderLink = (route: any) => {
   let defaultIcon = "fas fa-cog";
   if (icon) {
     defaultIcon = icon;
   }
 
   let childrenList = null;
-    if (isActive(route)) {
+  if (match) {
-      if (menuContext.menuCollapsed) {
-        menuContext.setMenuCollapsed(false);
-      }
     childrenList = <ul className="sub-menu">{children}</ul>;
   }
 
   return (
     <li title={collapsed ? title : undefined}>
-        <Link className={classNames(isActive(route) ? "is-active" : "", collapsed ? "has-text-centered" : "")} to={to}>
+      <Link className={classNames(match != null ? "is-active" : "", collapsed ? "has-text-centered" : "")} to={to}>
         <i className={classNames(defaultIcon, "fa-fw")} /> {collapsed ? "" : label}
       </Link>
       {childrenList}
     </li>
   );
-  };
-
-  // removes last part of url
-  const parents = to.split("/");
-  parents.splice(-1, 1);
-  const parent = parents.join("/");
-
-  return <Route path={parent} exact={activeOnlyWhenExact} children={renderLink} />;
 };
 
 export default SubNavigation;