mirror of
https://github.com/blakeblackshear/frigate.git
synced 2026-06-26 06:11:54 +03:00
b751025339
Some checks are pending
CI / Synaptics Build (push) Blocked by required conditions
CI / AMD64 Extra Build (push) Blocked by required conditions
CI / ARM Extra Build (push) Blocked by required conditions
CI / AMD64 Build (push) Waiting to run
CI / ARM Build (push) Waiting to run
CI / Jetson Jetpack 6 (push) Waiting to run
CI / Assemble and push default build (push) Blocked by required conditions
* increase camera group icon size on mobile add an animated slider when there is not enough space for all defined camera groups * change desktop and mobile edit camera groups icon to pencil and add desktop tooltip * apply safe area insets to mobile layout in PWA mode using viewport-fit=cover * adaptively size bottom bar nav targets to 48px when they fit, else compact icon size now targets the standardized 48×48px mobile touch target (Material Design 3 / Android 48dp bottom-nav minimum)
77 lines
1.7 KiB
TypeScript
77 lines
1.7 KiB
TypeScript
import { NavLink } from "react-router-dom";
|
|
import {
|
|
Tooltip,
|
|
TooltipContent,
|
|
TooltipTrigger,
|
|
} from "@/components/ui/tooltip";
|
|
import { isDesktop } from "react-device-detect";
|
|
import { TooltipPortal } from "@radix-ui/react-tooltip";
|
|
import { NavData } from "@/types/navigation";
|
|
import { IconType } from "react-icons";
|
|
import { cn } from "@/lib/utils";
|
|
import { useTranslation } from "react-i18next";
|
|
|
|
const variants = {
|
|
primary: {
|
|
active: "font-bold text-white bg-selected hover:bg-selected/80",
|
|
inactive: "text-secondary-foreground bg-secondary hover:bg-muted",
|
|
},
|
|
secondary: {
|
|
active: "font-bold text-selected",
|
|
inactive: "text-secondary-foreground",
|
|
},
|
|
};
|
|
|
|
type NavItemProps = {
|
|
className?: string;
|
|
item: NavData;
|
|
Icon: IconType;
|
|
onClick?: () => void;
|
|
large?: boolean;
|
|
};
|
|
|
|
export default function NavItem({
|
|
className,
|
|
item,
|
|
Icon,
|
|
onClick,
|
|
large,
|
|
}: NavItemProps) {
|
|
const { t } = useTranslation(["common"]);
|
|
if (item.enabled == false) {
|
|
return;
|
|
}
|
|
|
|
const content = (
|
|
<NavLink
|
|
to={item.url}
|
|
onClick={onClick}
|
|
className={({ isActive }) =>
|
|
cn(
|
|
"flex flex-col items-center justify-center rounded-lg p-[6px]",
|
|
className,
|
|
large && "size-12",
|
|
variants[item.variant ?? "primary"][isActive ? "active" : "inactive"],
|
|
)
|
|
}
|
|
>
|
|
<Icon className={large ? "size-6" : "size-5"} />
|
|
</NavLink>
|
|
);
|
|
|
|
if (isDesktop) {
|
|
return (
|
|
<Tooltip>
|
|
<TooltipTrigger>{content}</TooltipTrigger>
|
|
<TooltipPortal>
|
|
<TooltipContent side="right">
|
|
<p>{t(item.title)}</p>
|
|
</TooltipContent>
|
|
</TooltipPortal>
|
|
</Tooltip>
|
|
);
|
|
}
|
|
|
|
return content;
|
|
}
|