Refactored side-menu code

src/main/frontend/components/administration/ProfileManagement.tsx

@@ -86,7 +86,7 @@ export default function ProfileManagement() {
                                     />
                                 }
                                 <Button
-                                    className="button-secondary"
+                                    color="primary"
                                     isLoading={formik.isSubmitting}
                                     disabled={formik.isSubmitting || configSaved}
                                     type="submit"

src/main/frontend/components/administration/SsoManagement.tsx

@@ -0,0 +1,15 @@
+import React from "react";
+import withConfigPage from "Frontend/components/administration/withConfigPage";
+import * as Yup from 'yup';
+
+function SsoMangementLayout({getConfig, formik}: any) {
+    return (
+        <div className="flex flex-col">
+
+        </div>
+    );
+}
+
+const validationSchema = Yup.object({});
+
+export const SsoManagement = withConfigPage(SsoMangementLayout, "Single Sign-On", "sso", validationSchema);

src/main/frontend/components/administration/withConfigPage.tsx

@@ -134,7 +134,7 @@ export default function withConfigPage(WrappedComponent: React.ComponentType<any
                             <h1 className="text-2xl font-bold">{title}</h1>
 
                             <Button
-                                className="button-secondary"
+                                color="primary"
                                 isLoading={formik.isSubmitting}
                                 disabled={formik.isSubmitting || configSaved}
                                 type="submit"

src/main/frontend/components/general/withSideMenu.tsx

@@ -0,0 +1,60 @@
+import {Outlet} from "react-router-dom";
+import {Icon} from "@phosphor-icons/react";
+import {Listbox, ListboxItem} from "@nextui-org/react";
+import {ReactElement, useState} from "react";
+
+export type MenuItem = {
+    title: string,
+    url: string,
+    icon: ReactElement<Icon>
+}
+
+export default function withSideMenu(menuItems: MenuItem[]) {
+    return function PageWithSideMenu() {
+        const [selectedItem, setSelectedItem] = useState<string>(initialSelected)
+
+        /**
+         * Remove a "/" at the start if it exists
+         */
+        function key(k: string): string {
+            return k.replace(/^(\/)/, "")
+        }
+
+        /**
+         * If the key starts with "/" assume it's an absolute link, else assume it's relative
+         */
+        function link(l: string): string {
+            if (l.startsWith("/")) return l;
+            const p = window.location.pathname
+            return p.substring(0, p.lastIndexOf("/") + 1) + l;
+        }
+
+        /**
+         * Match the initially selected item by current URL path
+         */
+        function initialSelected(): string {
+            const p = window.location.pathname
+            return p.substring(p.lastIndexOf("/") + 1, p.length);
+        }
+
+        return (
+            <div className="flex flex-row">
+                <div className="flex flex-col pr-8">
+                    <Listbox className="min-w-60"
+                             color="primary">
+                        {menuItems.map((i) => (
+                            <ListboxItem key={key(i.url)} startContent={i.icon} href={link(i.url)}
+                                         onPress={() => setSelectedItem(i.url)}
+                                         className={`h-12 ${key(i.url) === selectedItem ? "bg-primary" : ""}`}>
+                                <p>{i.title}</p>
+                            </ListboxItem>
+                        ))}
+                    </Listbox>
+                </div>
+                <div className="flex flex-col flex-grow">
+                    <Outlet/>
+                </div>
+            </div>
+        );
+    }
+}