Only show frigate+ page when frigate+ is enabled

web/src/components/navigation/Bottombar.tsx

@@ -1,4 +1,3 @@
-import { navbarLinks } from "@/pages/site-navigation";
 import NavItem from "./NavItem";
 import { IoIosWarning } from "react-icons/io";
 import { Drawer, DrawerContent, DrawerTrigger } from "../ui/drawer";
@@ -9,20 +8,15 @@ import { useMemo } from "react";
 import useStats from "@/hooks/use-stats";
 import GeneralSettings from "../settings/GeneralSettings";
 import AccountSettings from "../settings/AccountSettings";
+import useNavigation from "@/hooks/use-navigation";
 
 function Bottombar() {
+ const navItems = useNavigation("secondary");
+
  return (
  <div className="absolute h-16 inset-x-4 bottom-0 flex flex-row items-center justify-between">
- {navbarLinks.map((item) => (
- <NavItem
- className=""
- variant="secondary"
- key={item.id}
- Icon={item.icon}
- title={item.title}
- url={item.url}
- dev={item.dev}
- />
+ {navItems.map((item) => (
+ <NavItem key={item.id} item={item} Icon={item.icon} />
  ))}
  <GeneralSettings />
  <AccountSettings />

web/src/components/navigation/NavItem.tsx

@@ -1,13 +1,13 @@
-import { IconType } from "react-icons";
 import { NavLink } from "react-router-dom";
-import { ENV } from "@/env";
 import {
  Tooltip,
  TooltipContent,
  TooltipTrigger,
 } from "@/components/ui/tooltip";
 import { isDesktop } from "react-device-detect";
 import { TooltipPortal } from "@radix-ui/react-tooltip";
+import { NavData } from "@/types/navigation";
+import { IconType } from "react-icons";
 
 const variants = {
  primary: {
@@ -21,37 +21,29 @@ const variants = {
 };
 
 type NavItemProps = {
- className: string;
- variant?: "primary" | "secondary";
+ className?: string;
+ item: NavData;
  Icon: IconType;
- title: string;
- url: string;
- dev?: boolean;
  onClick?: () => void;
 };
 
 export default function NavItem({
  className,
- variant = "primary",
+ item,
  Icon,
- title,
- url,
- dev,
  onClick,
 }: NavItemProps) {
- const shouldRender = dev ? ENV !== "production" : true;
-
- if (!shouldRender) {
+ if (item.enabled == false) {
  return;
  }
 
  const content = (
  <NavLink
- to={url}
+ to={item.url}
  onClick={onClick}
  className={({ isActive }) =>
- `${className} flex flex-col justify-center items-center rounded-lg ${
- variants[variant][isActive ? "active" : "inactive"]
+ `flex flex-col justify-center items-center rounded-lg ${className ?? ""} ${
+ variants[item.variant ?? "primary"][isActive ? "active" : "inactive"]
  }`
  }
  >
@@ -65,7 +57,7 @@ export default function NavItem({
  <TooltipTrigger>{content}</TooltipTrigger>
  <TooltipPortal>
  <TooltipContent side="right">
- <p>{title}</p>
+ <p>{item.title}</p>
  </TooltipContent>
  </TooltipPortal>
  </Tooltip>

web/src/components/navigation/Sidebar.tsx

@@ -1,14 +1,16 @@
 import Logo from "../Logo";
-import { navbarLinks } from "@/pages/site-navigation";
 import NavItem from "./NavItem";
 import { CameraGroupSelector } from "../filter/CameraGroupSelector";
 import { useLocation } from "react-router-dom";
 import GeneralSettings from "../settings/GeneralSettings";
 import AccountSettings from "../settings/AccountSettings";
+import useNavigation from "@/hooks/use-navigation";
 
 function Sidebar() {
  const location = useLocation();
 
+ const navbarLinks = useNavigation();
+
  return (
  <aside className="absolute w-[52px] z-10 left-o inset-y-0 overflow-y-auto scrollbar-hidden py-4 flex flex-col justify-between bg-background_alt border-r border-secondary-highlight">
  <span tabIndex={0} className="sr-only" />
@@ -22,10 +24,8 @@ function Sidebar() {
  <div key={item.id}>
  <NavItem
  className={`mx-[10px] ${showCameraGroups ? "mb-2" : "mb-4"}`}
+ item={item}
  Icon={item.icon}
- title={item.title}
- url={item.url}
- dev={item.dev}
  />
  {showCameraGroups && <CameraGroupSelector className="mb-4" />}
  </div>

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],
+ );
+}

web/src/types/navigation.ts

@@ -0,0 +1,10 @@
+import { IconType } from "react-icons";
+
+export type NavData = {
+ id: number;
+ variant?: "primary" | "secondary";
+ icon: IconType;
+ title: string;
+ url: string;
+ enabled?: boolean;
+};