Clickable logo on desktop sidebar and useMatch for camera group visibility (#12379)

web/src/components/navigation/Sidebar.tsx

@@ -1,7 +1,7 @@
 import Logo from "../Logo";
 import NavItem from "./NavItem";
 import { CameraGroupSelector } from "../filter/CameraGroupSelector";
-import { useLocation } from "react-router-dom";
+import { Link, useMatch } from "react-router-dom";
 import GeneralSettings from "../menu/GeneralSettings";
 import AccountSettings from "../menu/AccountSettings";
 import useNavigation from "@/hooks/use-navigation";
@@ -9,20 +9,23 @@ import { baseUrl } from "@/api/baseUrl";
 import { useMemo } from "react";
 
 function Sidebar() {
-  const location = useLocation();
   const basePath = useMemo(() => new URL(baseUrl).pathname, []);
 
+  const isRootMatch = useMatch("/");
+  const isBasePathMatch = useMatch(basePath);
+
   const navbarLinks = useNavigation();
 
   return (
     <aside className="scrollbar-container scrollbar-hidden absolute inset-y-0 left-0 z-10 flex w-[52px] flex-col justify-between overflow-y-auto border-r border-secondary-highlight bg-background_alt py-4">
       <span tabIndex={0} className="sr-only" />
       <div className="flex w-full flex-col items-center gap-0">
-        <Logo className="mb-6 h-8 w-8" />
+        <Link to="/">
+          <Logo className="mb-6 h-8 w-8" />
+        </Link>
         {navbarLinks.map((item) => {
           const showCameraGroups =
-            item.id == 1 &&
-            (location.pathname === "/" || location.pathname === basePath);
+            (isRootMatch || isBasePathMatch) && item.id === 1;
 
           return (
             <div key={item.id}>