percona · pmcf-percona · Mar 19, 2026 · Mar 19, 2026 · Mar 19, 2026 · Mar 19, 2026
@@ -26,7 +26,7 @@
     "@mui/icons-material": "^7.3.7",
     "@mui/material": "^7.3.7",
     "@mui/x-date-pickers": "^7.5.0",
-    "@percona/percona-ui": "1.0.16",
+    "@percona/percona-ui": "1.0.17",
     "@pmm/shared": "*",
     "@reactour/tour": "^3.8.0",
     "@tanstack/react-query": "^5.45.1",

@@ -2,7 +2,7 @@ import { FC, useCallback, useEffect, useState } from 'react';
 import { useNavigation } from 'contexts/navigation';
 import { NavigationHeading } from './nav-heading';
 import { Drawer } from './drawer';
-import { NavItem } from './nav-item';
+import { SidebarNavItem } from './nav-item';
 import List from '@mui/material/List';
 import useMediaQuery from '@mui/material/useMediaQuery';
 import { useTheme } from '@mui/material/styles';
@@ -69,7 +69,7 @@ export const Sidebar: FC = () => {
         ]}
       >
         {navTree.map((item) => (
-          <NavItem
+          <SidebarNavItem
             key={item.id}
             item={item}
             activeItem={activeItem}

@@ -1,11 +1,8 @@
-import { listItemIconClasses } from '@mui/material/ListItemIcon';
 import { listItemTextClasses } from '@mui/material/ListItemText';
-import { typographyClasses } from '@mui/material/Typography';
 import { Theme } from '@mui/material';
 
 export const getStyles = (
   theme: Theme,
-  active: boolean,
   drawerOpen: boolean,
   level: number
 ) => ({
@@ -16,71 +13,33 @@ export const getStyles = (
     ? {
         mr: level > 0 ? 1 : 0,
       }
-    : {
-        py: 1.5,
-      },
+    : {},
   navItemRootCollapsible: {
     borderTopLeftRadius: 0,
     borderBottomLeftRadius: 0,
   },
-  listItemButton: {
-    px: 2,
-    height: 48,
-    borderRadius: 50,
-    justifyContent: drawerOpen ? undefined : 'center',
-
-    [`.${typographyClasses.root}`]: {
-      fontWeight: 600,
-    },
-
-    [`&, .${listItemIconClasses.root}`]: {
-      color: active ? theme.palette.primary.main : theme.palette.text.primary,
-    },
-  },
-  listItemButtonCollapsible: {
-    backgroundColor: active
-      ? theme.components?.MuiListItemButton?.styleOverrides?.selected
-      : 'initial',
-  },
   listCollapsible:
     level === 0
       ? {
-          pl: 4,
+          pl: 4.75,
           pb: 2,
         }
       : level === 1
         ? {
-            ml: 2.5,
-            pl: '11px',
-            pb: 2,
+            ml: 3.5,
+            pl: 1,
             borderLeft: 1,
             borderColor: theme.palette.divider,
           }
         : {},
-  listItemIcon: {
-    minWidth: 'auto',
-  },
   listItemDivider: {
     px: drawerOpen ? 2 : 1,
   },
   divider: {
     flex: 1,
   },
-  text: {
-    pl: 2,
-
-    [`&:hover .${listItemTextClasses.secondary}`]: {
-      color: 'inherit',
-    },
-
-    [`.${listItemTextClasses.secondary}`]: {
-      ...theme.typography.helperText,
-      textOverflow: 'ellipsis',
-      whiteSpace: 'nowrap',
-      overflow: 'hidden',
-
-      color: active ? 'inherit' : theme.palette.text.disabled,
-    },
+  listItemButton: {
+    px: 2,
   },
   textOnly: {
     m: 0,

@@ -1,10 +1,11 @@
 import { fireEvent, render, screen } from '@testing-library/react';
 import { wrapWithRouter } from 'utils/testUtils';
-import NavItem from './NavItem';
-import { NavItemProps } from './NavItem.types';
+import SidebarNavItem from './SidebarNavItem';
+import { NavItemProps } from './SidebarNavItem.types';
 import { NavItem as NavTreeItem } from 'types/navigation.types';
 import { collapseClasses } from '@mui/material/Collapse';
 import { MemoryRouterProps } from 'react-router-dom';
+import { ThemeContextProvider, pmmThemeOptions } from '@percona/percona-ui';
 
 const TEST_NAV_TREE: NavTreeItem = {
   id: 'level-0',
@@ -44,19 +45,21 @@ const renderNavItem = ({
   activeItem?: NavTreeItem;
 } = {}) =>
   render(
-    wrapWithRouter(
-      <NavItem
-        activeItem={activeItem}
-        item={TEST_NAV_TREE}
-        drawerOpen={true}
-        level={0}
-        {...props}
-      />,
-      routerProps
-    )
+    <ThemeContextProvider themeOptions={pmmThemeOptions}>
+      {wrapWithRouter(
+        <SidebarNavItem
+          activeItem={activeItem}
+          item={TEST_NAV_TREE}
+          drawerOpen={true}
+          level={0}
+          {...props}
+        />,
+        routerProps
+      )}
+    </ThemeContextProvider>
   );
 
-describe('NavItem', () => {
+describe('SidebarNavItem', () => {
   it('inner levels are closed by default', () => {
     renderNavItem();
 
@@ -157,14 +160,14 @@ describe('NavItem', () => {
         },
       ],
     };
-    renderNavItem({
+    const { container } = renderNavItem({
       activeItem: item,
       props: { item },
     });
 
     fireEvent.click(screen.getByTestId('navitem-with-badge-toggle'));
 
-    expect(screen.getByTestId('navitem-dot')).toBeInTheDocument();
+    expect(container.querySelector('.MuiBadge-dot')).toBeInTheDocument();
   });
 
   it('renders divider if item has type "menu-divider"', () => {

@@ -1,27 +1,24 @@
 import { useLinkWithVariables } from 'hooks/utils/useLinkWithVariables';
 import { FC, useCallback, useEffect, useMemo, useState } from 'react';
-import { NavItemProps } from './NavItem.types';
+import { NavItemProps } from './SidebarNavItem.types';
 import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
-import { getLinkProps, hasChildMatch, shouldShowBadge } from './NavItem.utils';
-import { getStyles } from './NavItem.styles';
+import { getLinkProps, hasChildMatch, shouldShowBadge } from './SidebarNavItem.utils';
+import { getStyles } from './SidebarNavItem.styles';
 import { useTheme } from '@mui/material/styles';
-import ListItemButton from '@mui/material/ListItemButton';
-import ListItemIcon from '@mui/material/ListItemIcon';
+import { NavItem } from '@percona/percona-ui';
 import ListItemText from '@mui/material/ListItemText';
 import Stack from '@mui/material/Stack';
 import ListItem from '@mui/material/ListItem';
 import List from '@mui/material/List';
 import Collapse from '@mui/material/Collapse';
 import Divider from '@mui/material/Divider';
 import IconButton from '@mui/material/IconButton';
-import Box from '@mui/material/Box';
 import NavItemIcon from './nav-item-icon/NavItemIcon';
 import NavItemTooltip from './nav-item-tooltip/NavItemTooltip';
 import { DRAWER_WIDTH } from '../drawer/Drawer.constants';
-import NavItemDot from './nav-item-dot/NavItemDot';
 import NavItemBadge from './nav-item-badge/NavItemBadge';
 
-const NavItem: FC<NavItemProps> = ({
+const SidebarNavItem: FC<NavItemProps> = ({
   activeItem,
   item,
   drawerOpen,
@@ -38,7 +35,7 @@ const NavItem: FC<NavItemProps> = ({
   );
   const linkProps = getLinkProps(item, url);
   const theme = useTheme();
-  const styles = getStyles(theme, active, drawerOpen, level);
+  const styles = getStyles(theme, drawerOpen, level);
   const dataTestid = `navitem-${item.id}`;
   const showBadge = shouldShowBadge(item, open);
 
@@ -93,38 +90,29 @@ const NavItem: FC<NavItemProps> = ({
             alignItems="center"
             justifyContent="space-between"
             sx={{
-              width: level === 0 ? DRAWER_WIDTH : undefined,
+              width: level === 0 ? DRAWER_WIDTH : '100%',
             }}
             data-testid={dataTestid + '-list-item'}
           >
-            <ListItemButton
-              color="primary.main"
-              disableGutters
+            <NavItem
+              text={item.text ?? ''}
+              icon={item.icon ? <NavItemIcon icon={item.icon} /> : undefined}
+              showDot={showBadge && !!item.icon}
+              badge={
+                item.badge && item.badgeAlwaysVisible && drawerOpen
+                  ? <NavItemBadge badge={item.badge} />
+                  : undefined
+              }
+              selected={active}
               sx={[
-                styles.listItemButton,
                 level === 0 && styles.navItemRootCollapsible,
+                !drawerOpen && { justifyContent: 'center' },
               ]}
+              {...(linkProps as Omit<typeof linkProps, 'component'> & { component?: React.ElementType })}
               onClick={handleOpenCollapsible}
-              {...linkProps}
               data-testid={dataTestid}
               data-navlevel={level}
-            >
-              {item.icon && (
-                <NavItemDot show={showBadge}>
-                  <ListItemIcon sx={styles.listItemIcon}>
-                    <NavItemIcon icon={item.icon} />
-                  </ListItemIcon>
-                </NavItemDot>
-              )}
-              <ListItemText
-                primary={item.text}
-                className="navitem-primary-text"
-                sx={styles.text}
-              />
-              {item.badge && item.badgeAlwaysVisible && drawerOpen && (
-                <NavItemBadge badge={item.badge} />
-              )}
-            </ListItemButton>
+            />
             {drawerOpen && (
               <IconButton
                 data-testid={`${dataTestid}-toggle`}
@@ -154,7 +142,7 @@ const NavItem: FC<NavItemProps> = ({
         >
           <List component="div" disablePadding sx={styles.listCollapsible}>
             {item.children.map((item) => (
-              <NavItem
+              <SidebarNavItem
                 key={item.id}
                 item={item}
                 activeItem={activeItem}
@@ -212,41 +200,29 @@ const NavItem: FC<NavItemProps> = ({
       <ListItem
         disablePadding
         sx={{
-          width: level === 0 ? DRAWER_WIDTH : undefined,
+          width: level === 0 ? DRAWER_WIDTH : '100%',
         }}
         data-testid={dataTestid + '-list-item'}
       >
-        <ListItemButton
-          disableGutters
+        <NavItem
+          text={item.text ?? ''}
+          secondaryText={item.secondaryText}
+          icon={item.icon ? <NavItemIcon icon={item.icon} /> : undefined}
+          badge={item.badge ? <NavItemBadge badge={item.badge} /> : undefined}
+          selected={active}
           sx={[
-            styles.listItemButton,
             styles.leafItem,
             level === 0 && styles.navItemRoot,
+            !drawerOpen && { justifyContent: 'center' },
           ]}
-          selected={active}
-          {...linkProps}
+          {...(linkProps as Omit<typeof linkProps, 'component'> & { component?: React.ElementType })}
           onClick={handleItemClick}
           data-testid={dataTestid}
           data-navlevel={level}
-        >
-          {item.icon ? (
-            <ListItemIcon sx={styles.listItemIcon}>
-              <NavItemIcon icon={item.icon} />
-            </ListItemIcon>
-          ) : (
-            <Box sx={{ mr: -1 }} />
-          )}
-          <ListItemText
-            primary={item.text}
-            secondary={item.secondaryText}
-            className="navitem-primary-text"
-            sx={styles.text}
-          />
-          {item.badge && <NavItemBadge badge={item.badge} />}
-        </ListItemButton>
+        />
       </ListItem>
     </NavItemTooltip>
   );
 };
 
-export default NavItem;
+export default SidebarNavItem;
@@ -8,7 +8,7 @@ export const getLinkProps = (item: NavItem, url?: string) => {
 
   if (item.target && item.url) {
     return {
-      component: 'a',
+      component: 'a' as const,
       target: item.target,
       href: url,
     };

@@ -1 +1 @@
-export { default as NavItem } from './NavItem';
+export { default as SidebarNavItem } from './SidebarNavItem';
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		export { default as NavItem } from './NavItem';
		export { default as SidebarNavItem } from './SidebarNavItem';