style: refine bottom navigation styles

Author: saisanthoshpentakota

src/pages/sidepanel/SidePanel.tsx

@@ -1,22 +1,33 @@
-import { useEffect, useState } from 'react';
-import { Route, Routes, useNavigate, useLocation } from 'react-router-dom';
-import BottomNavigation from '@root/src/pages/sidepanel/components/BottomNavigation';
-
-// styles
-import { Box, CircularProgress } from '@mui/material';
 import '@pages/sidepanel/SidePanel.css';
 
-// storage
-import tagConfigStore from '@src/shared/storages/tagConfigStorage';
-import entityStorage from '@src/shared/storages/entityStorage';
-import { TagConfigModel, TagConfigPathforaCandidates } from '@root/src/shared/models/tagConfigModel';
+import {
+  useEffect,
+  useState,
+} from 'react';
+
+import {
+  Route,
+  Routes,
+  useLocation,
+  useNavigate,
+} from 'react-router-dom';
 
-// components
+import {
+  Box,
+  CircularProgress,
+} from '@mui/material';
+import BottomNavigation from '@root/src/pages/sidepanel/components/BottomNavigation';
+import Configuration from '@root/src/pages/sidepanel/sections/Configuration';
 import Debugger from '@root/src/pages/sidepanel/sections/Debugger';
-import Profile from '@root/src/pages/sidepanel/sections/Profile';
 import Personalization from '@root/src/pages/sidepanel/sections/Personalization';
-import Configuration from '@root/src/pages/sidepanel/sections/Configuration';
+import Profile from '@root/src/pages/sidepanel/sections/Profile';
+import {
+  TagConfigModel,
+  TagConfigPathforaCandidates,
+} from '@root/src/shared/models/tagConfigModel';
 import { EmitLog } from '@src/shared/components/EmitLog';
