Added pages to side bar

Also added external redirects. This is kinda really buggy so probably need to fix this but we will see...

Signed-off-by: Zoe Nickson <mnickson@sidingsmedia.com>

Author: Computroniks

src/App.tsx

@@ -2,37 +2,56 @@
 // SPDX-License-Identifier: MIT
 
 import * as React from "react";
+import DnsIcon from "@mui/icons-material/Dns";
+import CachedIcon from "@mui/icons-material/Cached";
 import DashboardIcon from "@mui/icons-material/Dashboard";
-import PersonIcon from "@mui/icons-material/Person";
 import { Outlet } from "react-router";
 import { ReactRouterAppProvider } from "@toolpad/core/react-router";
 import type { Navigation } from "@toolpad/core/AppProvider";
+import OpenInNewIcon from "@mui/icons-material/OpenInNew";
 
-const NAVIGATION: Navigation = [
+let navigation: Navigation = [
   {
-    kind: "header",
-    title: "Main items",
-  },
-  {
-    title: "Dashboard",
+    segment: "",
+    title: "Overview",
     icon: <DashboardIcon />,
   },
+  { kind: "divider" },
+  { kind: "header", title: "Systems" },
   {
-    segment: "employees",
-    title: "Employees",
-    icon: <PersonIcon />,
-    pattern: "employees{/:employeeId}*",
+    segment: "rdns",
+    title: "Recursive DNS",
+    icon: <DnsIcon />,
+    children: [
+      {
+        segment: "rdns/cache",
+        title: "Cache",
+        icon: <CachedIcon />,
+      },
+    ],
   },
+  { kind: "divider" },
+  { kind: "header", title: "External" },
 ];
 
+for (const link of JSON.parse(import.meta.env.VITE_EXTERNAL_SIDEBAR_LINKS)) {
+  navigation.push({
+    title: link.title,
+    icon: <OpenInNewIcon />,
+    segment: `external/${encodeURIComponent(link.href)}`,
+  });
+}
+
 const BRANDING = {
   title: "Unified Control",
-  logo: <img alt="MUI logo" height={40} src="/logo.svg" width={40} />,
+  logo: (
+    <img alt="Unified Control Logo" height={40} src="/logo.svg" width={40} />
+  ),
 };
 
 export default function App() {
   return (
-    <ReactRouterAppProvider navigation={NAVIGATION} branding={BRANDING}>
+    <ReactRouterAppProvider navigation={navigation} branding={BRANDING}>
       <Outlet />
     </ReactRouterAppProvider>
   );

src/main.tsx

@@ -3,19 +3,29 @@
 
 import * as React from "react";
 import * as ReactDOM from "react-dom/client";
-import { createBrowserRouter, RouterProvider } from "react-router";
+import {
+  createBrowserRouter,
+  Link,
+  RouterProvider,
+  useNavigate,
+} from "react-router";
 import App from "./App";
 import Layout from "./layouts/dashboard";
 import DashboardPage from "./pages";
 import EmployeesCrudPage from "./pages/employees";
+import ExternalRedirectPage from "./pages/external_redirect";
+import NotFoundPage from "./pages/not_found";
 
 const router = createBrowserRouter([
   {
     Component: App,
+    // errorElement: ErrorPage(),
+    // ErrorBoundary: ErrorPage,
     children: [
       {
         path: "/",
         Component: Layout,
+        // ErrorBoundary: ErrorPage,
         children: [
           {
             path: "",
@@ -25,6 +35,14 @@ const router = createBrowserRouter([
             path: "employees/:employeeId?/*",
             Component: EmployeesCrudPage,
           },
+          {
+            path: "external/:redirectLink?",
+            Component: ExternalRedirectPage,
+          },
+          {
+            path: "*",
+            Component: NotFoundPage,
+          },
         ],
       },
     ],

src/pages/external_redirect.tsx

@@ -0,0 +1,42 @@
+// SPDX-FileCopyrightText: 2025 Sidings Media <contact@sidingsmedia.com>
+// SPDX-License-Identifier: MIT
+
+import * as React from "react";
+import { useNavigate, useParams } from "react-router";
+import { PageContainer } from "@toolpad/core/PageContainer";
+
+export default function ExternalRedirectPage() {
+  const { redirectLink } = useParams();
+  const navigate = useNavigate();
+
+  const [message, setMessage] = React.useState<React.JSX.Element>();
+
+  const links = JSON.parse(import.meta.env.VITE_EXTERNAL_SIDEBAR_LINKS) as {
+    title: string;
+    href: string;
+  }[];
+
+  React.useEffect(() => {
+    let href = decodeURIComponent(redirectLink ?? "");
+    if (links.filter(({ href }) => href === href).length != 0) {
+      // URL is valid
+      window.open(href, "_blank");
+      setMessage(
+        <p>
+          Redirecting to{" "}
+          <a href={href} target="_blank" rel="noreferrer">
+            {href}
+          </a>
+          {". "}
+          If you are not automatically redirected in a moment, please click the
+          link.
+        </p>,
+      );
+      console.log(location.href);
+    } else {
+      setMessage(<p>The redirect link is not valid.</p>);
+    }
+  }, [redirectLink]);
+
+  return <PageContainer>{message}</PageContainer>;
+}

src/pages/index.tsx

@@ -8,7 +8,9 @@ import { PageContainer } from "@toolpad/core/PageContainer";
 export default function HomePage() {
   return (
     <PageContainer>
-      <Typography>Welcome to Toolpad Core!</Typography>
+      <Typography>
+        Welcome to Unified Control! Use the sidebar to perform operations.
+      </Typography>
     </PageContainer>
   );
 }

src/pages/not_found.tsx

@@ -0,0 +1,14 @@
+// SPDX-FileCopyrightText: 2025 Sidings Media <contact@sidingsmedia.com>
+// SPDX-License-Identifier: MIT
+
+import * as React from "react";
+import Typography from "@mui/material/Typography";
+import { PageContainer } from "@toolpad/core/PageContainer";
+
+export default function NotFoundPage() {
+  return (
+    <PageContainer title="Not Found">
+      <Typography>Sorry, this page doesn't seem to exist...</Typography>
+    </PageContainer>
+  );
+}