Use cn() for class names throughout (#11278)

* add scrollbar on ptz presets dropdown

* use cn function for class names throughout

* Revert "add scrollbar on ptz presets dropdown"

This reverts commit 2cee93dc3e.

web/src/components/navigation/Bottombar.tsx

@@ -14,6 +14,7 @@ import {
   StatusMessage,
 } from "@/context/statusbar-provider";
 import { Link } from "react-router-dom";
+import { cn } from "@/lib/utils";
 
 function Bottombar() {
   const navItems = useNavigation("secondary");
@@ -75,7 +76,10 @@ function StatusAlertNav({ className }: StatusAlertNavProps) {
         <IoIosWarning className="size-5 text-danger" />
       </DrawerTrigger>
       <DrawerContent
-        className={`max-h-[75dvh] px-2 mx-1 rounded-t-2xl overflow-hidden ${className ?? ""}`}
+        className={cn(
+          "max-h-[75dvh] px-2 mx-1 rounded-t-2xl overflow-hidden",
+          className,
+        )}
       >
         <div className="w-full h-auto py-4 overflow-y-auto overflow-x-hidden flex flex-col items-center gap-2">
           {Object.entries(messages).map(([key, messageArray]) => (

web/src/components/navigation/NavItem.tsx

@@ -8,6 +8,7 @@ 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";
 
 const variants = {
   primary: {
@@ -42,9 +43,11 @@ export default function NavItem({
       to={item.url}
       onClick={onClick}
       className={({ isActive }) =>
-        `flex flex-col justify-center items-center rounded-lg ${className ?? ""} ${
-          variants[item.variant ?? "primary"][isActive ? "active" : "inactive"]
-        }`
+        cn(
+          "flex flex-col justify-center items-center rounded-lg",
+          className,
+          variants[item.variant ?? "primary"][isActive ? "active" : "inactive"],
+        )
       }
     >
       <Icon className="size-5 md:m-[6px]" />