Merge branch 'layer5io:master' into master

package.json

@@ -74,7 +74,6 @@
     "rehype-raw": "^6.1.1",
     "remark-gfm": "^3.0.1",
     "ts-jest": "^29.1.1",
-    "@types/lodash": "^4.17.7",
     "tsup": "^8.2.4",
     "typescript": "^5.3.3"
   },

src/custom/Modal/index.tsx

@@ -31,7 +31,7 @@ interface UseModalReturnI extends ModalProps {
   isOpen: boolean;
 }
 
-const CloseBtn = styled(IconButton)`
+export const CloseBtn = styled(IconButton)`
   && {
     & svg {
       fill: #fff;
@@ -54,7 +54,7 @@ const StyledDialog = styled(Dialog)`
   }
 `;
 
-const StyledHeader = styled('div')(() => ({
+export const ModalStyledHeader = styled('div')(() => ({
   background: 'linear-gradient(90deg, #3B687B 0%, #507D90 100%)',
   color: '#eee',
   display: 'flex',
@@ -141,15 +141,15 @@ export const Modal: React.FC<ModalProps> = ({
       {...props}
     >
       {title && (
-        <StyledHeader>
+        <ModalStyledHeader>
           {headerIcon && headerIcon}
           <Typography component={'div'} variant="h6">
             {title}
           </Typography>
           <CloseBtn onClick={closeModal}>
             <CloseIcon {...iconLarge} fill="#fff"></CloseIcon>
           </CloseBtn>
-        </StyledHeader>
+        </ModalStyledHeader>
       )}
 
       {reactNode && reactNode}

src/custom/NavigationNavbar/index.tsx

@@ -0,0 +1,3 @@
+import NavigationNavbar from './navigationNavbar';
+
+export { NavigationNavbar };

src/custom/NavigationNavbar/navigationNavbar.tsx

@@ -0,0 +1,77 @@
+import ExpandLessIcon from '@mui/icons-material/ExpandLess';
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
+import React, { MouseEvent, useState } from 'react';
+import { Collapse, Divider, ListItemText, MenuItem } from '../../base';
+import { IconWrapper, MenuItemList, MenuItemSubList, MenuListStyle, SubIconWrapper } from './style';
+
+type NavigationItem = {
+  id: string;
+  title: string;
+  icon: React.ReactNode;
+  permission?: boolean;
+  onClick: () => void;
+  subItems?: NavigationItem[];
+  addDivider?: boolean;
+};
+
+type NavigationNavbarProps = {
+  navigationItems: NavigationItem[];
+};
+
+const NavigationNavbar: React.FC<NavigationNavbarProps> = ({ navigationItems }) => {
+  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 (
+        <React.Fragment key={item.id}>
+          <MenuItem disabled={!permission} onClick={item.onClick}>
+            <MenuItemList>
+              <IconWrapper>{item.icon}</IconWrapper>
+              <ListItemText primary={item.title} />
+            </MenuItemList>
+            {item.subItems && (
+              <ListItemText>
+                {isOpen ? (
+                  <ExpandLessIcon onClick={(e) => toggleSectionOpen(item.id, e)} />
+                ) : (
+                  <ExpandMoreIcon onClick={(e) => toggleSectionOpen(item.id, e)} />
+                )}
+              </ListItemText>
+            )}
+          </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>;
+};
+
+export default NavigationNavbar;

src/custom/NavigationNavbar/style.tsx

@@ -0,0 +1,38 @@
+import { styled } from '@mui/material/styles';
+import { ListItem, MenuList } from '../../base';
+
+export const ListItemStyle = styled('div')(({ theme }) => ({
+  marginLeft: '.5rem',
+  color: theme.palette.background.secondary
+}));
+
+export const MenuListStyle = styled(MenuList)({
+  minHeight: '31rem',
+  width: '13rem',
+  overflowY: 'auto',
+  scrollbarWidth: 'none',
+  '&::-webkit-scrollbar': {
+    width: '0em'
+  }
+});
+
+export const MenuItemList = styled(ListItem)(() => ({
+  pointerEvents: 'auto',
+  margin: '0.5rem 0rem 0.5rem 0.5rem',
+  fontSize: '0.1rem',
+  padding: '0'
+}));
+
+export const MenuItemSubList = styled(ListItem)(() => ({
+  pointerEvents: 'auto',
+  margin: '0rem 0rem 0rem 0.5rem',
+  fontSize: '0.1rem'
+}));
+
+export const IconWrapper = styled('div')({
+  marginRight: '0.75rem'
+});
+
+export const SubIconWrapper = styled('div')({
+  marginRight: '0.5rem'
+});

src/custom/index.tsx

@@ -45,6 +45,7 @@ import UniversalFilter, { UniversalFilterProps } from './UniversalFilter';
 export { CatalogCard } from './CatalogCard';
 export { StyledChartDialog } from './ChartDialog';
 export { LearningContent } from './LearningContent';
+export { NavigationNavbar } from './NavigationNavbar';
 export { Note } from './Note';
 export { SetupPreReq } from './SetupPrerequisite';
 export { StyledChapter } from './StyledChapter';
@@ -89,13 +90,15 @@ export {
 
 //Custom Modal
 export {
+  CloseBtn,
   Modal,
   ModalBody,
   ModalButtonDanger,
   ModalButtonPrimary,
   ModalButtonSecondary,
   ModalButtonTertiary,
   ModalFooter,
+  ModalStyledHeader,
   PrimaryActionButtons,
   useModal
 } from './Modal';

src/icons/Menu/MenuIcon.tsx

@@ -0,0 +1,24 @@
+import { DEFAULT_FILL_NONE, DEFAULT_HEIGHT, DEFAULT_WIDTH } from '../../constants/constants';
+import { IconProps } from '../types';
+
+export const AddIcon = ({
+  width = DEFAULT_WIDTH,
+  height = DEFAULT_HEIGHT,
+  fill = DEFAULT_FILL_NONE,
+  ...props
+}: IconProps): JSX.Element => {
+  return (
+    <svg
+      width={width}
+      height={height}
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      data-testid="add-icon-svg"
+      {...props}
+    >
+      <path fill={fill} d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"></path>
+    </svg>
+  );
+};
+
+export default AddIcon;

src/icons/Menu/index.ts

@@ -0,0 +1 @@
+export { default as MenuIcon } from './MenuIcon';

src/icons/index.ts

@@ -54,6 +54,7 @@ export * from './InfoOutlined';
 export * from './Kubernetes';
 export * from './LeftAngledArrow';
 export * from './LeftArrow';
+export * from './Menu';
 export * from './MesheryOperator';
 export * from './Open';
 export * from './PanTool';