Mirrors/blakeblackshear.frigate
1
0
Fork 0
mirror of https://github.com/blakeblackshear/frigate.git synced 2025-10-27 10:52:11 +01:00
Code Issues Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Josh Hawkins 2024-07-10 10:28:05 -05:00 committed by GitHub
parent baf209f257
commit 0d7ee7a87a
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 13 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
web/src/App.tsx
View File

@ -41,7 +41,7 @@ function App() {
> >
<Suspense> <Suspense>
<Routes> <Routes>
<Route path="/" element={<Live />} /> <Route index element={<Live />} />
<Route path="/events" element={<Redirect to="/review" />} /> <Route path="/events" element={<Redirect to="/review" />} />
<Route path="/review" element={<Events />} /> <Route path="/review" element={<Events />} />
<Route path="/export" element={<Exports />} /> <Route path="/export" element={<Exports />} />

13
web/src/components/navigation/Sidebar.tsx
View File

@ -1,7 +1,7 @@
import Logo from "../Logo"; import Logo from "../Logo";
import NavItem from "./NavItem"; import NavItem from "./NavItem";
import { CameraGroupSelector } from "../filter/CameraGroupSelector"; import { CameraGroupSelector } from "../filter/CameraGroupSelector";
import { useLocation } from "react-router-dom"; import { Link, useMatch } from "react-router-dom";
import GeneralSettings from "../menu/GeneralSettings"; import GeneralSettings from "../menu/GeneralSettings";
import AccountSettings from "../menu/AccountSettings"; import AccountSettings from "../menu/AccountSettings";
import useNavigation from "@/hooks/use-navigation"; import useNavigation from "@/hooks/use-navigation";
@ -9,20 +9,23 @@ import { baseUrl } from "@/api/baseUrl";
import { useMemo } from "react"; import { useMemo } from "react";
function Sidebar() { function Sidebar() {
const location = useLocation();
const basePath = useMemo(() => new URL(baseUrl).pathname, []); const basePath = useMemo(() => new URL(baseUrl).pathname, []);
const isRootMatch = useMatch("/");
const isBasePathMatch = useMatch(basePath);
const navbarLinks = useNavigation(); const navbarLinks = useNavigation();
return ( 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"> <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" /> <span tabIndex={0} className="sr-only" />
<div className="flex w-full flex-col items-center gap-0"> <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) => { {navbarLinks.map((item) => {
const showCameraGroups = const showCameraGroups =
item.id == 1 && (isRootMatch || isBasePathMatch) && item.id === 1;
(location.pathname === "/" || location.pathname === basePath);
return ( return (
<div key={item.id}> <div key={item.id}>

4
web/src/index.css
View File

@ -27,6 +27,10 @@
} }
} }
html {
overscroll-behavior: none;
}
/* Hide scrollbar for Chrome, Safari and Opera */ /* Hide scrollbar for Chrome, Safari and Opera */
.no-scrollbar::-webkit-scrollbar { .no-scrollbar::-webkit-scrollbar {
display: none; display: none;