Add support for expandable nav groups in route definition (#96)

Author: mturley

src/app/AppLayout/AppLayout.tsx

@@ -1,15 +1,16 @@
 import * as React from 'react';
-import { NavLink } from 'react-router-dom';
+import { NavLink, useLocation } from 'react-router-dom';
 import {
   Nav,
   NavList,
   NavItem,
+  NavExpandable,
   Page,
   PageHeader,
   PageSidebar,
   SkipToContent
 } from '@patternfly/react-core';
-import { routes } from '@app/routes';
+import { routes, IAppRoute, IAppRouteGroup } from '@app/routes';
 
 interface IAppLayout {
   children: React.ReactNode;
@@ -42,14 +43,33 @@ const AppLayout: React.FunctionComponent<IAppLayout> = ({children}) => {
     />
   );
 
+  const location = useLocation();
+
+  const renderNavItem = (route: IAppRoute, index: number) => (
+    <NavItem key={`${route.label}-${index}`} id={`${route.label}-${index}`}>
+      <NavLink exact to={route.path} activeClassName="pf-m-current">
+        {route.label}
+      </NavLink>
+    </NavItem>
+  );
+
+  const renderNavGroup = (group: IAppRouteGroup, groupIndex: number) => (
+    <NavExpandable
+      key={`${group.label}-${groupIndex}`}
+      id={`${group.label}-${groupIndex}`}
+      title={group.label}
+      isActive={group.routes.some((route) => route.path === location.pathname)}
+    >
+      {group.routes.map((route, idx) => route.label && renderNavItem(route, idx))}
+    </NavExpandable>
+  );
+
   const Navigation = (
     <Nav id="nav-primary-simple" theme="dark">
       <NavList id="nav-list-simple">
-        {routes.map((route, idx) => route.label && (
-            <NavItem key={`${route.label}-${idx}`} id={`${route.label}-${idx}`}>
-              <NavLink exact to={route.path} activeClassName="pf-m-current">{route.label}</NavLink>
-            </NavItem>
-          ))}
+        {routes.map(
+          (route, idx) => route.label && (!route.routes ? renderNavItem(route, idx) : renderNavGroup(route, idx))
+        )}
       </NavList>
     </Nav>
   );

src/app/Settings/General/GeneralSettings.tsx

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import { PageSection, Title } from '@patternfly/react-core';
+
+const GeneralSettings: React.FunctionComponent = () => (
+  <PageSection>
+    <Title headingLevel="h1" size="lg">
+      General Settings Page Title
+    </Title>
+  </PageSection>
+);
+
+export { GeneralSettings };

src/app/Settings/Profile/ProfileSettings.tsx

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import { PageSection, Title } from '@patternfly/react-core';
+
+const ProfileSettings: React.FunctionComponent = () => (
+  <PageSection>
+    <Title headingLevel="h1" size="lg">
+      Profile Settings Page Title
+    </Title>
+  </PageSection>
+);
+
+export { ProfileSettings };

src/app/routes.tsx

@@ -4,6 +4,8 @@ import { Alert, PageSection } from '@patternfly/react-core';
 import { DynamicImport } from '@app/DynamicImport';
 import { accessibleRouteChangeHandler } from '@app/utils/utils';
 import { Dashboard } from '@app/Dashboard/Dashboard';
+import { GeneralSettings } from '@app/Settings/General/GeneralSettings';
+import { ProfileSettings } from '@app/Settings/Profile/ProfileSettings';
 import { NotFound } from '@app/NotFound/NotFound';
 import { useDocumentTitle } from '@app/utils/useDocumentTitle';
 import { LastLocationProvider, useLastLocation } from 'react-router-last-location';
@@ -38,17 +40,25 @@ const Support = (routeProps: RouteComponentProps): React.ReactElement => {
 };
 
 export interface IAppRoute {
-  label?: string;
+  label?: string; // Excluding the label will exclude the route from the nav sidebar in AppLayout
   /* eslint-disable @typescript-eslint/no-explicit-any */
   component: React.ComponentType<RouteComponentProps<any>> | React.ComponentType<any>;
   /* eslint-enable @typescript-eslint/no-explicit-any */
   exact?: boolean;
   path: string;
   title: string;
   isAsync?: boolean;
+  routes?: undefined;
 }
 
-const routes: IAppRoute[] = [
+export interface IAppRouteGroup {
+  label: string;
+  routes: IAppRoute[];
+}
+
+export type AppRouteConfig = IAppRoute | IAppRouteGroup;
+
+const routes: AppRouteConfig[] = [
   {
     component: Dashboard,
     exact: true,
@@ -64,6 +74,25 @@ const routes: IAppRoute[] = [
     path: '/support',
     title: 'PatternFly Seed | Support Page',
   },
+  {
+    label: 'Settings',
+    routes: [
+      {
+        component: GeneralSettings,
+        exact: true,
+        label: 'General',
+        path: '/settings/general',
+        title: 'PatternFly Seed | General Settings',
+      },
+      {
+        component: ProfileSettings,
+        exact: true,
+        label: 'Profile',
+        path: '/settings/profile',
+        title: 'PatternFly Seed | Profile Settings',
+      },
+    ],
+  },
 ];
 
 // a custom hook for sending focus to the primary content container
@@ -97,10 +126,15 @@ const PageNotFound = ({ title }: { title: string }) => {
   return <Route component={NotFound} />;
 };
 
+const flattenedRoutes: IAppRoute[] = routes.reduce(
+  (flattened, route) => [...flattened, ...(route.routes ? route.routes : [route])],
+  [] as IAppRoute[]
+);
+
 const AppRoutes = (): React.ReactElement => (
   <LastLocationProvider>
     <Switch>
-      {routes.map(({ path, exact, component, title, isAsync }, idx) => (
+      {flattenedRoutes.map(({ path, exact, component, title, isAsync }, idx) => (
         <RouteWithTitleUpdates
           path={path}
           exact={exact}