Fix tooltips and group selection

web/src/components/navigation/NavItem.tsx

@@ -6,10 +6,9 @@ import {
   TooltipContent,
   TooltipTrigger,
 } from "@/components/ui/tooltip";
-import { useCallback, useState } from "react";
+import { useState } from "react";
 import { isDesktop } from "react-device-detect";
 import { TooltipPortal } from "@radix-ui/react-tooltip";
-import { CameraGroupSelector } from "../filter/CameraGroupSelector";
 
 const variants = {
   primary: {
@@ -43,58 +42,36 @@ export default function NavItem({
 }: NavItemProps) {
   const shouldRender = dev ? ENV !== "production" : true;
 
-  const [showTooltip, setShowTooltip] = useState(false);
-  const [timeoutId, setTimeoutId] = useState<NodeJS.Timeout>();
-  const showTooltipTimer = useCallback(
-    (showTooltip: boolean) => {
-      if (!showTooltip) {
-        setShowTooltip(showTooltip);
+  if (!shouldRender) {
+    return;
+  }
 
-        if (timeoutId) {
-          clearTimeout(timeoutId);
-        }
-      } else {
-        setTimeoutId(setTimeout(() => setShowTooltip(showTooltip), 500));
+  const content = (
+    <NavLink
+      to={url}
+      onClick={onClick}
+      className={({ isActive }) =>
+        `${className} flex flex-col justify-center items-center rounded-lg ${
+          variants[variant][isActive ? "active" : "inactive"]
+        }`
       }
-    },
-    [timeoutId],
+    >
+      <Icon className="size-5 md:m-[6px]" />
+    </NavLink>
   );
 
-  return (
-    shouldRender && (
-      <Tooltip open={isDesktop && showTooltip}>
-        <NavLink
-          to={url}
-          onClick={onClick}
-          className={`${className} flex flex-col justify-center items-center rounded-lg`}
-        >
-          {({ isActive }) => (
-            <>
-              <TooltipTrigger
-                className={`rounded-lg ${variants[variant][isActive ? "active" : "inactive"]}`}
-              >
-                <Icon
-                  className="size-5 md:m-[6px]"
-                  onMouseEnter={() =>
-                    isDesktop ? showTooltipTimer(true) : null
-                  }
-                  onMouseLeave={() =>
-                    isDesktop ? showTooltipTimer(false) : null
-                  }
-                />
-              </TooltipTrigger>
-              {isDesktop && title == "Live" && isActive && (
-                <CameraGroupSelector className="mt-2" />
-              )}
-            </>
-          )}
-        </NavLink>
+  if (isDesktop) {
+    return (
+      <Tooltip>
+        <TooltipTrigger>{content}</TooltipTrigger>
         <TooltipPortal>
           <TooltipContent side="right">
             <p>{title}</p>
           </TooltipContent>
         </TooltipPortal>
       </Tooltip>
-    )
-  );
+    );
+  }
+
+  return content;
 }

web/src/components/navigation/Sidebar.tsx

@@ -2,22 +2,30 @@ import Logo from "../Logo";
 import { navbarLinks } from "@/pages/site-navigation";
 import SettingsNavItems from "../settings/SettingsNavItems";
 import NavItem from "./NavItem";
+import { CameraGroupSelector } from "../filter/CameraGroupSelector";
+import { useLocation } from "react-router-dom";
 
 function Sidebar() {
+  const location = useLocation();
+
   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-primary border-r border-secondary-highlight">
       <span tabIndex={0} className="sr-only" />
       <div className="w-full flex flex-col gap-0 items-center">
         <Logo className="w-8 h-8 mb-6" />
         {navbarLinks.map((item) => (
-          <NavItem
-            className="mx-[10px] mb-4"
-            key={item.id}
-            Icon={item.icon}
-            title={item.title}
-            url={item.url}
-            dev={item.dev}
-          />
+          <div key={item.id}>
+            <NavItem
+              className={`mx-[10px] ${item.id == 1 ? "mb-2" : "mb-4"}`}
+              Icon={item.icon}
+              title={item.title}
+              url={item.url}
+              dev={item.dev}
+            />
+            {item.id == 1 && item.url == location.pathname && (
+              <CameraGroupSelector className="mb-4" />
+            )}
+          </div>
         ))}
       </div>
       <SettingsNavItems className="hidden md:flex flex-col items-center mb-8" />