mirror of
https://github.com/alexhopeoconnor/frigate.git
synced 2026-10-15 16:01:20 +10:00
64988c9be0
* Break out live page * Improving layouts and add chip component * Improve default camera player sizing * Improve live updating * Cleanup and fit figma * Use fixed height * Masonry layout * Fix stuff * Don't force heights * Adjust scaling * Cleanup * remove sidebar (#9731) * remove sidebar * keep sidebar on mobile for now and add icons * Fix revalidation * Cleanup * Cleanup width * Add chips for activity on cameras * Remove dashboard from header * Use Inter font (#9735) * Show still image when no activity is occurring * remove unused search params * add playing check for webrtc * Don't use grid at all for single column * Fix height on mobile * a few style updates to better match figma (#9745) * Remove active objects when they become stationary * Move to sidebar only and make settings separate component * Fix layout * Animate visibility of chips * Sidebar is full screen * Fix tall aspect ratio cameras * Fix complicated aspect logic * remove * Adjust thumbnail aspect and add text * margin on single column layout * Smaller event thumb text * Simplify basic image view * Only show the red dot when camera is recording * Improve typing for camera toggles * animate chips with react-transition-group (#9763) * don't flash when going to still image * revalidate * tooltips and active tracking outline (#9766) * tooltips * fix tooltip provider and add active tracking outline * remove unused icon * remove figma comment * Get live mode working for jsmpeg * add small gradient below timeago on event thumbnails (#9767) * Create live mode hook and make sure jsmpeg can be used * Enforce env var * Use print * Remove unstable * Add tooltips to thumbnails * Put back vite * Format * Update web/src/components/player/JSMpegPlayer.tsx --------- Co-authored-by: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com> Co-authored-by: Blake Blackshear <blake@frigate.video>
66 lines
1.9 KiB
TypeScript
66 lines
1.9 KiB
TypeScript
import { Link } from "react-router-dom";
|
|
import Logo from "@/components/Logo";
|
|
import { LuMenu } from "react-icons/lu";
|
|
import { Button } from "@/components/ui/button";
|
|
import { ENV } from "@/env";
|
|
import { NavLink } from "react-router-dom";
|
|
import { navbarLinks } from "@/pages/site-navigation";
|
|
import SettingsNavItems from "./settings/SettingsNavItems";
|
|
|
|
type HeaderProps = {
|
|
onToggleNavbar: () => void;
|
|
};
|
|
|
|
function HeaderNavigation() {
|
|
return (
|
|
<div className="hidden md:flex">
|
|
{navbarLinks.map((item) => {
|
|
let shouldRender = item.dev ? ENV !== "production" : true;
|
|
return (
|
|
shouldRender && (
|
|
<NavLink
|
|
key={item.id}
|
|
to={item.url}
|
|
className={({ isActive }) =>
|
|
`my-2 py-3 px-4 text-muted-foreground flex flex-row items-center text-center rounded-lg gap-2 hover:bg-border ${
|
|
isActive ? "font-bold bg-popover text-popover-foreground" : ""
|
|
}`
|
|
}
|
|
>
|
|
<div className="text-sm">{item.title}</div>
|
|
</NavLink>
|
|
)
|
|
);
|
|
})}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function Header({ onToggleNavbar }: HeaderProps) {
|
|
return (
|
|
<div className="flex gap-10 lg:gap-20 justify-between pt-2 mb-2 border-b-[1px] px-4 items-center md:hidden">
|
|
<div className="flex gap-4 items-center flex-shrink-0 m-1">
|
|
<Button
|
|
variant="ghost"
|
|
size="icon"
|
|
className="md:hidden"
|
|
onClick={onToggleNavbar}
|
|
>
|
|
<LuMenu />
|
|
</Button>
|
|
<Link to="/">
|
|
<div className="flex flex-row items-center">
|
|
<div className="w-10 mr-5">
|
|
<Logo />
|
|
</div>
|
|
</div>
|
|
</Link>
|
|
<HeaderNavigation />
|
|
</div>
|
|
<SettingsNavItems className="flex flex-shrink-0 md:gap-2" />
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default Header;
|