From 3e265459a42fc629c2c6acc3b42e88481e172a1b Mon Sep 17 00:00:00 2001
From: Amit Amrutiya <amitamrutiya2210@gmail.com>
Date: Tue, 8 Oct 2024 17:31:08 +0530
Subject: [PATCH] chore: create navigation navbar that present in cloud

Signed-off-by: Amit Amrutiya <amitamrutiya2210@gmail.com>
---
 .../NavigationNavbar/navigationNavbar.tsx     | 77 +++++++++++++++++++
 src/custom/NavigationNavbar/style.tsx         | 38 +++++++++
 2 files changed, 115 insertions(+)
 create mode 100644 src/custom/NavigationNavbar/navigationNavbar.tsx
 create mode 100644 src/custom/NavigationNavbar/style.tsx

diff --git a/src/custom/NavigationNavbar/navigationNavbar.tsx b/src/custom/NavigationNavbar/navigationNavbar.tsx
new file mode 100644
index 000000000..6d5f83df5
--- /dev/null
+++ b/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;
diff --git a/src/custom/NavigationNavbar/style.tsx b/src/custom/NavigationNavbar/style.tsx
new file mode 100644
index 000000000..d6cd54f1e
--- /dev/null
+++ b/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'
+});