@argusoft/medplat-app-shell 1.0.6 → 1.0.8

package/src/layout/mainLayout/sidebar/SideBar.jsx

@@ -0,0 +1,1402 @@
+import React, { useState, useEffect } from 'react';
+import './Sidebar.css';
+import PropTypes from 'prop-types';
+import Box from '@mui/material/Box';
+import Drawer from '@mui/material/Drawer';
+import List from '@mui/material/List';
+import ListItem from '@mui/material/ListItem';
+import ListItemButton from '@mui/material/ListItemButton';
+import Collapse from '@mui/material/Collapse';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { Typography, Portal, ButtonBase } from '@mui/material';
+import { Grid } from '@mui/system';
+import { useLocation, useNavigate } from 'react-router';
+import { alpha, useTheme } from '@mui/material/styles';
+import medplatFavIcon from '@/assets/img/medplat-loader.gif';
+import medplatLogo from '@/assets/img/medplat-highres.png';
+
+import {
+  faAward,
+  faBookOpen,
+  faBoxOpen,
+  faFileLines,
+  faGear,
+  faHeartPulse,
+  faMinus,
+  faPersonBreastfeeding,
+  faPlus,
+  faUserGear,
+  faUserGroup,
+  faXmark,
+} from '@fortawesome/free-solid-svg-icons';
+import GeneralUtil from '@/common/services/util/GeneralUtil';
+import { faMosquito } from '@fortawesome/free-solid-svg-icons';
+import useScript from '@/hooks/useScript';
+
+const bhashiniLanguageMap = {
+  as: 'Assamese',
+  bn: 'Bengali',
+  brx: 'Bodo',
+  doi: 'Dogri',
+  gu: 'Gujarati',
+  hi: 'Hindi',
+  kn: 'Kannada',
+  mai: 'Maithili',
+  ml: 'Malayalam',
+  mr: 'Marathi',
+  ne: 'Nepali',
+  or: 'Odia',
+  pa: 'Punjabi',
+  sa: 'Sanskrit',
+  sat: 'Santali',
+  ta: 'Tamil',
+  te: 'Telugu',
+  ur: 'Urdu',
+  mni: 'Manipuri',
+  sd: 'Sindhi',
+  gom: 'Konkani',
+  ks: 'Kashmiri',
+  en: 'English',
+};
+
+const formatSidebarLabel = (value = '') =>
+  value
+    .split(' ')
+    .filter(Boolean)
+    .map((word) => {
+      if (word === word.toLowerCase() && word.length <= 4) {
+        return word.toUpperCase();
+      }
+
+      return word.charAt(0).toUpperCase() + word.slice(1);
+    })
+    .join(' ');
+
+const menuItemShape = PropTypes.shape({
+  id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  name: PropTypes.string,
+  displayName: PropTypes.string,
+  navigationState: PropTypes.string,
+  isGroup: PropTypes.bool,
+  isSubGroup: PropTypes.bool,
+  subGroups: PropTypes.arrayOf(PropTypes.object),
+});
+
+const normalizeNavPath = (item) => {
+  if (!item?.navigationState) return '';
+  const rawPath = GeneralUtil.naviagationFunc(item);
+  if (!rawPath) return '';
+  return rawPath.startsWith('/ui/') ? rawPath.split('?')[0] : `/ui/${rawPath}`.split('?')[0];
+};
+
+const isItemActive = (item, pathname) => {
+  if (!item) return false;
+  const normalizedPath = normalizeNavPath(item);
+  const currentPath = (pathname || '').split('?')[0];
+
+  if (normalizedPath && (currentPath === normalizedPath || currentPath.startsWith(`${normalizedPath}/`))) {
+    return true;
+  }
+
+  return item.subGroups?.some((subItem) => isItemActive(subItem, pathname)) || false;
+};
+
+const navigateToItem = (item, navigate) => {
+  if (!item?.navigationState) return;
+
+  const path = GeneralUtil.naviagationFunc(item);
+  if (!path) return;
+
+  if (path.includes('report/view/')) {
+    if (GeneralUtil.isEkavach) {
+      window.open(`/ui/${path}`, '_blank');
+    } else {
+      navigate(path);
+    }
+  } else {
+    navigate(path);
+  }
+};
+
+const RecursiveNavItem = ({ item, navigate, pathname, depth = 1 }) => {
+  const theme = useTheme();
+  const [isOpen, setIsOpen] = React.useState(false);
+  const hasSubGroups = item.subGroups && item.subGroups.length > 0;
+  const activeItem = isItemActive(item, pathname);
+
+  useEffect(() => {
+    if (hasSubGroups && activeItem) {
+      setIsOpen(true);
+    }
+  }, [activeItem, hasSubGroups]);
+
+  const handleClick = (e) => {
+    e.stopPropagation();
+    if (hasSubGroups) {
+      setIsOpen(!isOpen);
+    } else {
+      navigateToItem(item, navigate);
+    }
+  };
+
+  return (
+    <Box sx={{ mb: isOpen ? 1 : 0, transition: 'margin 0.2s ease' }}>
+      <ListItem
+        disablePadding
+        sx={{
+          position: 'relative',
+          borderLeft: `1px solid ${alpha(theme.palette.common.white, theme.palette.mode === 'dark' ? 0.08 : 0.18)}`,
+          ml: depth > 1 ? depth : 0,
+          '&::before':
+            depth > 1
+              ? {
+                content: '""',
+                position: 'absolute',
+                top: '50%',
+                left: 0,
+                width: '12px',
+                height: '1px',
+                backgroundColor: alpha(theme.palette.common.white, theme.palette.mode === 'dark' ? 0.12 : 0.22),
+              }
+              : {},
+        }}
+      >
+        <ListItemButton
+          onClick={handleClick}
+          sx={{
+            pl: depth > 1 ? depth * 0.75 : 0.75, // Room for the dash
+            pr: 0.75,
+            py: 0.35,
+            minHeight: 30,
+            display: 'flex',
+            justifyContent: 'space-between',
+            borderRadius: '12px',
+            backgroundColor:
+              activeItem || isOpen ? alpha('#596C83', theme.palette.mode === 'dark' ? 0.1 : 0.74) : 'transparent',
+            border: `1px solid ${activeItem ? alpha(theme.palette.common.white, theme.palette.mode === 'dark' ? 0.12 : 0.8) : 'transparent'
+              }`,
+            '&:hover': {
+              backgroundColor: alpha('#596C83', theme.palette.mode === 'dark' ? 0.08 : 0.58),
+              '& .MuiTypography-root': {
+                color: theme.palette.custom?.sidebarTextHover || '#ffffff',
+              },
+            },
+          }}
+        >
+          <Typography
+            variant="body2"
+            sx={{
+              margin: '5px 0px',
+              fontSize: '13px',
+              fontWeight: activeItem ? 700 : 500,
+              color: activeItem ? '#ffffff' : theme.palette.custom?.sidebarText || '#ffffff',
+            }}
+          >
+            {formatSidebarLabel(item.name)}
+          </Typography>
+
+          {hasSubGroups && (
+            <FontAwesomeIcon
+              icon={isOpen ? faMinus : faPlus}
+              size="xs"
+              style={{
+                fontSize: '10px',
+                color:
+                  activeItem || isOpen
+                    ? theme.palette.custom?.sidebarIconHover || '#ffffff'
+                    : theme.palette.custom?.sidebarIcon || '#9ca3af',
+              }}
+            />
+          )}
+        </ListItemButton>
+      </ListItem>
+
+      {hasSubGroups && (
+        <Collapse in={isOpen} timeout="auto" unmountOnExit>
+          <List component="div" disablePadding>
+            {item.subGroups.map((subItem) => (
+              <RecursiveNavItem
+                key={subItem.name}
+                item={subItem}
+                navigate={navigate}
+                pathname={pathname}
+                depth={depth + 1}
+              />
+            ))}
+          </List>
+        </Collapse>
+      )}
+    </Box>
+  );
+};
+
+RecursiveNavItem.propTypes = {
+  item: menuItemShape.isRequired,
+  navigate: PropTypes.func.isRequired,
+  pathname: PropTypes.string,
+  depth: PropTypes.number,
+};
+const SideBar = ({
+  orientation,
+  subGroups,
+  sideBarOrientation,
+  isVisible,
+  onToggle,
+  datatestid,
+  parentPosition = {
+    position: 'fixed',
+    left: 0,
+    top: 0,
+    height: '100%',
+    maxHeight: null,
+    drawerWidth: 80,
+  },
+  depth = 0,
+  bhashiniEnabled: bhashiniEnabledProp = false,
+}) => {
+  const theme = useTheme();
+  const [hoveredItem, setHoveredItem] = useState(null);
+  const [hoveredSubgroup, setHoveredSubgroup] = useState(null);
+  const [expandedItem, setExpandedItem] = useState(null);
+  const navigate = useNavigate();
+  const location = useLocation();
+
+  const [bhashiniEnabled, setBhashiniEnabled] = useState(bhashiniEnabledProp);
+  const [currentLanguageName, setCurrentLanguageName] = useState('English');
+
+  useEffect(() => {
+    setBhashiniEnabled(bhashiniEnabledProp);
+  }, [bhashiniEnabledProp]);
+
+  useEffect(() => {
+    if (depth !== 0) return;
+    const prefLang = localStorage.getItem('preferredLanguage') || 'en';
+    localStorage.setItem('selectedLang', prefLang);
+    setCurrentLanguageName(bhashiniLanguageMap[prefLang] || 'English');
+  }, [depth]);
+
+  useEffect(() => {
+    if (!bhashiniEnabled) return;
+    const handleBhashiniAction = (e) => {
+      const languageOption = e.target.closest ? e.target.closest('.language-option') : null;
+      if (languageOption) {
+        const selectedLanguage = languageOption.textContent?.trim();
+        if (selectedLanguage) {
+          setCurrentLanguageName(selectedLanguage);
+        }
+        localStorage.setItem('showCustomBhashiniToast', 'true');
+      }
+    };
+
+    const handleBhashiniKeyAction = (e) => {
+      if (e.key === 'Enter') handleBhashiniAction(e);
+    };
+
+    document.addEventListener('click', handleBhashiniAction, true);
+    document.addEventListener('keydown', handleBhashiniKeyAction, true);
+
+    let dropDownPolling = setInterval(() => {
+      const dropdown = document.getElementById('bhashiniLanguageDropdown');
+      if (dropdown) {
+        dropdown.querySelectorAll('.language-option').forEach((option) => {
+          const isSelected = option.textContent?.trim() === currentLanguageName;
+          option.setAttribute('aria-selected', isSelected ? 'true' : 'false');
+        });
+      }
+
+      if (dropdown && !document.getElementById('custom-bhashini-clear-btn')) {
+        const clearBtn = document.createElement('li');
+        clearBtn.id = 'custom-bhashini-clear-btn';
+        clearBtn.style.cssText =
+          'position: sticky; bottom: 0; left: 0; z-index: 10; background: white; padding: 4px; border-top: 1px solid #e5e7eb; width: 100%; display: flex; justify-content: flex-start; list-style: none;';
+
+        dropdown.appendChild(clearBtn);
+
+        const btn = document.createElement('button');
+        btn.style.cssText =
+          'display: flex; align-items: center; gap: 4px; color: #ef4444; font-size: 11px; font-weight: 600; padding: 4px 8px; border-radius: 4px; cursor: pointer; background: transparent; border: none; width: 100%; text-align: left;';
+
+        btn.innerHTML = '<span style="font-size: 12px; min-width: 12px; text-align: center;">✕</span> Clear / English';
+
+        btn.addEventListener('click', (e) => {
+          e.stopPropagation();
+          const currentLang = localStorage.getItem('preferredLanguage');
+          if (currentLang === 'en') return;
+          localStorage.setItem('preferredLanguage', 'en');
+          localStorage.setItem('selectedLang', 'en');
+          window.location.reload();
+        });
+
+        clearBtn.appendChild(btn);
+      }
+    }, 500);
+
+    const toastObserver = new MutationObserver((mutations) => {
+      mutations.forEach((mutation) => {
+        mutation.addedNodes.forEach((node) => {
+          if (
+            node.nodeType === Node.ELEMENT_NODE &&
+            node.classList &&
+            node.classList.contains('bhashini-toast') &&
+            !node.classList.contains('custom-bhashini-toast')
+          ) {
+            node.style.display = 'none';
+
+            if (localStorage.getItem('showCustomBhashiniToast') === 'true') {
+              localStorage.removeItem('showCustomBhashiniToast');
+
+              const customToast = document.createElement('div');
+              customToast.className = 'custom-bhashini-toast';
+              customToast.textContent = node.textContent;
+              document.body.appendChild(customToast);
+
+              setTimeout(() => {
+                if (document.body.contains(customToast)) {
+                  customToast.style.opacity = '0';
+                  setTimeout(() => {
+                    if (document.body.contains(customToast)) {
+                      document.body.removeChild(customToast);
+                    }
+                  }, 300);
+                }
+              }, 10000);
+            }
+          }
+        });
+      });
+    });
+
+    toastObserver.observe(document.body, { childList: true, subtree: false });
+
+    return () => {
+      clearInterval(dropDownPolling);
+      toastObserver.disconnect();
+      document.removeEventListener('click', handleBhashiniAction, true);
+      document.removeEventListener('keydown', handleBhashiniKeyAction, true);
+    };
+  }, [bhashiniEnabled, currentLanguageName]);
+
+  useEffect(() => {
+    const activeGroup = subGroups?.find((item) => item.subGroups?.length && isItemActive(item, location.pathname));
+    if (activeGroup) {
+      setExpandedItem(activeGroup.name);
+    }
+  }, [location.pathname, subGroups]);
+
+  useScript(
+    'https://translation-plugin.bhashini.co.in/v3/website_translation_utility.js',
+    'bhashini-translation-script',
+    !bhashiniEnabled,
+    true
+  );
+
+  const iconComponents = {
+    fhs: faUserGroup,
+    admin: faUserGear,
+    training: faBookOpen,
+    ncd: faHeartPulse,
+    mch: faBoxOpen,
+    manage: faGear,
+    reports: faFileLines,
+    vbd: faMosquito,
+    rch: faPersonBreastfeeding,
+    tbi: faAward,
+  };
+
+  const getIcon = (name) => {
+    const Icon = iconComponents[name];
+    if (!Icon) return null;
+    return (
+      <Grid
+        className="flex items-center justify-center"
+        sx={{
+          width: orientation === 'horizontal' ? 30 : 40,
+          height: orientation === 'horizontal' ? 30 : 40,
+          borderRadius: orientation === 'horizontal' ? '10px' : '14px',
+          background: hoveredItem === name ? alpha('#ffffff', 0.16) : alpha('#ffffff', 0.08),
+          border: `1px solid ${alpha('#ffffff', hoveredItem === name ? 0.16 : 0.08)}`,
+        }}
+      >
+        <FontAwesomeIcon
+          icon={Icon}
+          className={`${orientation !== 'horizontal' ? 'text-lg' : 'text-sm'} transition-colors duration-200`}
+          style={{
+            color:
+              hoveredItem === name
+                ? theme.palette.custom?.sidebarIconHover || '#ffffff'
+                : theme.palette.custom?.sidebarIcon || '#9ca3af', // theme fallback
+          }}
+        />
+      </Grid>
+    );
+  };
+
+  const handleMouseEnter = (subgroup, event) => {
+    const rect = event.currentTarget.getBoundingClientRect();
+    let position;
+
+    if (orientation === 'horizontal') {
+      position = {
+        left: rect.left,
+        top: rect.bottom,
+        drawerWidth: rect.right - rect.left,
+        position: 'fixed',
+      };
+    } else {
+      const subgroupWidth = 260; // Adjust width based on depth
+      const windowWidth = window.innerWidth;
+      const potentialRight = rect.right + subgroupWidth;
+      const adjustLeft = potentialRight > windowWidth;
+
+      position = {
+        left: adjustLeft ? rect.left - subgroupWidth : rect.right + rect.left,
+        top: rect.top,
+        drawerWidth: subgroupWidth,
+        position: 'fixed',
+      };
+    }
+
+    if (subgroup?.subGroups?.length > 10) {
+      setHoveredSubgroup({
+        subgroup,
+        position: {
+          ...position,
+          //here this subGroup id is written to differentiate between parent group and its subGroup
+          top:
+            orientation === 'vertical' && sideBarOrientation === 'vertical'
+              ? 0
+              : (() => (subgroup.id ? rect.top : rect.bottom))(),
+          height: '100%',
+        },
+      });
+    } else {
+      setHoveredSubgroup({
+        subgroup,
+        position: {
+          ...position,
+          top: orientation === 'vertical' ? rect.top : rect.bottom,
+        },
+      });
+    }
+
+    setHoveredItem(subgroup.name);
+  };
+
+  const handleMouseLeave = () => {
+    setHoveredItem(null);
+    setHoveredSubgroup(null);
+  };
+
+  const rootVerticalSidebar = depth === 0 && orientation === 'vertical' && sideBarOrientation === 'vertical';
+  const hoveredPrimaryItem = subGroups?.find((item) => item.name === hoveredItem && item.subGroups?.length);
+  const hoveredPrimaryLabel = formatSidebarLabel(hoveredPrimaryItem?.name || 'Navigation');
+  const hoveredPrimaryTitle = formatSidebarLabel(
+    hoveredPrimaryItem?.displayName || hoveredPrimaryItem?.name || 'Select a menu'
+  );
+
+  return (
+    <Box className="flex" onMouseLeave={handleMouseLeave} data-testid={datatestid}>
+      <Drawer
+        variant="permanent"
+        sx={{
+          '& .MuiDrawer-paper': {
+            width: rootVerticalSidebar
+              ? '96px'
+              : orientation === 'horizontal'
+                ? '100%'
+                : sideBarOrientation === 'horizontal'
+                  ? '100%'
+                  : parentPosition.drawerWidth,
+            height: rootVerticalSidebar
+              ? 'calc(100vh - 72px)'
+              : orientation === 'horizontal'
+                ? 'fit-content'
+                : sideBarOrientation === 'horizontal'
+                  ? 'fit-content'
+                  : parentPosition.height,
+            boxSizing: 'border-box',
+            position: parentPosition.position,
+            left:
+              typeof parentPosition.left === 'number'
+                ? sideBarOrientation === 'horizontal'
+                  ? '0'
+                  : `${parentPosition.left}px`
+                : 'unset',
+            top:
+              typeof parentPosition.top === 'number'
+                ? sideBarOrientation === 'horizontal' && depth === 0
+                  ? '80px'
+                  : rootVerticalSidebar
+                    ? '72px'
+                    : depth === 0
+                      ? '84px'
+                      : `${parentPosition.top}px`
+                : 'unset',
+            maxHeight:
+              sideBarOrientation === 'horizontal'
+                ? `calc(${parentPosition.height} - 92px)`
+                : rootVerticalSidebar
+                  ? 'calc(100vh - 72px)'
+                  : depth === 0
+                    ? `calc(${parentPosition.height} - 104px)`
+                    : `calc(${parentPosition.height})`,
+            background:
+              theme.palette.mode === 'dark'
+                ? theme.palette.custom.sidebarBg
+                : 'linear-gradient(180deg, rgba(28, 52, 85, 0.96) 0%, rgba(17, 39, 68, 0.98) 100%)',
+            border: `1px solid ${depth === 0 ? alpha(theme.palette.common.white, 0.08) : alpha(theme.palette.common.white, 0.12)
+              }`,
+            borderRight: rootVerticalSidebar ? 'none' : undefined,
+            borderRadius: rootVerticalSidebar ? 0 : orientation === 'horizontal' ? '5px' : depth === 0 ? '28px' : '0',
+            marginLeft: rootVerticalSidebar ? 0 : orientation === 'horizontal' ? '0px' : depth === 0 ? '12px' : 0,
+            marginRight: orientation === 'horizontal' ? '0px' : 0,
+            boxShadow: rootVerticalSidebar
+              ? '12px 0 30px rgba(2, 8, 23, 0.18)'
+              : depth === 0
+                ? '0 26px 60px rgba(2, 8, 23, 0.34)'
+                : '0 18px 38px rgba(2, 8, 23, 0.28)',
+            backdropFilter: 'blur(20px)',
+            overflow: rootVerticalSidebar ? 'visible' : 'hidden',
+            transition: 'transform 0.3s ease-in-out, opacity 0.3s ease-in-out',
+            transform: (() => {
+              if (parentPosition.left === 0 && typeof isVisible !== 'undefined' && orientation !== 'horizontal') {
+                return isVisible ? 'translateX(0)' : 'translateX(-100%)';
+              }
+              return 'translateX(0)';
+            })(),
+            opacity: orientation === 'horizontal' ? (() => (isVisible ? 1 : 0))() : 1,
+            pointerEvents: (() => {
+              if (orientation === 'horizontal') {
+                return isVisible ? 'auto' : 'none';
+              }
+
+              if (parentPosition.left === 0 && typeof isVisible !== 'undefined') {
+                return isVisible ? 'auto' : 'none';
+              }
+
+              return 'auto';
+            })(),
+          },
+        }}
+      >
+        {rootVerticalSidebar ? (
+          <Box sx={{ position: 'relative', height: '100%' }}>
+            <List
+              className="sidebar-scroll"
+              sx={{
+                width: 96,
+                height: '100%',
+                display: 'flex',
+                flexDirection: 'column',
+                gap: 0.75,
+                padding: '12px 8px',
+                borderRight: 'none',
+                overflowY: 'scroll',
+                flexShrink: 0,
+              }}
+            >
+              {subGroups?.map((item) => {
+                const activeItem = isItemActive(item, location.pathname);
+                const hasIcon = Boolean(iconComponents[item.name]);
+
+                return (
+                  <ListItem key={item.name} disablePadding sx={{ display: 'block' }}>
+                    <ListItemButton
+                      data-testid={`sidebar-listitembutton-${item.name}`}
+                      onMouseEnter={() => {
+                        setHoveredItem(item.subGroups?.length ? item.name : null);
+                      }}
+                      onClick={() => {
+                        if (!item.subGroups?.length) {
+                          navigateToItem(item, navigate);
+                        }
+                      }}
+                      sx={{
+                        minHeight: 76,
+                        borderRadius: '22px',
+                        px: 1,
+                        py: 1.1,
+                        display: 'flex',
+                        flexDirection: 'column',
+                        justifyContent: 'center',
+                        gap: 0.75,
+                        background: hoveredItem === item.name ? alpha('#ffffff', 0.1) : 'transparent',
+                        border: `1px solid ${activeItem ? alpha('#ffffff', 0.08) : alpha('#ffffff', 0.06)}`,
+                        '&:hover': {
+                          background: alpha('#ffffff', 0.1),
+                        },
+                      }}
+                    >
+                      {hasIcon ? (
+                        getIcon(item.name)
+                      ) : (
+                        <Box
+                          sx={{
+                            width: 36,
+                            height: 36,
+                            display: 'grid',
+                            placeItems: 'center',
+                            borderRadius: '12px',
+                            background: alpha('#ffffff', 0.08),
+                            color: '#ffffff',
+                            fontWeight: 800,
+                          }}
+                        >
+                          {item.name?.charAt(0)?.toUpperCase()}
+                        </Box>
+                      )}
+                      <Typography
+                        sx={{
+                          width: '100%',
+                          textAlign: 'center',
+                          fontSize: '0.7rem',
+                          lineHeight: 1.15,
+                          color: '#ffffff',
+                          fontWeight: activeItem ? 700 : 500,
+                        }}
+                      >
+                        {formatSidebarLabel(item.name)}
+                      </Typography>
+                    </ListItemButton>
+                  </ListItem>
+                );
+              })}
+
+              {bhashiniEnabled && (
+                <ListItem disablePadding sx={{ display: 'block', mt: 'auto' }}>
+                  <ListItemButton
+                    sx={{
+                      minHeight: 76,
+                      borderRadius: '22px',
+                      mx: 1,
+                      mb: 0.75,
+                      display: 'flex',
+                      flexDirection: 'column',
+                      justifyContent: 'center',
+                      gap: 0.75,
+                      background: 'transparent',
+                      border: `1px solid ${alpha('#ffffff', 0.06)}`,
+                      '&:hover': {
+                        background: alpha('#ffffff', 0.1),
+                      },
+                    }}
+                  >
+                    <div className="bhashini-plugin-container flex justify-center items-center w-full relative min-h-[40px]"></div>
+                  </ListItemButton>
+                </ListItem>
+              )}
+
+              {!GeneralUtil.isTecho && !GeneralUtil.isEkavach && !GeneralUtil.isSewaRural && (
+                <Box sx={{ mt: bhashiniEnabled ? 0 : 'auto', px: 1, pb: 0.5 }}>
+                  <Box
+                    sx={{
+                      display: 'grid',
+                      placeItems: 'center',
+                      borderRadius: '18px',
+                      minHeight: 56,
+                      marginTop: 0.75,
+                      background: alpha('#ffffff', 0.06),
+                      border: `1px solid ${alpha('#ffffff', 0.08)}`,
+                    }}
+                  >
+                    <img src={medplatFavIcon} className="h-[30px] w-[30px]" alt="medplat-logo" />
+                  </Box>
+                </Box>
+              )}
+            </List>
+
+            {hoveredPrimaryItem && (
+              <Box
+                sx={{
+                  position: 'absolute',
+                  top: 0,
+                  left: 95,
+                  width: 260,
+                  height: '100%',
+                  display: 'flex',
+                  flexDirection: 'column',
+                  minWidth: 0,
+                  background:
+                    theme.palette.mode === 'dark'
+                      ? theme.palette.custom.sidebarBg
+                      : 'linear-gradient(180deg, rgba(28, 52, 85, 0.98) 0%, rgba(17, 39, 68, 0.98) 100%)',
+                  border: `1px solid ${alpha('#ffffff', 0.08)}`,
+                  borderLeft: 'none',
+                  boxShadow: '16px 0 36px rgba(2, 8, 23, 0.22)',
+                  // borderRadius: '0 24px 24px 0',
+                  overflow: 'hidden',
+                }}
+              >
+                <Box
+                  sx={{
+                    px: 2.5,
+                    py: 2.25,
+                    borderBottom: `1px solid ${alpha('#ffffff', 0.08)}`,
+                    background: alpha('#ffffff', 0.03),
+                    display: 'flex',
+                    alignItems: 'flex-start',
+                    justifyContent: 'space-between',
+                    gap: 1.5,
+                  }}
+                >
+                  <Box sx={{ minWidth: 0 }}>
+                    <Typography
+                      sx={{
+                        fontSize: '0.78rem',
+                        letterSpacing: '0.14em',
+                        textTransform: 'uppercase',
+                        color: alpha('#ffffff', 0.75),
+                      }}
+                    >
+                      {hoveredPrimaryLabel}
+                    </Typography>
+                    {hoveredPrimaryTitle.toLowerCase() !== hoveredPrimaryLabel.toLowerCase() && (
+                      <Typography sx={{ mt: 0.8, fontSize: '1.15rem', fontWeight: 700, color: '#ffffff' }}>
+                        {hoveredPrimaryTitle}
+                      </Typography>
+                    )}
+                  </Box>
+                  {onToggle && (
+                    <ButtonBase
+                      onClick={onToggle}
+                      sx={{
+                        width: 32,
+                        height: 32,
+                        borderRadius: '14px',
+                        background: alpha('#ffffff', 0.07),
+                        border: `1px solid ${alpha('#ffffff', 0.12)}`,
+                        color: '#ffffff',
+                        '&:hover': {
+                          background: alpha('#ffffff', 0.12),
+                        },
+                      }}
+                      data-testid="sidebar-close-menu"
+                    >
+                      <FontAwesomeIcon icon={faXmark} size="xs" />
+                    </ButtonBase>
+                  )}
+                </Box>
+
+                <List
+                  className="sidebar-scroll"
+                  sx={{
+                    px: 1.5,
+                    py: 1.5,
+                    overflowY: 'auto',
+                    flex: 1,
+                  }}
+                >
+                  {hoveredPrimaryItem.subGroups.map((subItem) => (
+                    <RecursiveNavItem
+                      key={subItem.name}
+                      item={subItem}
+                      navigate={navigate}
+                      pathname={location.pathname}
+                    />
+                  ))}
+                </List>
+              </Box>
+            )}
+          </Box>
+        ) : (
+          <List
+            className="sidebar-scroll"
+            sx={{
+              display: 'flex',
+              flexDirection: orientation === 'horizontal' ? 'row' : 'column',
+              gap: orientation === 'horizontal' ? 0.25 : 0.5,
+              padding: depth === 0 ? (orientation === 'horizontal' ? '8px' : '14px 10px') : '10px',
+              overflowY: orientation === 'vertical' ? 'scroll' : 'auto',
+              height: '100%',
+            }}
+          >
+            {sideBarOrientation === 'horizontal' && depth > 0 ? (
+              <Grid className="flex overflow-x-auto h-full">
+                {(() => {
+                  const containerWidth = window.innerWidth;
+                  const columnWidth = 250;
+                  const maxColumns = Math.floor(containerWidth / columnWidth);
+
+                  let flattenedItems = [];
+
+                  subGroups.forEach((item) => {
+                    flattenedItems.push(item);
+
+                    if (expandedItem === item.name && item.subGroups?.length > 0) {
+                      item.subGroups.forEach((subItem) => {
+                        flattenedItems.push({
+                          ...subItem,
+                          _isSubItem: true,
+                          _parentName: item.name,
+                        });
+                      });
+                    }
+                  });
+
+                  const totalItems = flattenedItems.length;
+                  const baseItemsPerColumn = Math.floor(totalItems / maxColumns);
+                  const extraItems = totalItems % maxColumns;
+
+                  const columns = [];
+                  let currentIndex = 0;
+
+                  for (let col = 0; col < maxColumns && currentIndex < totalItems; col++) {
+                    const itemsInThisColumn = col < extraItems ? baseItemsPerColumn + 1 : baseItemsPerColumn;
+
+                    if (itemsInThisColumn === 0) continue;
+
+                    const columnItems = [];
+                    for (let i = 0; i < itemsInThisColumn && currentIndex < totalItems; i++) {
+                      columnItems.push(flattenedItems[currentIndex]);
+                      currentIndex++;
+                    }
+
+                    columns.push(columnItems);
+                  }
+
+                  return columns.map((columnItems, colIndex) => (
+                    <Grid
+                      key={colIndex}
+                      sx={{
+                        width: `${columnWidth}px`,
+                        padding: '6px',
+                        borderRadius: '16px',
+                        background: alpha('#ffffff', 0.08),
+                        border: `1px solid ${alpha('#ffffff', 0.08)}`,
+                      }}
+                      className="inline-flex flex-col mr-2 max-h-full"
+                    >
+                      {columnItems.map((item) =>
+                        item._isSubItem ? (
+                          <ListItem key={`${item._parentName}-sub-${item.name}`} disablePadding>
+                            <List component="div" disablePadding sx={{ pl: 1, width: '100%' }}>
+                              <RecursiveNavItem
+                                key={item.name}
+                                item={item}
+                                navigate={navigate}
+                                pathname={location.pathname}
+                              />
+                            </List>
+                            {/* <ListItemButton
+                            onClick={() => {
+                              const path = GeneralUtil.naviagationFunc(item);
+                              navigate(path);
+                            }}
+                            sx={{
+                              py: 0.5,
+                              minHeight: 32,
+                            }}
+                          >
+                            <Typography
+                              variant="body2"
+                              sx={{
+                                fontSize: '0.85rem',
+                                fontWeight: 400,
+                              }}
+                            >
+                              {item.name}
+                            </Typography>
+                          </ListItemButton> */}
+                          </ListItem>
+                        ) : (
+                          <ListItem
+                            key={item.name}
+                            disablePadding
+                            onMouseEnter={(event) => handleMouseEnter(item, event)}
+                            data-testid={`sidebar-listitem-${item.name}`}
+                            sx={{
+                              width: orientation === 'horizontal' ? 'fit-content' : '100%',
+                              borderTop: 'none',
+                              borderLeft: 'none',
+                              my: 0.25,
+                            }}
+                            className="flex flex-col"
+                            onClick={() => {
+                              setExpandedItem(expandedItem === item.name ? null : item.name);
+                            }}
+                          >
+                            <ListItemButton
+                              sx={{
+                                padding: '5px 6px',
+                                display: 'flex',
+                                alignItems: 'center',
+                                width: '100%',
+                                justifyContent: 'space-between',
+                                borderRadius: '14px',
+                                border: `1px solid ${isItemActive(item, location.pathname)
+                                  ? alpha('#ffffff', 0.18)
+                                  : alpha('#ffffff', 0.05)
+                                  }`,
+                                '&:hover': {
+                                  backgroundColor: alpha('#ffffff', 0.1),
+                                },
+                                background: isItemActive(item, location.pathname)
+                                  ? 'linear-gradient(180deg, rgba(255,255,255,0.14) 0%, rgba(255,255,255,0.06) 100%)'
+                                  : hoveredItem === item.name
+                                    ? alpha('#ffffff', 0.08)
+                                    : 'transparent',
+                              }}
+                              data-testid={`sidebar-listitembutton-${item.name}`}
+                            >
+                              <Grid
+                                container
+                                className={`flex items-center flex-1 ${orientation === 'horizontal'
+                                  ? 'justify-center'
+                                  : (() => {
+                                    return parentPosition.left === 0 ? 'justify-center' : 'justify-start';
+                                  })()
+                                  }`}
+                                data-testid={`sidebar-listitemdiv-${item.name}`}
+                              >
+                                <Grid item="true" className="flex flex-col items-center">
+                                  {getIcon(item.name) && (
+                                    <Grid
+                                      sx={{
+                                        padding: 0,
+                                        borderRadius: '99px',
+                                        display: 'flex',
+                                        width: '100%',
+                                      }}
+                                    >
+                                      <Grid>{getIcon(item.name)}</Grid>
+                                      {orientation === 'horizontal' && (
+                                        <Grid
+                                          className="px-1"
+                                          sx={{
+                                            color: isItemActive(item, location.pathname)
+                                              ? '#ffffff'
+                                              : theme.palette.custom?.sidebarText || '#ffffff',
+                                            fontSize: '13px',
+                                            fontWeight: isItemActive(item, location.pathname) ? 700 : 600,
+                                            lineHeight: 1.05,
+                                          }}
+                                        >
+                                          {formatSidebarLabel(item.name)}
+                                        </Grid>
+                                      )}
+                                    </Grid>
+                                  )}
+                                  <Grid
+                                    onClick={(e) => {
+                                      if (!item.subGroups?.length) {
+                                        e.stopPropagation();
+                                        navigateToItem(item, navigate);
+                                      }
+                                    }}
+                                  >
+                                    {!getIcon(item.name) && (
+                                      <Typography
+                                        variant="body2"
+                                        data-testid={`sidebar-listitemtext-${item.name}`}
+                                        className="pl-3"
+                                        sx={{
+                                          color: isItemActive(item, location.pathname)
+                                            ? '#ffffff'
+                                            : hoveredItem === item.name
+                                              ? theme.palette.custom?.sidebarTextHover || '#ffffff'
+                                              : theme.palette.custom?.sidebarText || '#9ca3af',
+                                          maxWidth: '180px',
+                                          overflow: 'hidden',
+                                          textOverflow: 'ellipsis',
+                                          whiteSpace: 'nowrap',
+                                          display: 'block',
+                                        }}
+                                      >
+                                        {item.name}
+                                      </Typography>
+                                    )}
+                                  </Grid>
+                                </Grid>
+                              </Grid>
+
+                              {!getIcon(item.name) && (
+                                <Grid
+                                  className="pl-3 flex flex-row items-center justify-end w-5 mr-[4px]"
+                                  sx={{
+                                    color: isItemActive(item, location.pathname)
+                                      ? '#ffffff'
+                                      : hoveredItem === item.name
+                                        ? theme.palette.custom?.sidebarTextHover || '#ffffff'
+                                        : theme.palette.custom?.sidebarText || '#9ca3af',
+                                  }}
+                                  onClick={() => {
+                                    setExpandedItem(expandedItem === item.name ? null : item.name);
+                                  }}
+                                >
+                                  {item.subGroups?.length > 0 &&
+                                    (() => {
+                                      if (!item.subGroups?.length) return null;
+
+                                      const isHovered = expandedItem === item.name;
+
+                                      // if (orientation === 'horizontal') {
+                                      //   return isHovered ? <ExpandMore /> : <ExpandLess />;
+                                      // }
+
+                                      return isHovered ? (
+                                        <FontAwesomeIcon icon={faMinus} />
+                                      ) : (
+                                        <FontAwesomeIcon icon={faPlus} />
+                                      );
+                                    })()}
+                                </Grid>
+                              )}
+                            </ListItemButton>
+                          </ListItem>
+                        )
+                      )}
+                    </Grid>
+                  ));
+                })()}
+              </Grid>
+            ) : (
+              <>
+                {/* {depth === 0 && (
+                <ListItem
+                  disablePadding
+                  sx={{
+                    width: orientation === 'horizontal' ? 'fit-content' : '100%',
+                    borderTop: orientation === 'vertical' ? '1px solid rgba(255, 255, 255, 0.09)' : 'none',
+                    borderLeft: orientation === 'horizontal' ? '1px solid rgba(255, 255, 255, 0.09)' : 'none',
+                    aspectRatio: depth === 0 && orientation === 'vertical' ? '1' : 'auto',
+                    backgroundColor: 'var(--color-primary)',
+                    borderRadius: '999px',
+                  }}
+                  className={`flex flex-col ${orientation === 'vertical' ? 'mb-1' : 'mr-1'}`}
+                >
+                  <ListItemButton
+                    sx={{
+                      padding: '8px 5px',
+                      display: 'flex',
+                      alignItems: 'center',
+                      width: '100%',
+                      justifyContent: 'space-between',
+                      borderRadius: '999px',
+                      color: 'white',
+                    }}
+                  >
+                    <Grid container className="flex items-center flex-1 justify-center">
+                      <Grid item className="flex flex-col w-full">
+                        <Grid
+                          sx={{
+                            display: 'flex',
+                            width: '100%',
+                          }}
+                          onClick={(e) => {
+                            e.preventDefault();
+                            navigate('/ui/medplat/dashboard/webtasks');
+                          }}
+                        >
+                          <Grid
+                            className={`mx-auto ${orientation === 'horizontal' ? 'pl-2' : ''} flex items-center justify-center`}
+                          >
+                            <FontAwesomeIcon icon={faBorderAll} className="text-2xl" />
+                          </Grid>
+                          {orientation === 'horizontal' && <Grid className="px-2">Dashboard</Grid>}
+                        </Grid>
+                      </Grid>
+                    </Grid>
+                  </ListItemButton>
+                </ListItem>
+              )} */}
+
+                {subGroups?.map((item) => {
+                  const activeItem = isItemActive(item, location.pathname);
+                  const hasIcon = Boolean(iconComponents[item.name]);
+
+                  return (
+                    <ListItem
+                      key={item.name}
+                      disablePadding
+                      onMouseEnter={(event) => handleMouseEnter(item, event)}
+                      data-testid={`sidebar-listitem-${item.name}`}
+                      sx={{
+                        width: orientation === 'horizontal' ? 'fit-content' : '100%',
+                        borderTop: 'none',
+                        borderLeft: 'none',
+                        aspectRatio: depth === 0 && orientation === 'vertical' ? '1' : 'auto',
+                        mb: orientation === 'horizontal' ? 0 : 0.5,
+                      }}
+                      className="flex flex-col"
+                      onClick={() => {
+                        setExpandedItem(expandedItem === item.name ? null : item.name);
+                      }}
+                    >
+                      <ListItemButton
+                        sx={{
+                          padding:
+                            depth === 0 && orientation !== 'horizontal'
+                              ? '12px 6px'
+                              : orientation === 'horizontal'
+                                ? '6px 8px'
+                                : '10px 8px',
+                          display: 'flex',
+                          alignItems: 'center',
+                          width: '100%',
+                          justifyContent: 'space-between',
+                          borderRadius:
+                            depth === 0 && orientation !== 'horizontal'
+                              ? '22px'
+                              : orientation === 'horizontal'
+                                ? '16px'
+                                : '18px',
+                          border: `1px solid ${activeItem ? alpha('#ffffff', 0.08) : alpha('#ffffff', 0.05)}`,
+                          boxShadow:
+                            activeItem && orientation !== 'horizontal'
+                              ? 'inset 0 1px 0 rgba(255,255,255,0.06)'
+                              : 'none',
+                          '&:hover': {
+                            backgroundColor: alpha('#ffffff', 0.12),
+                            '& .MuiTypography-root': {
+                              color: theme.palette.custom?.sidebarTextHover || '#ffffff',
+                            },
+                          },
+                          background:
+                            activeItem && orientation !== 'horizontal'
+                              ? 'linear-gradient(180deg, rgba(255,255,255,0.16) 0%, rgba(255,255,255,0.08) 100%)'
+                              : hoveredItem === item.name
+                                ? alpha('#ffffff', 0.08)
+                                : 'transparent',
+                        }}
+                        data-testid={`sidebar-listitembutton-${item.name}`}
+                      >
+                        <Grid
+                          container
+                          className={`flex items-center flex-1 ${orientation === 'horizontal'
+                            ? 'justify-center'
+                            : (() => {
+                              return parentPosition.left === 0 ? 'justify-center' : 'justify-start';
+                            })()
+                            }`}
+                          data-testid={`sidebar-listitemdiv-${item.name}`}
+                        >
+                          <Grid item="true" className="w-full">
+                            {hasIcon && (
+                              <Grid
+                                className="flex items-center justify-between"
+                                sx={{
+                                  padding: orientation === 'horizontal' ? '0px 1px' : 0,
+                                  borderRadius: '99px',
+                                  display: 'flex',
+                                  width: '100%',
+                                }}
+                              >
+                                {orientation === 'horizontal' && (
+                                  <>
+                                    <Grid className="mx-auto">{getIcon(item.name)}</Grid>
+                                    <Grid
+                                      className="px-1.5"
+                                      sx={{
+                                        color: activeItem ? '#ffffff' : theme.palette.custom?.sidebarText || '#ffffff',
+                                        fontSize: '13px',
+                                        fontWeight: activeItem ? 700 : 600,
+                                        lineHeight: 1.1,
+                                      }}
+                                    >
+                                      {formatSidebarLabel(item.name)}
+                                    </Grid>
+                                  </>
+                                )}
+                                {orientation !== 'horizontal' && (
+                                  <Grid className="flex flex-col items-center justify-center w-full">
+                                    <Grid className="mx-auto">{getIcon(item.name)}</Grid>
+                                    <Typography
+                                      variant="caption"
+                                      sx={{
+                                        color: activeItem ? '#ffffff' : theme.palette.custom?.sidebarText || '#ffffff',
+                                        fontSize: '11px',
+                                        fontWeight: activeItem ? 700 : 600,
+                                        lineHeight: 1.3,
+                                        textAlign: 'center',
+                                        mt: 1,
+                                        padding: '0px 2px',
+                                        width: '100%',
+                                        overflow: 'hidden',
+                                        letterSpacing: '0.01em',
+                                      }}
+                                    >
+                                      {formatSidebarLabel(item.name)}
+                                    </Typography>
+                                  </Grid>
+                                )}
+                              </Grid>
+                            )}
+                            <Grid
+                              onClick={() => {
+                                if (!item.subGroups?.length) {
+                                  navigateToItem(item, navigate);
+                                }
+                              }}
+                            >
+                              {!hasIcon && (
+                                <Typography
+                                  variant="body2"
+                                  data-testid={`sidebar-listitemtext-${item.name}`}
+                                  className="pl-3"
+                                  sx={{
+                                    color: activeItem
+                                      ? '#ffffff'
+                                      : hoveredItem === item.name
+                                        ? theme.palette.custom?.sidebarTextHover || '#ffffff'
+                                        : theme.palette.custom?.sidebarText || '#ffffff',
+                                    maxWidth: '180px',
+                                    overflow: 'hidden',
+                                    textOverflow: 'ellipsis',
+                                    whiteSpace: 'nowrap',
+                                    display: 'block',
+                                    fontWeight: activeItem || hoveredItem === item.name ? 700 : 500,
+                                  }}
+                                >
+                                  {formatSidebarLabel(item.name)}
+                                </Typography>
+                              )}
+                            </Grid>
+                          </Grid>
+                        </Grid>
+
+                        {!hasIcon && (
+                          <Grid
+                            className="pl-3 flex flex-row items-center justify-end w-5 mr-[4px]"
+                            sx={{
+                              color: activeItem
+                                ? '#ffffff'
+                                : hoveredItem === item.name
+                                  ? theme.palette.custom?.sidebarTextHover || '#ffffff'
+                                  : theme.palette.custom?.sidebarText || '#ffffff',
+                            }}
+                            onClick={(e) => {
+                              e.stopPropagation();
+                              setExpandedItem(expandedItem === item.name ? null : item.name);
+                            }}
+                          >
+                            {item.subGroups?.length > 0 &&
+                              (() => {
+                                if (!item.subGroups?.length) return null;
+                                const isHovered = expandedItem === item.name;
+                                return isHovered ? (
+                                  <FontAwesomeIcon icon={faMinus} />
+                                ) : (
+                                  <FontAwesomeIcon icon={faPlus} />
+                                );
+                              })()}
+                          </Grid>
+                        )}
+                      </ListItemButton>
+
+                      {depth >= 1 && item.subGroups?.length > 0 && (
+                        <Collapse
+                          in={expandedItem === item.name}
+                          timeout="auto"
+                          unmountOnExit
+                          sx={{ marginRight: 'auto', width: '100%' }}
+                          className="w-full"
+                        >
+                          <List component="div" disablePadding sx={{ pl: 2 }}>
+                            {item.subGroups.map((subItem) => (
+                              <RecursiveNavItem
+                                key={subItem.name}
+                                item={subItem}
+                                navigate={navigate}
+                                pathname={location.pathname}
+                              />
+                            ))}
+                          </List>
+                        </Collapse>
+                      )}
+                    </ListItem>
+                  );
+                })}
+              </>
+            )}
+            {bhashiniEnabled && (
+              <Box sx={{ mt: 'auto', px: 1, pb: 1, display: 'flex', justifyContent: 'center' }}>
+                <ListItemButton
+                  sx={{
+                    minHeight: orientation === 'horizontal' ? 40 : 48,
+                    borderRadius: orientation === 'horizontal' ? '12px' : '22px',
+                    display: 'flex',
+                    flexDirection: orientation === 'horizontal' ? 'row' : 'column',
+                    justifyContent: 'center',
+                    background: 'transparent',
+                    border: `1px solid ${alpha('#ffffff', 0.06)}`,
+                    '&:hover': {
+                      background: alpha('#ffffff', 0.1),
+                    },
+                    width: '100%'
+                  }}
+                >
+                  <div className="bhashini-plugin-container flex justify-center items-center w-full relative min-h-[40px]"></div>
+                </ListItemButton>
+              </Box>
+            )}
+          </List>
+        )}
+        {isVisible &&
+          !rootVerticalSidebar &&
+          !GeneralUtil.isTecho &&
+          !GeneralUtil.isEkavach &&
+          !GeneralUtil.isSewaRural && (
+            <Portal>
+              <div
+                className={`fixed group z-[1200] ${orientation === 'vertical' ? 'bottom-4 left-6' : 'top-22 right-3'}`}
+              >
+                {/* Small Icon */}
+                <img
+                  src={medplatFavIcon}
+                  className="h-[40px] mb-2 cursor-pointer rounded-[14px] hidden lg:block"
+                  style={{
+                    border: `1px solid ${alpha('#ffffff', 0.12)}`,
+                    boxShadow: '0 14px 26px rgba(2, 8, 23, 0.3)',
+                  }}
+                  alt="medplat-logo"
+                />
+
+                {/* Big Floating Icon */}
+                <img
+                  src={medplatLogo}
+                  className={`absolute   object-contain 
+          opacity-0 scale-90 
+          group-hover:opacity-100 group-hover:scale-400
+          transition-all duration-300
+          ${orientation === 'vertical' ? 'bottom-6.5 left-30' : 'top-4 right-30'}`}
+                  alt="medplat-floating-logo"
+                />
+              </div>
+            </Portal>
+          )}
+      </Drawer>
+      {depth === 0 && hoveredSubgroup?.subgroup?.subGroups && (
+        <SideBar
+          subGroups={hoveredSubgroup.subgroup.subGroups}
+          parentPosition={hoveredSubgroup.position}
+          datatestid={`sidebar-subgroup-sidebar-${hoveredSubgroup.subgroup.name}`}
+          orientation="vertical"
+          sideBarOrientation={orientation}
+          depth={depth + 1}
+          bhashiniEnabled={bhashiniEnabled}
+        />
+      )}
+    </Box>
+  );
+};
+
+SideBar.propTypes = {
+  orientation: PropTypes.oneOf(['vertical', 'horizontal']).isRequired,
+  sideBarOrientation: PropTypes.oneOf(['vertical', 'horizontal']).isRequired,
+  subGroups: PropTypes.arrayOf(menuItemShape),
+  isVisible: PropTypes.bool,
+  onToggle: PropTypes.func,
+  parentPosition: PropTypes.shape({
+    position: PropTypes.string,
+    left: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+    top: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+    height: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+    maxHeight: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.oneOf([null])]),
+    drawerWidth: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  }),
+  datatestid: PropTypes.string,
+  depth: PropTypes.number,
+  bhashiniEnabled: PropTypes.bool,
+};
+
+export default SideBar;