Refactor Navigation to use react-router-dom v6

Signed-off-by: Griffin-Sullivan <[email protected]>

clients/ui/frontend/package.json

@@ -63,7 +63,7 @@
     "prettier": "^3.3.3",
     "prop-types": "^15.8.1",
     "raw-loader": "^4.0.2",
-    "react-router-dom": "^5.3.4",
+    "react-router-dom": "^6.4.1",
     "regenerator-runtime": "^0.14.1",
     "rimraf": "^5.0.7",
     "serve": "^14.2.1",

clients/ui/frontend/src/app/App.tsx

@@ -0,0 +1,48 @@
+import * as React from 'react';
+import '@patternfly/react-core/dist/styles/base.css';
+import AppRoutes from '@app/AppRoutes';
+import '@app/app.css';
+import {
+  Flex,
+  Masthead,
+  MastheadContent,
+  MastheadToggle,
+  Page,
+  PageToggleButton,
+  Title
+} from '@patternfly/react-core';
+import NavSidebar from './NavSidebar';
+import { BarsIcon } from '@patternfly/react-icons';
+
+const App: React.FC = () => {
+  const masthead = (
+    <Masthead>
+      <MastheadToggle>
+        <PageToggleButton id="page-nav-toggle" variant="plain" aria-label="Dashboard navigation">
+          <BarsIcon />
+        </PageToggleButton>
+      </MastheadToggle>
+
+      <MastheadContent>
+        <Flex>
+          <Title headingLevel="h2" size="3xl">
+            Kubeflow Model Registry UI
+          </Title>
+        </Flex>
+      </MastheadContent>
+    </Masthead>
+  );
+
+  return (
+    <Page
+      mainContainerId='primary-app-container'
+      masthead={masthead}
+      isManagedSidebar
+      sidebar={<NavSidebar />}
+    >
+      <AppRoutes />
+    </Page>
+  );
+};
+
+export default App;