fix: navigation button spacing

frontend/src/component/admin/menu/AdminTabsMenu.tsx

@@ -1,4 +1,4 @@
-import { useLocation } from 'react-router-dom';
+import { useLocation, useNavigate } from 'react-router-dom';
 import { Paper, styled, Tab, Tabs } from '@mui/material';
 import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig';
 import { CenteredNavLink } from './CenteredNavLink';
@@ -23,6 +23,7 @@ const StyledBadgeContainer = styled('div')(({ theme }) => ({
 export const AdminTabsMenu: VFC = () => {
     const { uiConfig, isPro, isOss } = useUiConfig();
     const { pathname } = useLocation();
+    const navigate = useNavigate();
 
     const activeTab = pathname.split('/')[2];
 
@@ -55,6 +56,7 @@ export const AdminTabsMenu: VFC = () => {
             >
                 {tabs.map(tab => (
                     <Tab
+                        sx={{ padding: 0 }}
                         key={tab.route}
                         value={tab.route?.split('/')?.[2]}
                         label={

frontend/src/component/admin/menu/CenteredNavLink.tsx

@@ -1,41 +1,21 @@
-import { Theme } from '@mui/material';
+import { styled } from '@mui/material';
-import React, { FC } from 'react';
+import { FC } from 'react';
 import { NavLink } from 'react-router-dom';
-import { useTheme } from '@mui/material/styles';
 
-const createNavLinkStyle = (props: {
+const StyledNavLink = styled(NavLink)(({ theme }) => ({
-    isActive: boolean;
-    theme: Theme;
-}): React.CSSProperties => {
-    const navLinkStyle = {
     display: 'flex',
     justifyContent: 'center',
     alignItems: 'center',
     width: '100%',
+    height: '100%',
     textDecoration: 'none',
     color: 'inherit',
-        padding: props.theme.spacing(1.5, 3),
+    padding: theme.spacing(0, 5),
-    };
+    '&.active': {
-
-    const activeNavLinkStyle: React.CSSProperties = {
         fontWeight: 'bold',
-        borderRadius: '3px',
+    },
-        padding: props.theme.spacing(1.5, 3),
+}));
-    };
-
-    return props.isActive
-        ? { ...navLinkStyle, ...activeNavLinkStyle }
-        : navLinkStyle;
-};
 
 export const CenteredNavLink: FC<{ to: string }> = ({ to, children }) => {
-    const theme = useTheme();
+    return <StyledNavLink to={to}>{children}</StyledNavLink>;
-    return (
-        <NavLink
-            to={to}
-            style={({ isActive }) => createNavLinkStyle({ isActive, theme })}
-        >
-            {children}
-        </NavLink>
-    );
 };

frontend/src/component/menu/Header/NavigationMenu/NavigationMenu.tsx

@@ -98,9 +98,9 @@ export const NavigationMenu = ({
                             }
                             arrow
                             placement="left"
+                            key={option.path}
                         >
                             <MenuItem
-                                key={option.path}
                                 component={StyledLink}
                                 to={option.path}
                                 onClick={handleClose}