Merge pull request #751 from amitamrutiya/amit/navbar

 Create navigation navbar that present in cloud

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';