chore: Upgrade to bifrost 4

Author: jonas89

react/package.json

@@ -15,12 +15,13 @@
   "dependencies": {
     "@azure/msal-browser": "^3.3.0",
     "@azure/msal-react": "^2.0.5",
-    "@intility/bifrost-react": "^3.12.0",
+    "@intility/bifrost-react": "^4.3.0",
     "@sentry/react": "^7.75.0",
     "@sentry/tracing": "^7.75.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-router-dom": "^6.17.0"
+    "react-router-dom": "^6.17.0",
+    "use-local-storage-state": "^19.2.0"
   },
   "devDependencies": {
     "@intility/helm-version": "^1.3.1",

react/src/components/Navigation.tsx

@@ -1,25 +1,27 @@
 import { Nav } from "@intility/bifrost-react";
-import { NavLink, useNavigate } from "react-router-dom";
+import { NavLink } from "react-router-dom";
 import {
   faHome,
   faInfoCircle,
   faUser,
 } from "@fortawesome/free-solid-svg-icons";
+import { ThemePicker } from "./ThemePicker";
+import reactLogo from "~/assets/react.svg";
 
 export default function Navigation({ children }: React.PropsWithChildren) {
-  const navigate = useNavigate();
   return (
     <Nav
-      appName="App Name"
-      logoOnClick={(e) => {
-        e.preventDefault();
-        navigate("/");
-      }}
+      logo={
+        <NavLink to="/" className="bf-neutral-link">
+          <Nav.Logo logo={reactLogo}>App Name</Nav.Logo>
+        </NavLink>
+      }
       top={
         <>
           <NavLink to="/profile">
             <Nav.Item icon={faUser}>Profile</Nav.Item>
           </NavLink>
+          <ThemePicker />
         </>
       }
       side={

react/src/components/ThemePicker.tsx

@@ -0,0 +1,42 @@
+import { Checkbox, Nav, Theme, useApplyTheme } from "@intility/bifrost-react";
+import { faCircleHalfStroke } from "@fortawesome/free-solid-svg-icons";
+import useLocalStorageState from "use-local-storage-state";
+
+export function ThemePicker() {
+  // persist theme state in local storage.
+  // you might want to use a cookie or a database instead?
+  const [theme, setTheme] = useLocalStorageState<Theme>("bfTheme", {
+    defaultValue: "system",
+  });
+  // keep document theme in sync with state
+  useApplyTheme(theme);
+
+  return (
+    <Nav.Group icon={faCircleHalfStroke} aria-label="Theme picker">
+      <section>
+        <Nav.Header>Color theme</Nav.Header>
+        <Checkbox
+          type="radio"
+          label="Dark"
+          name="color-theme"
+          checked={theme === "dark"}
+          onChange={() => setTheme("dark")}
+        />
+        <Checkbox
+          type="radio"
+          label="Light"
+          name="color-theme"
+          checked={theme === "light"}
+          onChange={() => setTheme("light")}
+        />
+        <Checkbox
+          type="radio"
+          label="System"
+          name="color-theme"
+          checked={theme === "system"}
+          onChange={() => setTheme("system")}
+        />
+      </section>
+    </Nav.Group>
+  );
+}