From 0d7ee7a87acbc01a9beea39cbedc33a9013470f7 Mon Sep 17 00:00:00 2001
From: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>
Date: Wed, 10 Jul 2024 10:28:05 -0500
Subject: [PATCH] Clickable logo on desktop sidebar and useMatch for camera
 group visibility (#12379)

---
 web/src/App.tsx                           |  2 +-
 web/src/components/navigation/Sidebar.tsx | 13 ++++++++-----
 web/src/index.css                         |  4 ++++
 3 files changed, 13 insertions(+), 6 deletions(-)

diff --git a/web/src/App.tsx b/web/src/App.tsx
index 60488cb56..93e980f2c 100644
--- a/web/src/App.tsx
+++ b/web/src/App.tsx
@@ -41,7 +41,7 @@ function App() {
             >
               <Suspense>
                 <Routes>
-                  <Route path="/" element={<Live />} />
+                  <Route index element={<Live />} />
                   <Route path="/events" element={<Redirect to="/review" />} />
                   <Route path="/review" element={<Events />} />
                   <Route path="/export" element={<Exports />} />
diff --git a/web/src/components/navigation/Sidebar.tsx b/web/src/components/navigation/Sidebar.tsx
index 27ea9805c..af9a3bc5c 100644
--- a/web/src/components/navigation/Sidebar.tsx
+++ b/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}>
diff --git a/web/src/index.css b/web/src/index.css
index 32437ca81..5c78fe925 100644
--- a/web/src/index.css
+++ b/web/src/index.css
@@ -27,6 +27,10 @@
   }
 }
 
+html {
+  overscroll-behavior: none;
+}
+
 /* Hide scrollbar for Chrome, Safari and Opera */
 .no-scrollbar::-webkit-scrollbar {
   display: none;