@oneuptime/common 9.2.26 → 9.3.0

package/UI/Components/SideMenu/SideMenu.tsx

@@ -4,7 +4,7 @@ import React, {
   useState,
   useEffect,
 } from "react";
-import Button, { ButtonStyleType } from "../Button/Button";
+import Icon from "../Icon/Icon";
 import IconProp from "../../../Types/Icon/IconProp";
 import useComponentOutsideClick from "../../Types/UseComponentOutsideClick";
 import Navigation from "../../Utils/Navigation";
@@ -37,12 +37,17 @@ export interface SideMenuItemProps {
 export interface SideMenuSectionProps {
   title: string;
   items: SideMenuItemProps[];
+  icon?: IconProp;
+  defaultCollapsed?: boolean;
+  collapsible?: boolean;
 }
 
 export interface ComponentProps {
   sections?: SideMenuSectionProps[];
   items?: SideMenuItemProps[];
   className?: string;
+  header?: ReactElement;
+  footer?: ReactElement;
   // Keep children support for backward compatibility
   children?: ReactElement | Array<ReactElement>;
 }
@@ -89,19 +94,29 @@ const SideMenu: FunctionComponent<ComponentProps> = (props: ComponentProps) => {
   const findActiveMenuItem: () => {
     sectionTitle?: string;
     itemTitle?: string;
+    icon?: IconProp;
   } = (): {
     sectionTitle?: string;
     itemTitle?: string;
+    icon?: IconProp;
   } => {
     // 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 {
+            const result: {
+              sectionTitle: string;
+              itemTitle: string;
+              icon?: IconProp;
+            } = {
               sectionTitle: section.title,
               itemTitle: item.link.title,
             };
+            if (item.icon) {
+              result.icon = item.icon;
+            }
+            return result;
           }
         }
       }
