Merge pull request #768 from amitamrutiya/update-navigation

Make navigation navbar more generic to use for the use in meshery ui

Author: amitamrutiya

src/custom/NavigationNavbar/navigationNavbar.tsx

@@ -1,5 +1,6 @@
 import ExpandLessIcon from '@mui/icons-material/ExpandLess';
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
+import { ListItemTextProps, MenuListProps } from '@mui/material';
 import React, { MouseEvent, useState } from 'react';
 import { Collapse, Divider, ListItemText, MenuItem } from '../../base';
 import { IconWrapper, MenuItemList, MenuItemSubList, MenuListStyle, SubIconWrapper } from './style';
@@ -14,64 +15,71 @@ type NavigationItem = {
   addDivider?: boolean;
 };
 
-type NavigationNavbarProps = {
+interface NavigationNavbarProps {
   navigationItems: NavigationItem[];
-};
+  MenuListProps?: Omit<MenuListProps, 'children'>;
+  ListItemTextProps?: Omit<ListItemTextProps, 'primary'>;
+}
 
-const NavigationNavbar: React.FC<NavigationNavbarProps> = ({ navigationItems }) => {
+const NavigationNavbar: React.FC<NavigationNavbarProps> = ({
+  navigationItems,
+  MenuListProps = {},
+  ListItemTextProps = {}
+}) => {
   const [openSectionId, setOpenSectionId] = useState<string | null>(null);
-
   const toggleSectionOpen = (sectionId: string, event: MouseEvent<SVGSVGElement>) => {
     event.stopPropagation();
     setOpenSectionId((currentOpenSectionId) =>
       currentOpenSectionId === sectionId ? null : sectionId
     );
   };
 
-  const NavigationNavbarItems = () => {
-    return navigationItems.map((item) => {
-      const isOpen = openSectionId === item.id;
-      const permission = item.permission ?? true;
-      const addDivider = item.addDivider ?? false;
+  return (
+    <MenuListStyle {...MenuListProps} dense>
+      {navigationItems.map((item) => {
+        const isOpen = openSectionId === item.id;
+        const permission = item.permission ?? true;
+        const addDivider = item.addDivider ?? false;
 
-      return (
-        <React.Fragment key={item.id}>
-          <MenuItem disabled={!permission} onClick={item.onClick}>
-            <MenuItemList>
-              <IconWrapper>{item.icon}</IconWrapper>
-              <ListItemText primary={item.title} />
-            </MenuItemList>
+        return (
+          <React.Fragment key={item.id}>
+            <MenuItem disabled={!permission} onClick={item.onClick}>
+              <MenuItemList>
+                {item.icon && <IconWrapper>{item.icon}</IconWrapper>}
+                <ListItemText primary={item.title} {...ListItemTextProps} />
+              </MenuItemList>
+              {item.subItems && (
+                <ListItemText>
+                  {isOpen ? (
+                    <ExpandLessIcon onClick={(e) => toggleSectionOpen(item.id, e)} />
+                  ) : (
+                    <ExpandMoreIcon onClick={(e) => toggleSectionOpen(item.id, e)} />
+                  )}
+                </ListItemText>
+              )}
+            </MenuItem>
             {item.subItems && (
-              <ListItemText>
-                {isOpen ? (
-                  <ExpandLessIcon onClick={(e) => toggleSectionOpen(item.id, e)} />
-                ) : (
-                  <ExpandMoreIcon onClick={(e) => toggleSectionOpen(item.id, e)} />
-                )}
-              </ListItemText>
+              <Collapse in={isOpen} timeout="auto" unmountOnExit variant="submenu">
+                {item.subItems.map((subItem) => (
+                  <MenuItem
+                    key={subItem.id}
+                    disabled={!subItem.permission}
+                    onClick={subItem.onClick}
+                  >
+                    <MenuItemSubList>
+                      {subItem.icon && <SubIconWrapper>{subItem.icon}</SubIconWrapper>}
+                      <ListItemText primary={subItem.title} {...ListItemTextProps} />
+                    </MenuItemSubList>
+                  </MenuItem>
+                ))}
+              </Collapse>
             )}
-          </MenuItem>
-
-          {item.subItems && (
-            <Collapse in={isOpen} timeout="auto" unmountOnExit variant="submenu">
-              {item.subItems.map((subItem) => (
-                <MenuItem key={subItem.id} disabled={!subItem.permission} onClick={subItem.onClick}>
-                  <MenuItemSubList>
-                    <SubIconWrapper>{subItem.icon}</SubIconWrapper>
-                    <ListItemText primary={subItem.title} />
-                  </MenuItemSubList>
-                </MenuItem>
-              ))}
-            </Collapse>
-          )}
-
-          {addDivider && <Divider />}
-        </React.Fragment>
-      );
-    });
-  };
-
-  return <MenuListStyle dense>{NavigationNavbarItems()}</MenuListStyle>;
+            {addDivider && <Divider />}
+          </React.Fragment>
+        );
+      })}
+    </MenuListStyle>
+  );
 };
 
 export default NavigationNavbar;

src/custom/NavigationNavbar/style.tsx

@@ -7,8 +7,6 @@ export const ListItemStyle = styled('div')(({ theme }) => ({
 }));
 
 export const MenuListStyle = styled(MenuList)({
-  minHeight: '31rem',
-  width: '13rem',
   overflowY: 'auto',
   scrollbarWidth: 'none',
   '&::-webkit-scrollbar': {
@@ -18,7 +16,7 @@ export const MenuListStyle = styled(MenuList)({
 
 export const MenuItemList = styled(ListItem)(() => ({
   pointerEvents: 'auto',
-  margin: '0.5rem 0rem 0.5rem 0.5rem',
+  margin: '0.5rem 0rem 0.5rem 0rem',
   fontSize: '0.1rem',
   padding: '0'
 }));
@@ -30,7 +28,8 @@ export const MenuItemSubList = styled(ListItem)(() => ({
 }));
 
 export const IconWrapper = styled('div')({
-  marginRight: '0.75rem'
+  marginRight: '0.75rem',
+  marginLeft: '0.5rem'
 });
 
 export const SubIconWrapper = styled('div')({