@oneuptime/common 7.0.4699 → 7.0.4717

package/Server/Services/StatusPageService.ts

@@ -157,7 +157,7 @@ export class Service extends DatabaseService<StatusPage> {
     if (!createBy.data.subscriberEmailNotificationFooterText) {
       createBy.data.subscriberEmailNotificationFooterText =
         "This is an automated email sent to you because you are subscribed to " +
-        createBy.data.name;
+        (createBy.data?.pageTitle || createBy.data?.name || "Status Page");
     }
 
     return {

package/UI/Components/Banner/Banner.tsx

@@ -9,6 +9,7 @@ export interface ComponentProps {
   description: string;
   link?: URL | Route | undefined;
   openInNewTab?: boolean | undefined;
+  hideOnMobile?: boolean | undefined;
 }
 
 const Banner: FunctionComponent<ComponentProps> = (
@@ -32,7 +33,9 @@ const Banner: FunctionComponent<ComponentProps> = (
   };
 
   return (
-    <div className="flex border-gray-200 rounded-xl border-2 py-2.5 px-6 sm:px-3.5">
+    <div
+      className={`flex border-gray-200 rounded-xl border-2 py-2.5 px-6 sm:px-3.5${props.hideOnMobile ? " hidden md:flex" : ""}`}
+    >
       <p className="text-sm text-gray-400 hover:text-gray-500">
         {props.link && (
           <Link to={props.link} openInNewTab={props.openInNewTab}>

package/UI/Components/Button/Button.tsx

@@ -107,7 +107,7 @@ const Button: FunctionComponent<ComponentProps> = ({
     }
   };
 
-  let buttonStyleCssClass: string = `inline-flex w-full justify-center rounded-md border border-gray-300 bg-white text-base font-medium text-gray-700 shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm`;
+  let buttonStyleCssClass: string = `inline-flex w-full justify-center rounded-md border border-gray-300 bg-white text-base font-medium text-gray-700 shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 md:mt-0 md:ml-3 md:w-auto md:text-sm`;
   let loadingIconClassName: string = `w-5 h-5 mr-3 -ml-1 mr-1 animate-spin`;
   let iconClassName: string = `w-5 h-5`;
 
@@ -139,20 +139,20 @@ const Button: FunctionComponent<ComponentProps> = ({
   if (buttonStyle === ButtonStyleType.DANGER) {
     buttonStyleCssClass = `inline-flex w-full justify-center rounded-md border border-transparent bg-red-600 text-base font-medium text-white shadow-sm ${
       disabled ? "hover:bg-red-700" : ""
-    } focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2 sm:ml-3 sm:w-auto sm:text-sm`;
+    } focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2 md:ml-3 md:w-auto md:text-sm`;
   }
 
   if (buttonStyle === ButtonStyleType.DANGER_OUTLINE) {
     buttonStyleCssClass = `inline-flex w-full justify-center rounded-md border border-red-700 bg-white text-base font-medium text-red-700 shadow-sm ${
       disabled ? "hover:bg-red-50" : ""
-    } focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm`;
+    } focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2 md:mt-0 md:ml-3 md:w-auto md:text-sm`;
   }
 
   if (buttonStyle === ButtonStyleType.PRIMARY) {
     loadingIconClassName += ` text-indigo-100`;
     buttonStyleCssClass = `inline-flex w-full justify-center rounded-md border border-transparent bg-indigo-600 text-base font-medium text-white shadow-sm ${
       disabled ? "hover:bg-indigo-700" : ""
-    } focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 sm:ml-3 sm:w-auto sm:text-sm`;
+    } focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 md:ml-3 md:w-auto md:text-sm`;
 
     if (disabled) {
       buttonStyleCssClass += ` bg-indigo-300`;
@@ -188,7 +188,7 @@ const Button: FunctionComponent<ComponentProps> = ({
     buttonStyle === ButtonStyleType.HOVER_SUCCESS_OUTLINE ||
     buttonStyle === ButtonStyleType.HOVER_PRIMARY_OUTLINE
   ) {
-    buttonStyleCssClass = `flex btn-outline-secondary background-very-light-Gray500-on-hover sm:text-sm ml-1`;
+    buttonStyleCssClass = `flex btn-outline-secondary background-very-light-Gray500-on-hover md:text-sm ml-1`;
 
     if (buttonStyle === ButtonStyleType.HOVER_DANGER_OUTLINE) {
       buttonStyleCssClass += ` hover:text-red-500`;
@@ -206,25 +206,25 @@ const Button: FunctionComponent<ComponentProps> = ({
   if (buttonStyle === ButtonStyleType.SUCCESS) {
     buttonStyleCssClass = `inline-flex w-full justify-center rounded-md border border-transparent bg-green-600 text-base font-medium text-white shadow-sm ${
       disabled ? "hover:bg-green-700" : ""
-    }  focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2 sm:ml-3 sm:w-auto sm:text-sm`;
+    }  focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2 md:ml-3 md:w-auto md:text-sm`;
   }
 
   if (buttonStyle === ButtonStyleType.SUCCESS_OUTLINE) {
     buttonStyleCssClass = `inline-flex w-full justify-center rounded-md border border-green-700 bg-white text-base font-medium text-green-700 shadow-sm ${
       disabled ? "hover:bg-green-50" : ""
-    }  focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm`;
+    }  focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2 md:mt-0 md:ml-3 md:w-auto md:text-sm`;
   }
 
   if (buttonStyle === ButtonStyleType.WARNING) {
     buttonStyleCssClass = `inline-flex w-full justify-center rounded-md border border-transparent bg-yellow-600 text-base font-medium text-white shadow-sm  ${
       disabled ? "hover:bg-yellow-700" : ""
-    }  focus:outline-none focus:ring-2 focus:ring-yellow-500 focus:ring-offset-2 sm:ml-3 sm:w-auto sm:text-sm`;
+    }  focus:outline-none focus:ring-2 focus:ring-yellow-500 focus:ring-offset-2 md:ml-3 md:w-auto md:text-sm`;
   }
 
   if (buttonStyle === ButtonStyleType.WARNING_OUTLINE) {
     buttonStyleCssClass = `inline-flex w-full justify-center rounded-md border border-yellow-700 bg-white text-base font-medium text-yellow-700 shadow-sm ${
       disabled ? "hover:bg-yellow-50" : ""
-    }   focus:outline-none focus:ring-2 focus:ring-yellow-500 focus:ring-offset-2 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm`;
+    }   focus:outline-none focus:ring-2 focus:ring-yellow-500 focus:ring-offset-2 md:mt-0 md:ml-3 md:w-auto md:text-sm`;
   }
 
   buttonStyleCssClass += ` ` + buttonSize;

package/UI/Components/Card/Card.tsx

@@ -32,7 +32,7 @@ const Card: FunctionComponent<ComponentProps> = (
 
   return (
     <React.Fragment>
-      <div data-testid="card" className={props.className}>
+      <div data-testid="card" className={`mb-4 ${props.className || ""}`}>
         <div className="shadow md:rounded-md">
           <div className="bg-white py-6 px-4 md:p-6">
             <div className="flex flex-col md:flex-row md:justify-between">
@@ -49,7 +49,7 @@ const Card: FunctionComponent<ComponentProps> = (
                 {props.description && (
                   <p
                     data-testid="card-description"
-                    className="mt-1 text-sm text-gray-500 w-full"
+                    className="mt-1 text-sm text-gray-500 w-full hidden md:block"
                   >
                     {props.description}
                   </p>

package/UI/Components/Charts/ChartGroup/ChartGroup.tsx

@@ -29,7 +29,7 @@ const ChartGroup: FunctionComponent<ComponentProps> = (
   const syncId: string = Text.generateRandomText(10);
 
   return (
-    <div className="lg:grid grid-cols-1 gap-5">
+    <div className="lg:grid grid-cols-1 gap-5 space-y-5 lg:space-y-0">
       {props.charts.map((chart: Chart, index: number) => {
         switch (chart.type) {
           case ChartType.LINE:
@@ -48,7 +48,7 @@ const ChartGroup: FunctionComponent<ComponentProps> = (
                 {chart.description && (
                   <p
                     data-testid="card-description"
-                    className="mt-1 text-sm text-gray-500 w-full"
+                    className="mt-1 text-sm text-gray-500 w-full hidden md:block"
                   >
                     {chart.description}
                   </p>

package/UI/Components/Date/StartAndEndDate.tsx

@@ -126,8 +126,8 @@ const StartAndEndDate: DateFilterFunction = (
   ) {
     return (
       <div>
-        <div className="flex space-x-3 mt-1">
-          <div className="w-1/2">
+        <div className="flex flex-col md:flex-row md:space-x-3 space-y-3 md:space-y-0 mt-1">
+          <div className="w-full md:w-1/2">
             <div className="text-xs text-gray-500">From:</div>
             <div>
               <Input
@@ -161,7 +161,7 @@ const StartAndEndDate: DateFilterFunction = (
               />
             </div>
           </div>
-          <div className="w-1/2">
+          <div className="w-full md:w-1/2">
             <div className="text-xs text-gray-500">To:</div>
             <div>
               <Input
@@ -240,6 +240,7 @@ const StartAndEndDate: DateFilterFunction = (
                   );
                 }}
                 title="3 hours"
+                className="hidden md:block"
               />
             )}
 
@@ -295,6 +296,7 @@ const StartAndEndDate: DateFilterFunction = (
                 props.onValueChanged?.(new InBetween<Date>(startDate, endDate));
               }}
               title="2 weeks"
+              className="hidden md:block"
             />
 
             <Button
@@ -313,6 +315,7 @@ const StartAndEndDate: DateFilterFunction = (
                 props.onValueChanged?.(new InBetween<Date>(startDate, endDate));
               }}
               title="3 weeks"
+              className="hidden md:block"
             />
 
             <Button
@@ -331,6 +334,7 @@ const StartAndEndDate: DateFilterFunction = (
                 props.onValueChanged?.(new InBetween<Date>(startDate, endDate));
               }}
               title="1 month"
+              className="hidden md:block"
             />
 
             <Button
@@ -349,6 +353,7 @@ const StartAndEndDate: DateFilterFunction = (
                 props.onValueChanged?.(new InBetween<Date>(startDate, endDate));
               }}
               title="3 months"
+              className="hidden md:block"
             />
           </div>
         )}

package/UI/Components/HeaderAlert/HeaderAlert.tsx

@@ -20,6 +20,7 @@ export interface ComponentProps {
   alertType: HeaderAlertType;
   tooltip?: string | undefined;
   colorSwatch?: ColorSwatch | undefined;
+  suffix?: string | undefined;
 }
 
 const HeaderAlert: (props: ComponentProps) => ReactElement = (
@@ -82,9 +83,16 @@ const HeaderAlert: (props: ComponentProps) => ReactElement = (
             />
           </div>
           <div className="ml-1 flex-1 md:flex md:justify-between">
-            <p className={`text-sm font-semibold ${textColor} hidden md:block`}>
+            <p className={`text-sm font-semibold ${textColor}`}>
               {props.title}
             </p>
+            {props.suffix && (
+              <span
+                className={`ml-1 ${textColor} text-sm font-semibold hidden md:block`}
+              >
+                {props.suffix}
+              </span>
+            )}
           </div>
         </div>
       </div>

package/UI/Components/HeaderAlert/HeaderModelAlert.tsx

@@ -82,7 +82,8 @@ const HeaderModelAlert: <TBaseModel extends BaseModel>(
 
   return (
     <HeaderAlert
-      title={`${count} ${count > 1 ? props.pluralName : props.singularName}`}
+      title={`${count}`}
+      suffix={`${count > 1 ? props.pluralName : props.singularName}`}
       icon={props.icon}
       onClick={props.onClick}
       className={props.className}

package/UI/Components/Modal/Modal.tsx

@@ -60,21 +60,21 @@ const Modal: FunctionComponent<ComponentProps> = (
       <div className="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity"></div>
 
       <div className="fixed inset-0 z-20 overflow-y-auto">
-        <div className="flex min-h-screen items-end justify-center p-4 text-center sm:items-center sm:p-0">
+        <div className="flex min-h-screen items-end justify-center p-0 text-center md:items-center md:p-4">
           <div
-            className={`relative transform rounded-lg bg-white text-left shadow-xl transition-all sm:my-8 sm:w-full ${
+            className={`relative transform bg-white text-left shadow-xl transition-all w-full h-full md:h-auto md:w-auto md:rounded-lg md:my-8 ${
               props.modalWidth && props.modalWidth === ModalWidth.Large
-                ? "sm:max-w-7xl"
+                ? "md:max-w-7xl"
                 : ""
             } ${
               props.modalWidth && props.modalWidth === ModalWidth.Medium
-                ? "sm:max-w-3xl"
+                ? "md:max-w-3xl"
                 : ""
-            } ${!props.modalWidth ? "sm:max-w-lg" : ""} `}
+            } ${!props.modalWidth ? "md:max-w-lg" : ""} `}
             data-testid="modal"
           >
             {props.onClose && (
-              <div className="absolute top-0 right-0 hidden pt-4 pr-4 sm:block">
+              <div className="absolute top-0 right-0 z-10 pt-4 pr-4 md:hidden lg:block">
                 <Button
                   buttonStyle={ButtonStyleType.ICON}
                   icon={IconProp.Close}
@@ -85,10 +85,10 @@ const Modal: FunctionComponent<ComponentProps> = (
                 />
               </div>
             )}
-            <div className="sm:p-6">
+            <div className="p-4 md:p-6">
               {props.icon && (
                 <div
-                  className={`mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full ${iconBgColor} sm:mx-0 sm:h-10 sm:w-10`}
+                  className={`mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full ${iconBgColor} md:mx-0 md:h-10 md:w-10`}
                   data-testid="icon"
                 >
                   <Icon
@@ -104,13 +104,13 @@ const Modal: FunctionComponent<ComponentProps> = (
                   />
                 </div>
               )}
-              <div className="mt-3 text-center sm:mt-0 sm:ml-4 sm:mr-4 sm:text-left">
-                <div className="flex justify-between">
-                  <div>
+              <div className="text-left md:mt-0 md:ml-4 md:mr-4">
+                <div className="flex flex-col md:flex-row md:justify-between">
+                  <div className="flex-1">
                     <h3
                       data-testid="modal-title"
                       className={`text-lg font-medium leading-6 text-gray-900 ${
-                        props.icon ? "ml-10 -mt-8 mb-5" : ""
+                        props.icon ? "mt-4 md:ml-10 md:-mt-8 md:mb-5" : ""
                       }`}
                       id="modal-title"
                     >
@@ -119,14 +119,16 @@ const Modal: FunctionComponent<ComponentProps> = (
                     {props.description && (
                       <h3
                         data-testid="modal-description"
-                        className="text-sm leading-6 text-gray-500"
+                        className="text-sm leading-6 text-gray-500 mt-2"
                       >
                         {props.description}
                       </h3>
                     )}
                   </div>
                   {props.rightElement && (
-                    <div data-testid="right-element">{props.rightElement}</div>
+                    <div data-testid="right-element" className="mt-4 md:mt-0">
+                      {props.rightElement}
+                    </div>
                   )}
                 </div>
                 <div className="mt-2">

package/UI/Components/Modal/ModalFooter.tsx

@@ -18,7 +18,7 @@ const ModalFooter: FunctionComponent<ComponentProps> = (
   props: ComponentProps,
 ): ReactElement => {
   return (
-    <div className="bg-gray-50 px-4 py-3 sm:flex sm:flex-row-reverse sm:px-6">
+    <div className="bg-gray-50 px-4 py-3 flex flex-row gap-3 md:flex-row-reverse md:px-6">
       {props.onSubmit ? (
         <Button
           buttonStyle={

package/UI/Components/Page/Page.tsx

@@ -52,7 +52,7 @@ const Page: FunctionComponent<ComponentProps> = (
             </div>
           )}
           {props.title && (
-            <div className="mt-2 md:flex md:items-center md:justify-between">
+            <div className="mt-2 md:flex md:items-center md:justify-between hidden md:block">
               <div className="min-w-0">
                 <h2 className="text-xl leading-7  text-gray-900 sm:truncate sm:text-2xl sm:tracking-tight">
                   {props.title}
@@ -69,12 +69,12 @@ const Page: FunctionComponent<ComponentProps> = (
             {props.sideMenu}
 
             {!props.isLoading && (
-              <div className="space-y-6 sm:px-6 lg:col-span-10 md:col-span-9 lg:px-0">
+              <div className="space-y-6 md:px-6 lg:col-span-10 md:col-span-9 lg:px-0">
                 {props.children}
               </div>
             )}
             {props.isLoading && (
-              <div className="col-span-10">
+              <div className="lg:col-span-10 md:col-span-9">
                 <PageLoader isVisible={true} />
               </div>
             )}

package/UI/Components/SideMenu/SideMenu.tsx

@@ -1,24 +1,300 @@
-import React, { FunctionComponent, ReactElement } from "react";
+import React, {
+  FunctionComponent,
+  ReactElement,
+  useState,
+  useEffect,
+} from "react";
+import Button, { ButtonStyleType } from "../Button/Button";
+import IconProp from "../../../Types/Icon/IconProp";
+import useComponentOutsideClick from "../../Types/UseComponentOutsideClick";
+import Navigation from "../../Utils/Navigation";
+import SideMenuItem from "./SideMenuItem";
+import SideMenuSection from "./SideMenuSection";
+import CountModelSideMenuItem from "./CountModelSideMenuItem";
+import Link from "../../../Types/Link";
+import { BadgeType } from "../Badge/Badge";
+import BaseModel from "../../../Models/DatabaseModels/DatabaseBaseModel/DatabaseBaseModel";
+import Query from "../../../Types/BaseDatabase/Query";
+import { RequestOptions } from "../../Utils/ModelAPI/ModelAPI";
+
+export interface SideMenuItemProps {
+  link: Link;
+  showAlert?: boolean;
+  showWarning?: boolean;
+  badge?: number;
+  badgeType?: BadgeType;
+  icon?: IconProp;
+  className?: string;
+  subItemLink?: Link | undefined;
+  subItemIcon?: IconProp;
+  // For CountModelSideMenuItem support
+  modelType?: { new (): BaseModel };
+  countQuery?: Query<any>;
+  requestOptions?: RequestOptions;
+  onCountFetchInit?: () => void;
+}
+
+export interface SideMenuSectionProps {
+  title: string;
+  items: SideMenuItemProps[];
+}
 
 export interface ComponentProps {
-  children: ReactElement | Array<ReactElement>;
+  sections?: SideMenuSectionProps[];
+  items?: SideMenuItemProps[];
+  className?: string;
+  // Keep children support for backward compatibility
+  children?: ReactElement | Array<ReactElement>;
 }
 
 const SideMenu: FunctionComponent<ComponentProps> = (props: ComponentProps) => {
-  let children: Array<ReactElement> = [];
-  if (!Array.isArray(props.children)) {
-    children = [props.children];
-  } else {
-    children = props.children;
+  const [isMobile, setIsMobile] = useState<boolean>(false);
+  const [isMobileMenuVisible, setIsMobileMenuVisible] =
+    useState<boolean>(false);
+
+  // Use the existing outside click hook for mobile menu
+  const {
+    ref: mobileMenuRef,
+    isComponentVisible: isMobileMenuOpen,
+    setIsComponentVisible: setIsMobileMenuOpen,
+  } = useComponentOutsideClick(false);
+
+  // Sync local state with hook state
+  useEffect(() => {
+    setIsMobileMenuVisible(isMobileMenuOpen);
+  }, [isMobileMenuOpen]);
+
+  // Check if we're on mobile
+  useEffect(() => {
+    const checkMobile: () => void = (): void => {
+      setIsMobile(window.innerWidth < 768); // md breakpoint
+    };
+
+    checkMobile();
+    window.addEventListener("resize", checkMobile);
+
+    return () => {
+      window.removeEventListener("resize", checkMobile);
+    };
+  }, []);
+
+  // Close mobile menu when clicking on a menu item
+  const handleMenuItemClick: () => void = (): void => {
+    if (isMobile && isMobileMenuVisible) {
+      setIsMobileMenuOpen(false);
+    }
+  };
+
+  // Function to find the active menu item and section - much simpler now!
+  const findActiveMenuItem: () => {
+    sectionTitle?: string;
+    itemTitle?: string;
+  } = (): {
+    sectionTitle?: string;
+    itemTitle?: string;
+  } => {
+    // Check sections first
+    if (props.sections) {
+      for (const section of props.sections) {
+        for (const item of section.items) {
+          if (Navigation.isOnThisPage(item.link.to)) {
+            return {
+              sectionTitle: section.title,
+              itemTitle: item.link.title,
+            };
+          }
+        }
+      }
+    }
+
+    // Check direct items
+    if (props.items) {
+      for (const item of props.items) {
+        if (Navigation.isOnThisPage(item.link.to)) {
+          return {
+            itemTitle: item.link.title,
+          };
+        }
+      }
+    }
+
+    return {};
+  };
+
+  const activeItem: {
+    sectionTitle?: string;
+    itemTitle?: string;
+  } = findActiveMenuItem();
+  const displayText: string =
+    activeItem.sectionTitle && activeItem.itemTitle
+      ? `${activeItem.sectionTitle} - ${activeItem.itemTitle}`
+      : activeItem.itemTitle || "Navigation";
+
+  // Re-run active item detection when location changes
+  useEffect(() => {
+    // This will trigger a re-render when navigation changes
+    // The activeItem will be recalculated
+  }, [Navigation.getCurrentPath().toString()]);
+
+  // Render function for the menu content
+  const renderMenuContent: () => ReactElement[] = (): ReactElement[] => {
+    const content: ReactElement[] = [];
+
+    // Render sections
+    if (props.sections) {
+      props.sections.forEach(
+        (section: SideMenuSectionProps, sectionIndex: number) => {
+          content.push(
+            <SideMenuSection
+              key={`section-${sectionIndex}`}
+              title={section.title}
+            >
+              {section.items.map(
+                (item: SideMenuItemProps, itemIndex: number) => {
+                  // If item has modelType, render CountModelSideMenuItem
+                  if (item.modelType && item.countQuery) {
+                    return (
+                      <CountModelSideMenuItem
+                        key={`section-${sectionIndex}-count-item-${itemIndex}`}
+                        link={item.link}
+                        badgeType={item.badgeType}
+                        modelType={item.modelType as any}
+                        countQuery={item.countQuery as any}
+                        requestOptions={item.requestOptions}
+                        icon={item.icon}
+                        className={item.className}
+                        onCountFetchInit={item.onCountFetchInit}
+                      />
+                    );
+                  }
+
+                  // Otherwise render regular SideMenuItem
+                  return (
+                    <SideMenuItem
+                      key={`section-${sectionIndex}-item-${itemIndex}`}
+                      link={item.link}
+                      showAlert={item.showAlert}
+                      showWarning={item.showWarning}
+                      badge={item.badge}
+                      badgeType={item.badgeType}
+                      icon={item.icon}
+                      className={item.className}
+                      subItemLink={item.subItemLink}
+                      subItemIcon={item.subItemIcon}
+                    />
+                  );
+                },
+              )}
+            </SideMenuSection>,
+          );
+        },
+      );
+    }
+
+    // Render direct items
+    if (props.items) {
+      props.items.forEach((item: SideMenuItemProps, itemIndex: number) => {
+        // If item has modelType, render CountModelSideMenuItem
+        if (item.modelType && item.countQuery) {
+          content.push(
+            <CountModelSideMenuItem
+              key={`count-item-${itemIndex}`}
+              link={item.link}
+              badgeType={item.badgeType}
+              modelType={item.modelType as any}
+              countQuery={item.countQuery as any}
+              requestOptions={item.requestOptions}
+              icon={item.icon}
+              className={item.className}
+              onCountFetchInit={item.onCountFetchInit}
+            />,
+          );
+        } else {
+          // Otherwise render regular SideMenuItem
+          content.push(
+            <SideMenuItem
+              key={`item-${itemIndex}`}
+              link={item.link}
+              showAlert={item.showAlert}
+              showWarning={item.showWarning}
+              badge={item.badge}
+              badgeType={item.badgeType}
+              icon={item.icon}
+              className={item.className}
+              subItemLink={item.subItemLink}
+              subItemIcon={item.subItemIcon}
+            />,
+          );
+        }
+      });
+    }
+
+    // Support legacy children prop for backward compatibility
+    if (props.children) {
+      const children: Array<ReactElement> = Array.isArray(props.children)
+        ? props.children
+        : [props.children];
+
+      children.forEach((child: ReactElement, index: number) => {
+        content.push(React.cloneElement(child, { key: `child-${index}` }));
+      });
+    }
+
+    return content;
+  };
+
+  // Mobile view
+  if (isMobile) {
+    return (
+      <div className="md:hidden mb-6">
+        {/* Mobile toggle button */}
+        <div className="flex items-center justify-between w-full mb-4 px-4 py-3 bg-white rounded-lg border border-gray-200">
+          <div className="flex-1 mr-3">
+            <h3 className="text-base font-medium text-gray-900 truncate">
+              {displayText}
+            </h3>
+          </div>
+          <Button
+            buttonStyle={ButtonStyleType.OUTLINE}
+            onClick={() => {
+              setIsMobileMenuOpen(!isMobileMenuVisible);
+            }}
+            className="p-2 flex-shrink-0"
+            icon={isMobileMenuVisible ? IconProp.Close : IconProp.Bars3}
+            dataTestId="mobile-sidemenu-toggle"
+            tooltip={
+              isMobileMenuVisible
+                ? "Close navigation menu"
+                : "Open navigation menu"
+            }
+          />
+        </div>
+
+        {/* Mobile collapsible menu */}
+        {isMobileMenuVisible && (
+          <div
+            ref={mobileMenuRef}
+            className="bg-white rounded-lg border border-gray-200 py-4 px-4 mb-6 transition-all duration-200 ease-in-out"
+            role="navigation"
+            aria-label="Main navigation"
+          >
+            <nav className="space-y-3" onClick={handleMenuItemClick}>
+              {renderMenuContent()}
+            </nav>
+          </div>
+        )}
+      </div>
+    );
   }
 
+  // Desktop view
   return (
-    <aside className="py-6 px-2 sm:px-6 lg:col-span-2 md:col-span-3 lg:py-0 lg:px-0 mb-10">
-      <nav className="space-y-3">
-        {children.map((child: ReactElement) => {
-          return child;
-        })}
-      </nav>
+    <aside
+      className={`hidden md:block py-6 px-2 sm:px-6 lg:col-span-2 md:col-span-3 lg:py-0 lg:px-0 mb-10 ${props.className || ""}`}
+      role="navigation"
+      aria-label="Main navigation"
+    >
+      <nav className="space-y-3">{renderMenuContent()}</nav>
     </aside>
   );
 };