+import entityStorage from '@src/shared/storages/entityStorage';
+import tagConfigStore from '@src/shared/storages/tagConfigStorage';
 
 interface SidePanelProps {
   key: any;
@@ -244,7 +255,6 @@ const SidePanel: React.FC<SidePanelProps> = ({ key, isEnabled }) => {
           </Box>
           <BottomNavigation
             value={activePath}
-            tagIsInstalled={tagIsInstalled}
             onChange={newValue => handleNavigation(newValue)}
           />
         </>

src/pages/sidepanel/components/BottomNavigation.test.tsx

@@ -0,0 +1,44 @@
+import React from 'react';
+
+import { describe, expect, it, vi } from 'vitest';
+
+import { createTheme, ThemeProvider } from '@mui/material/styles';
+import { appPalette } from '@root/src/theme/palette';
+import { fireEvent, render, screen } from '@testing-library/react';
+
+import { BottomNav } from './BottomNavigation';
+
+const theme = createTheme({ palette: appPalette });
+
+const renderWithTheme = (component: React.ReactElement) => {
+  return render(<ThemeProvider theme={theme}>{component}</ThemeProvider>);
+};
+
+describe('BottomNav', () => {
+  const mockOnChange = vi.fn();
+  const defaultProps = {
+    value: '/',
+    onChange: mockOnChange,
+  };
+
+  beforeEach(() => {
+    mockOnChange.mockClear();
+  });
+
+  it('renders all navigation sections', () => {
+    renderWithTheme(<BottomNav {...defaultProps} />);
+
+    expect(screen.getByLabelText('Debug')).toBeInTheDocument();
+    expect(screen.getByLabelText('Profile')).toBeInTheDocument();
+    expect(screen.getByLabelText('Personalization')).toBeInTheDocument();
+  });
+
+  it('calls onChange when navigation action is clicked', () => {
+    renderWithTheme(<BottomNav {...defaultProps} />);
+
+    const profileButton = screen.getByLabelText('Profile');
+    fireEvent.click(profileButton);
+
+    expect(mockOnChange).toHaveBeenCalledWith('/profile');
+  });
+});

src/pages/sidepanel/components/BottomNavigation.tsx

@@ -1,60 +1,85 @@
 import React from 'react';
-import BottomNavigation from '@mui/material/BottomNavigation';
-import BottomNavigationAction from '@mui/material/BottomNavigationAction';
-import Plumbing from '@mui/icons-material/Plumbing';
-import Person from '@mui/icons-material/Person';
-import Brush from '@mui/icons-material/Brush';
+
+import { AutoFixHighOutlined, Person, PestControlOutlined } from '@mui/icons-material';
+import { BottomNavigation, BottomNavigationAction } from '@mui/material';
+import { styled } from '@mui/material/styles';
+import { appColors } from '@root/src/theme/palette';
 
 interface BottomNavProps {
   value: string;
-  tagIsInstalled: boolean;
   onChange: (newValue: string) => void;
 }
 
-const BottomNav: React.FC<BottomNavProps> = ({ value, tagIsInstalled, onChange }) => {
+interface NavigationSection {
+  route: string;
+  icon: React.ReactElement;
+  ariaLabel: string;
+}
+
+const StyledBottomNavigation = styled(BottomNavigation)(({ theme }) => ({
+  position: 'fixed',
+  bottom: 0,
+  width: '100%',
+  height: 'auto',
+  display: 'flex',
+  justifyContent: 'space-between',
+  padding: theme.spacing(1.5, 2),
+  cursor: 'default',
+  transition: 'none',
+  '&:hover': {
+    boxShadow: 'none',
+    transform: 'none',
+  },
+}));
+
+const StyledBottomNavigationAction = styled(BottomNavigationAction)<{
+  isSelected: boolean;
+}>(({ theme, isSelected }) => ({
+  flex: 'none',
+  minWidth: 0,
+  paddingBlock: theme.spacing(1.5),
+  backgroundColor: isSelected ? appColors.common.colors.accent : 'transparent',
+  borderRadius: theme.spacing(0.5),
+  transition: 'none',
+  '&.Mui-selected': {
+    color: appColors.common.white,
+  },
+}));
+
+const navigationSections: NavigationSection[] = [
+  {
+    route: '/',
+    icon: <PestControlOutlined />,
+    ariaLabel: 'Debug',
+  },
+  {
+    route: '/profile',
+    icon: <Person />,
+    ariaLabel: 'Profile',
+  },
+  {
+    route: '/personalization',
+    icon: <AutoFixHighOutlined />,
+    ariaLabel: 'Personalization',
+  },
+];
+
+export const BottomNav = ({ value, onChange }: BottomNavProps): JSX.Element => {
   return (
-    <BottomNavigation
-      showLabels
-      value={value}
-      onChange={(_, newValue) => onChange(newValue)}
-      sx={{
-        position: 'fixed',
-        bottom: 0,
-        width: '100%',
-      }}>
-      <BottomNavigationAction
-        label="Debugger"
-        value="/"
-        icon={<Plumbing />}
-        sx={{
-          '&.Mui-selected': {
-            color: 'secondary.main',
-          },
-        }}
-      />
-      <BottomNavigationAction
-        label="Profile"
-        value="/profile"
-        disabled={!tagIsInstalled}
-        icon={<Person />}
-        sx={{
-          '&.Mui-selected': {
-            color: 'secondary.main',
-          },
-        }}
-      />
-      <BottomNavigationAction
-        label="Personalization"
-        value="/personalization"
-        disabled={!tagIsInstalled}
-        icon={<Brush />}
-        sx={{
-          '&.Mui-selected': {
-            color: 'secondary.main',
-          },
-        }}
-      />
-    </BottomNavigation>
+    <StyledBottomNavigation value={value} onChange={(_, newValue) => onChange(newValue)}>
+      {navigationSections.map(section => {
+        const isSelected = value === section.route;
+        return (
+          <StyledBottomNavigationAction
+            key={section.route}
+            value={section.route}
+            icon={section.icon}
+            isSelected={isSelected}
+            aria-label={section.ariaLabel}
+          />
+        );
+      })}
+    </StyledBottomNavigation>
   );
 };