Separate Client Portal & Dashboard

2022-05-23 10:38:16 +07:00
parent f2e84e6244
commit 89bb57f357
569 changed files with 60252 additions and 280 deletions
--- a/frontend/dashboard/src/components/nav-section/horizontal/NavItem.tsx
+++ b/frontend/dashboard/src/components/nav-section/horizontal/NavItem.tsx
@@ -0,0 +1,125 @@
+import { ReactElement, forwardRef } from 'react';
+import { NavLink as RouterLink } from 'react-router-dom';
+// @mui
+import { Box, Link } from '@mui/material';
+// config
+import { ICON } from '../../../config';
+// type
+import { NavItemProps } from '../type';
+//
+import Iconify from '../../Iconify';
+import { ListItemStyle } from './style';
+import { isExternalLink } from '..';
+
+// ----------------------------------------------------------------------
+
+export const NavItemRoot = forwardRef<HTMLButtonElement & HTMLAnchorElement, NavItemProps>(
+  ({ item, active, open, onMouseEnter, onMouseLeave }, ref) => {
+    const { title, path, icon, children } = item;
+
+    if (children) {
+      return (
+        <ListItemStyle
+          ref={ref}
+          open={open}
+          activeRoot={active}
+          onMouseEnter={onMouseEnter}
+          onMouseLeave={onMouseLeave}
+        >
+          <NavItemContent icon={icon} title={title} children={children} />
+        </ListItemStyle>
+      );
+    }
+
+    return isExternalLink(path) ? (
+      <ListItemStyle component={Link} href={path} target="_blank" rel="noopener">
+        <NavItemContent icon={icon} title={title} children={children} />
+      </ListItemStyle>
+    ) : (
+      <ListItemStyle component={RouterLink} to={path} activeRoot={active}>
+        <NavItemContent icon={icon} title={title} children={children} />
+      </ListItemStyle>
+    );
+  }
+);
+
+// ----------------------------------------------------------------------
+
+export const NavItemSub = forwardRef<HTMLButtonElement & HTMLAnchorElement, NavItemProps>(
+  ({ item, active, open, onMouseEnter, onMouseLeave }, ref) => {
+    const { title, path, icon, children } = item;
+
+    if (children) {
+      return (
+        <ListItemStyle
+          ref={ref}
+          subItem
+          disableRipple
+          open={open}
+          activeSub={active}
+          onMouseEnter={onMouseEnter}
+          onMouseLeave={onMouseLeave}
+        >
+          <NavItemContent icon={icon} title={title} children={children} subItem />
+        </ListItemStyle>
+      );
+    }
+
+    return isExternalLink(path) ? (
+      <ListItemStyle
+        subItem
+        href={path}
+        disableRipple
+        rel="noopener"
+        target="_blank"
+        component={Link}
+      >
+        <NavItemContent icon={icon} title={title} children={children} subItem />
+      </ListItemStyle>
+    ) : (
+      <ListItemStyle disableRipple component={RouterLink} to={path} activeSub={active} subItem>
+        <NavItemContent icon={icon} title={title} children={children} subItem />
+      </ListItemStyle>
+    );
+  }
+);
+
+// ----------------------------------------------------------------------
+
+type NavItemContentProps = {
+  title: string;
+  icon?: ReactElement;
+  children?: { title: string; path: string }[];
+  subItem?: boolean;
+};
+
+function NavItemContent({ icon, title, children, subItem }: NavItemContentProps) {
+  return (
+    <>
+      {icon && (
+        <Box
+          component="span"
+          sx={{
+            mr: 1,
+            width: ICON.NAVBAR_ITEM_HORIZONTAL,
+            height: ICON.NAVBAR_ITEM_HORIZONTAL,
+            '& svg': { width: '100%', height: '100%' },
+          }}
+        >
+          {icon}
+        </Box>
+      )}
+      {title}
+      {children && (
+        <Iconify
+          icon={subItem ? 'eva:chevron-right-fill' : 'eva:chevron-down-fill'}
+          sx={{
+            ml: 0.5,
+            width: ICON.NAVBAR_ITEM_HORIZONTAL,
+            height: ICON.NAVBAR_ITEM_HORIZONTAL,
+          }}
+        />
+      )}
+    </>
+  );
+}