UI tweaks (#10946)

* fix warning

* Improve event switching speed

* Fix icon colors

* Only show frigate+ page when frigate+ is enabled

* Add link from reecordings to live as well

web/src/hooks/use-navigation.ts

@@ -0,0 +1,59 @@
+import Logo from "@/components/Logo";
+import { ENV } from "@/env";
+import { FrigateConfig } from "@/types/frigateConfig";
+import { NavData } from "@/types/navigation";
+import { useMemo } from "react";
+import { FaCompactDisc, FaVideo } from "react-icons/fa";
+import { LuConstruction } from "react-icons/lu";
+import { MdVideoLibrary } from "react-icons/md";
+import useSWR from "swr";
+
+export default function useNavigation(
+  variant: "primary" | "secondary" = "primary",
+) {
+  const { data: config } = useSWR<FrigateConfig>("config");
+
+  return useMemo(
+    () =>
+      [
+        {
+          id: 1,
+          variant,
+          icon: FaVideo,
+          title: "Live",
+          url: "/",
+        },
+        {
+          id: 2,
+          variant,
+          icon: MdVideoLibrary,
+          title: "Review",
+          url: "/review",
+        },
+        {
+          id: 3,
+          variant,
+          icon: FaCompactDisc,
+          title: "Export",
+          url: "/export",
+        },
+        {
+          id: 5,
+          variant,
+          icon: Logo,
+          title: "Frigate+",
+          url: "/plus",
+          enabled: config?.plus?.enabled == true,
+        },
+        {
+          id: 4,
+          variant,
+          icon: LuConstruction,
+          title: "UI Playground",
+          url: "/playground",
+          enabled: ENV !== "production",
+        },
+      ] as NavData[],
+    [config?.plus.enabled, variant],
+  );
+}