@@ -111,9 +126,16 @@ const SideMenu: FunctionComponent<ComponentProps> = (props: ComponentProps) => {
     if (props.items) {
       for (const item of props.items) {
         if (Navigation.isOnThisPage(item.link.to)) {
-          return {
+          const result: {
+            itemTitle: string;
+            icon?: IconProp;
+          } = {
             itemTitle: item.link.title,
           };
+          if (item.icon) {
+            result.icon = item.icon;
+          }
+          return result;
         }
       }
     }
@@ -124,10 +146,11 @@ const SideMenu: FunctionComponent<ComponentProps> = (props: ComponentProps) => {
   const activeItem: {
     sectionTitle?: string;
     itemTitle?: string;
+    icon?: IconProp;
   } = findActiveMenuItem();
   const displayText: string =
     activeItem.sectionTitle && activeItem.itemTitle
-      ? `${activeItem.sectionTitle} - ${activeItem.itemTitle}`
+      ? `${activeItem.sectionTitle} / ${activeItem.itemTitle}`
       : activeItem.itemTitle || "Navigation";
 
   // Re-run active item detection when location changes
@@ -146,11 +169,30 @@ const SideMenu: FunctionComponent<ComponentProps> = (props: ComponentProps) => {
     if (props.sections) {
       props.sections.forEach(
         (section: SideMenuSectionProps, sectionIndex: number) => {
+          // Build section props conditionally to avoid undefined values
+          const sectionProps: {
+            key: string;
+            title: string;
+            icon?: IconProp;
+            defaultCollapsed?: boolean;
+            collapsible?: boolean;
+          } = {
+            key: `section-${sectionIndex}`,
+            title: section.title,
+          };
+
+          if (section.icon) {
+            sectionProps.icon = section.icon;
+          }
+          if (section.defaultCollapsed !== undefined) {
+            sectionProps.defaultCollapsed = section.defaultCollapsed;
+          }
+          if (section.collapsible !== undefined) {
+            sectionProps.collapsible = section.collapsible;
+          }
+
           content.push(
-            <SideMenuSection
-              key={`section-${sectionIndex}`}
-              title={section.title}
-            >
+            <SideMenuSection {...sectionProps}>
               {section.items.map(
                 (item: SideMenuItemProps, itemIndex: number) => {
                   // If item has modelType, render CountModelSideMenuItem
@@ -250,40 +292,105 @@ const SideMenu: FunctionComponent<ComponentProps> = (props: ComponentProps) => {
     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>
+        <button
+          type="button"
+          onClick={() => {
+            setIsMobileMenuOpen(!isMobileMenuVisible);
+          }}
+          className={`
+            w-full flex items-center justify-between
+            px-3 py-2.5
+            bg-white rounded-xl
+            border border-gray-200
+            shadow-sm
+            transition-all duration-200
+            ${isMobileMenuVisible ? "ring-2 ring-indigo-100 border-indigo-200" : "hover:border-gray-300"}
+          `}
+          aria-expanded={isMobileMenuVisible}
+          aria-label={
+            isMobileMenuVisible
+              ? "Close navigation menu"
+              : "Open navigation menu"
+          }
+          data-testid="mobile-sidemenu-toggle"
+        >
+          <div className="flex items-center gap-2 min-w-0">
+            {activeItem.icon && (
+              <div className="flex items-center justify-center w-6 h-6 rounded-md bg-indigo-50 text-indigo-600 flex-shrink-0">
+                <Icon icon={activeItem.icon} className="h-3.5 w-3.5" />
+              </div>
+            )}
+            <div className="min-w-0">
+              <p className="text-xs text-gray-400 font-medium">Navigate to</p>
+              <h3 className="text-sm font-semibold text-gray-900 truncate">
+                {displayText}
+              </h3>
+            </div>
           </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"
+            className={`
+              flex items-center justify-center
+              w-6 h-6 rounded-md
+              transition-all duration-200
+              ${isMobileMenuVisible ? "bg-indigo-100 text-indigo-600" : "bg-gray-100 text-gray-500"}
+            `}
           >
-            <nav className="space-y-3" onClick={handleMenuItemClick}>
-              {renderMenuContent()}
-            </nav>
+            <Icon
+              icon={isMobileMenuVisible ? IconProp.Close : IconProp.Bars3}
+              className="h-3.5 w-3.5"
+            />
           </div>
+        </button>
+
+        {/* Mobile collapsible menu with overlay */}
+        {isMobileMenuVisible && (
+          <>
+            {/* Backdrop */}
+            <div
+              className="fixed inset-0 bg-black/20 z-40 animate-in fade-in duration-200"
+              onClick={() => {
+                setIsMobileMenuOpen(false);
+              }}
+            />
+
+            {/* Menu Panel */}
+            <div
+              ref={mobileMenuRef}
+              className={`
+                relative z-50
+                mt-2
+                bg-white rounded-xl
+                border border-gray-200
+                shadow-xl
+                overflow-hidden
+                animate-in slide-in-from-top-2 fade-in duration-200
+              `}
+              role="navigation"
+              aria-label="Main navigation"
+            >
+              {/* Optional Header */}
+              {props.header && (
+                <div className="px-3 py-2 border-b border-gray-100 bg-gray-50/50">
+                  {props.header}
+                </div>
+              )}
+
+              {/* Menu Items */}
+              <nav
+                className="p-2 max-h-[60vh] overflow-y-auto"
+                onClick={handleMenuItemClick}
+              >
+                <div className="space-y-0.5">{renderMenuContent()}</div>
+              </nav>
+
+              {/* Optional Footer */}
+              {props.footer && (
+                <div className="px-3 py-2 border-t border-gray-100 bg-gray-50/50">
+                  {props.footer}
+                </div>
+              )}
+            </div>
+          </>
         )}
       </div>
     );
@@ -292,11 +399,39 @@ const SideMenu: FunctionComponent<ComponentProps> = (props: ComponentProps) => {
   // Desktop view
   return (
     <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 || ""}`}
+      className={`hidden md:block w-52 lg:w-60 flex-shrink-0 mb-10 ${props.className || ""}`}
       role="navigation"
       aria-label="Main navigation"
     >
-      <nav className="space-y-3">{renderMenuContent()}</nav>
+      <div className="sticky top-6">
+        <div
+          className={`
+            bg-white rounded-2xl
+            border border-gray-200/80
+            shadow-sm
+            overflow-hidden
+          `}
+        >
+          {/* Optional Header */}
+          {props.header && (
+            <div className="px-3 py-3 border-b border-gray-100 bg-gradient-to-b from-gray-50 to-white">
+              {props.header}
+            </div>
+          )}
+
+          {/* Menu Content */}
+          <nav className="p-2">
+            <div className="space-y-0.5">{renderMenuContent()}</div>
+          </nav>
+
+          {/* Optional Footer */}
+          {props.footer && (
+            <div className="px-3 py-2 border-t border-gray-100 bg-gray-50/50">
+              {props.footer}
+            </div>
+          )}
+        </div>
+      </div>
     </aside>
   );
 };

package/UI/Components/SideMenu/SideMenuDivider.tsx

@@ -0,0 +1,17 @@
+import React, { FunctionComponent } from "react";
+
+export interface ComponentProps {
+  className?: string;
+}
+
+const SideMenuDivider: FunctionComponent<ComponentProps> = (
+  props: ComponentProps,
+) => {
+  return (
+    <div className={`my-3 px-3 ${props.className || ""}`}>
+      <div className="h-px bg-gradient-to-r from-transparent via-gray-200 to-transparent" />
+    </div>
+  );
+};
+
+export default SideMenuDivider;

package/UI/Components/SideMenu/SideMenuItem.tsx

@@ -21,195 +21,148 @@ export interface ComponentProps {
 const SideMenuItem: FunctionComponent<ComponentProps> = (
   props: ComponentProps,
 ) => {
-  const badgeClasName: string = `p-1 rounded-full pr-3 pl-3 text-white  text-sm`;
-
-  let linkClassName: string = `text-gray-500 hover:text-gray-900 hover:bg-gray-100 group rounded-md px-3 py-2 flex items-center text-sm font-medium`;
-
-  if (Navigation.isOnThisPage(props.link.to)) {
-    linkClassName = `bg-gray-100 text-indigo-600 hover:bg-white group rounded-md px-3 py-2 flex items-center text-sm font-medium`;
-  }
-
-  let subItemLinkClassName: string = `text-gray-500 hover:text-gray-900 hover:bg-gray-100 group rounded-md px-3 py-2 flex items-center text-sm font-medium`;
-
-  if (props.subItemLink && Navigation.isOnThisPage(props.subItemLink.to)) {
-    subItemLinkClassName = `bg-gray-100 text-indigo-600 hover:bg-white group rounded-md px-3 py-2 flex items-center text-sm font-medium`;
-  }
-
-  /*
-   * if(props.badge && props.badge > 0){
-   *     if(props.badgeType === BadgeType.DANGER){
-   *         linkClassName = `text-red-400 hover:text-red-600 hover:bg-gray-100 group rounded-md px-3 py-2 flex items-center text-sm font-medium`;
-   */
-
-  /*
-   *         if(Navigation.isOnThisPage(props.link.to)){
-   *             linkClassName = `bg-gray-100 text-red-600 hover:bg-white group rounded-md px-3 py-2 flex items-center text-sm font-medium`;
-   *         }
-   */
-
-  //     }
-
-  /*
-   *     if(props.badgeType === BadgeType.WARNING){
-   *         linkClassName = `text-yellow-400 hover:text-yellow-600 hover:bg-gray-100 group rounded-md px-3 py-2 flex items-center text-sm font-medium`;
-   */
-
-  /*
-   *         if(Navigation.isOnThisPage(props.link.to)){
-   *             linkClassName = `bg-gray-100 text-yellow-600 hover:bg-white group rounded-md px-3 py-2 flex items-center text-sm font-medium`;
-   *         }
-   *     }
-   */
-
-  /*
-   *     if(props.badgeType === BadgeType.SUCCESS){
-   *         linkClassName = `text-emerald-400 hover:text-emerald-600 hover:bg-gray-100 group rounded-md px-3 py-2 flex items-center text-sm font-medium`;
-   */
-
-  /*
-   *         if(Navigation.isOnThisPage(props.link.to)){
-   *             linkClassName = `bg-gray-100 text-emerald-600 hover:bg-white group rounded-md px-3 py-2 flex items-center text-sm font-medium`;
-   *         }
-   *     }
-   * }
-   */
-
-  let iconClassName: string =
-    "text-gray-400 group-hover:text-gray-500 flex-shrink-0 -ml-1 mr-3 h-6 w-6";
-
-  if (Navigation.isOnThisPage(props.link.to)) {
-    iconClassName = "text-indigo-500 flex-shrink-0 -ml-1 mr-3 h-6 w-6";
-  }
-
-  let subItemIconClassName: string =
-    "text-gray-400 group-hover:text-gray-500 flex-shrink-0 -ml-1 mr-3 h-6 w-6";
-
-  if (props.subItemLink && Navigation.isOnThisPage(props.subItemLink.to)) {
-    subItemIconClassName = "text-indigo-500 flex-shrink-0 -ml-1 mr-3 h-6 w-6";
-  }
-
-  /*
-   * if(props.badge && props.badge > 0){
-   *     if(props.badgeType === BadgeType.DANGER){
-   *         iconClassName = `text-red-400 group-hover:text-red-500 flex-shrink-0 -ml-1 mr-3 h-6 w-6`;
-   */
-
-  /*
-   *         if(Navigation.isOnThisPage(props.link.to)){
-   *             iconClassName = `text-red-500 flex-shrink-0 -ml-1 mr-3 h-6 w-6`;
-   *         }
-   */
-
-  //     }
-
-  /*
-   *     if(props.badgeType === BadgeType.WARNING){
-   *         iconClassName = `text-yellow-400 group-hover:text-yellow-500 flex-shrink-0 -ml-1 mr-3 h-6 w-6`;
-   */
-
-  /*
-   *         if(Navigation.isOnThisPage(props.link.to)){
-   *             iconClassName = `text-yellow-500 flex-shrink-0 -ml-1 mr-3 h-6 w-6`;
-   *         }
-   *     }
-   */
-
-  /*
-   *     if(props.badgeType === BadgeType.SUCCESS){
-   *         iconClassName = `text-emerald-400 group-hover:text-emerald-500 flex-shrink-0 -ml-1 mr-3 h-6 w-6`;
-   */
-
-  /*
-   *         if(Navigation.isOnThisPage(props.link.to)){
-   *             iconClassName = `text-emerald-500 flex-shrink-0 -ml-1 mr-3 h-6 w-6`;
-   *         }
-   *     }
-   * }
-   */
+  const isActive: boolean = Navigation.isOnThisPage(props.link.to);
+  const isSubItemActive: boolean = props.subItemLink
+    ? Navigation.isOnThisPage(props.subItemLink.to)
+    : false;
 
   return (
     <>
+      {/* Main Menu Item */}
       <UILink
-        className={`${
-          props.className ? props.className : ""
-        }  ${linkClassName} flex justify-between`}
+        className={`
+          ${props.className || ""}
+          group relative flex items-center justify-between
+          px-2 py-1.5 rounded-lg
+          text-sm font-medium
+          transition-all duration-200 ease-out
+          ${
+            isActive
+              ? "bg-gradient-to-r from-indigo-50 to-indigo-50/50 text-indigo-700 shadow-sm"
+              : "text-gray-600 hover:bg-gray-50 hover:text-gray-900"
+          }
+        `}
         to={props.link.to}
         onClick={() => {
           window.scrollTo({ top: 0, behavior: "smooth" });
         }}
       >
-        <div className="flex">
-          {props.icon ? (
-            <>
-              <Icon className={iconClassName} icon={props.icon} />
-            </>
-          ) : (
-            <></>
+        {/* Active Indicator Bar */}
+        <div
+          className={`
+            absolute left-0 top-1/2 -translate-y-1/2
+            w-0.5 rounded-full
+            transition-all duration-200 ease-out
+            ${isActive ? "h-5 bg-indigo-600" : "h-0 bg-transparent"}
+          `}
+        />
+
+        {/* Content Container */}
+        <div className="flex items-center min-w-0 gap-2">
+          {/* Icon with background on active */}
+          {props.icon && (
+            <div
+              className={`
+                flex items-center justify-center
+                w-6 h-6 rounded-md
+                transition-all duration-200
+                ${
+                  isActive
+                    ? "bg-indigo-100 text-indigo-600"
+                    : "bg-gray-100 text-gray-500 group-hover:bg-gray-200 group-hover:text-gray-700"
+                }
+              `}
+            >
+              <Icon icon={props.icon} className="h-3.5 w-3.5" />
+            </div>
           )}
 
-          <span className="truncate mt-1">{props.link.title}</span>
+          {/* Title */}
+          <span
+            className={`
+              truncate transition-colors duration-200
+              ${isActive ? "font-semibold" : ""}
+            `}
+          >
+            {props.link.title}
+          </span>
         </div>
 
-        {props.badge || props.showAlert || props.showWarning ? (
-          <div className={badgeClasName}>
-            {props.badge ? (
+        {/* Badge / Alert / Warning Container */}
+        {(props.badge !== undefined ||
+          props.showAlert ||
+          props.showWarning) && (
+          <div className="flex items-center gap-1.5 ml-2 flex-shrink-0">
+            {props.badge !== undefined && (
               <Badge badgeCount={props.badge} badgeType={props.badgeType} />
-            ) : (
-              <></>
             )}
-
-            {props.showAlert ? (
-              <>
-                <Icon
-                  className="float-end text-red-900"
-                  icon={IconProp.Error}
-                />
-              </>
-            ) : (
-              <></>
+            {props.showAlert && (
+              <div className="flex items-center justify-center w-5 h-5 rounded-full bg-gradient-to-br from-red-50 to-red-100 ring-1 ring-inset ring-red-200/60 shadow-sm">
+                <Icon icon={IconProp.Error} className="text-red-600 h-3 w-3" />
+              </div>
             )}
-            {props.showWarning ? (
-              <>
+            {props.showWarning && (
+              <div className="flex items-center justify-center w-5 h-5 rounded-full bg-gradient-to-br from-amber-50 to-amber-100 ring-1 ring-inset ring-amber-200/60 shadow-sm">
                 <Icon
-                  className="float-end text-yellow-900"
                   icon={IconProp.Alert}
+                  className="text-amber-600 h-3 w-3"
                 />
-              </>
-            ) : (
-              <></>
+              </div>
             )}
           </div>
-        ) : (
-          <></>
         )}
+
+        {/* Hover indicator */}
+        <div
+          className={`
+            absolute inset-0 rounded-lg
+            border-2 border-transparent
+            transition-all duration-200
+            ${!isActive ? "group-hover:border-gray-200" : ""}
+            pointer-events-none
+          `}
+        />
       </UILink>
-      {props.subItemLink ? (
+
+      {/* Sub Item */}
+      {props.subItemLink && (
         <UILink
-          className={`${
-            props.className ? props.className : ""
-          }  ${subItemLinkClassName} flex justify-between`}
+          className={`
+            ${props.className || ""}
+            group relative flex items-center justify-between
+            ml-8 px-2 py-1.5 rounded-lg
+            text-sm font-medium
+            transition-all duration-200 ease-out
+            ${
+              isSubItemActive
+                ? "bg-indigo-50/70 text-indigo-700"
+                : "text-gray-500 hover:bg-gray-50 hover:text-gray-700"
+            }
+          `}
           to={props.subItemLink.to}
           onClick={() => {
             window.scrollTo({ top: 0, behavior: "smooth" });
           }}
         >
-          <div className="ml-8 flex">
-            {props.icon ? (
-              <>
-                <Icon
-                  className={subItemIconClassName}
-                  icon={props.subItemIcon || IconProp.MinusSmall}
-                />
-              </>
-            ) : (
-              <></>
-            )}
-
-            <span className="truncate mt-1">{props.subItemLink.title}</span>
+          {/* Connector Line */}
+          <div className="absolute -left-3 top-1/2 w-2 h-px bg-gray-200" />
+
+          {/* Sub Item Icon */}
+          <div className="flex items-center min-w-0 gap-2">
+            <Icon
+              icon={props.subItemIcon || IconProp.MinusSmall}
+              className={`
+                h-4 w-4 transition-colors duration-200
+                ${
+                  isSubItemActive
+                    ? "text-indigo-500"
+                    : "text-gray-400 group-hover:text-gray-600"
+                }
+              `}
+            />
+            <span className="truncate">{props.subItemLink.title}</span>
           </div>
         </UILink>
-      ) : (
-        <> </>
       )}
     </>
   );