administrator/frigate
1
0
Fork 0
mirror of https://github.com/blakeblackshear/frigate.git synced 2026-02-12 22:25:24 +03:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

Clickable logo on desktop sidebar and useMatch for camera group visibility

Browse Source
This commit is contained in:
Josh Hawkins 2024-07-10 10:16:26 -05:00
parent d2f88491b1
commit 391c9f90f4
3 changed files with 14 additions and 7 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>
<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 />} />

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

@ -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">
<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}>

6
web/src/index.css
View File

@ -26,10 +26,14 @@
@layer utilities {
.scrollbar-container {
@apply scrollbar-thumb-rounded-full scrollbar-track-rounded-full scrollbar-thin scrollbar-thumb-border scrollbar-track-background_alt;
@apply scrollbar-thin scrollbar-track-background_alt scrollbar-thumb-border scrollbar-track-rounded-full scrollbar-thumb-rounded-full;
}
}
html {
overscroll-behavior: none;
}
/* Hide scrollbar for Chrome, Safari and Opera */
.no-scrollbar::-webkit-scrollbar {
display: none;