Separate Client Portal & Dashboard
This commit is contained in:
@@ -0,0 +1,126 @@
|
||||
import { NavLink as RouterLink } from 'react-router-dom';
|
||||
// @mui
|
||||
import { Box, Link, ListItemText } from '@mui/material';
|
||||
// type
|
||||
import { NavItemProps } from '../type';
|
||||
//
|
||||
import Iconify from '../../Iconify';
|
||||
import { ListItemStyle, ListItemTextStyle, ListItemIconStyle } from './style';
|
||||
import { isExternalLink } from '..';
|
||||
|
||||
// ----------------------------------------------------------------------
|
||||
|
||||
export function NavItemRoot({ item, isCollapse, open = false, active, onOpen }: NavItemProps) {
|
||||
const { title, path, icon, info, children } = item;
|
||||
|
||||
const renderContent = (
|
||||
<>
|
||||
{icon && <ListItemIconStyle>{icon}</ListItemIconStyle>}
|
||||
<ListItemTextStyle disableTypography primary={title} isCollapse={isCollapse} />
|
||||
{!isCollapse && (
|
||||
<>
|
||||
{info && info}
|
||||
{children && <ArrowIcon open={open} />}
|
||||
</>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
|
||||
if (children) {
|
||||
return (
|
||||
<ListItemStyle onClick={onOpen} activeRoot={active}>
|
||||
{renderContent}
|
||||
</ListItemStyle>
|
||||
);
|
||||
}
|
||||
|
||||
return isExternalLink(path) ? (
|
||||
<ListItemStyle component={Link} href={path} target="_blank" rel="noopener">
|
||||
{renderContent}
|
||||
</ListItemStyle>
|
||||
) : (
|
||||
<ListItemStyle component={RouterLink} to={path} activeRoot={active}>
|
||||
{renderContent}
|
||||
</ListItemStyle>
|
||||
);
|
||||
}
|
||||
|
||||
// ----------------------------------------------------------------------
|
||||
|
||||
type NavItemSubProps = Omit<NavItemProps, 'isCollapse'>;
|
||||
|
||||
export function NavItemSub({ item, open = false, active = false, onOpen }: NavItemSubProps) {
|
||||
const { title, path, info, children } = item;
|
||||
|
||||
const renderContent = (
|
||||
<>
|
||||
<DotIcon active={active} />
|
||||
<ListItemText disableTypography primary={title} />
|
||||
{info && info}
|
||||
{children && <ArrowIcon open={open} />}
|
||||
</>
|
||||
);
|
||||
|
||||
if (children) {
|
||||
return (
|
||||
<ListItemStyle onClick={onOpen} activeSub={active} subItem>
|
||||
{renderContent}
|
||||
</ListItemStyle>
|
||||
);
|
||||
}
|
||||
|
||||
return isExternalLink(path) ? (
|
||||
<ListItemStyle component={Link} href={path} target="_blank" rel="noopener" subItem>
|
||||
{renderContent}
|
||||
</ListItemStyle>
|
||||
) : (
|
||||
<ListItemStyle component={RouterLink} to={path} activeSub={active} subItem>
|
||||
{renderContent}
|
||||
</ListItemStyle>
|
||||
);
|
||||
}
|
||||
|
||||
// ----------------------------------------------------------------------
|
||||
|
||||
type DotIconProps = {
|
||||
active: boolean;
|
||||
};
|
||||
|
||||
export function DotIcon({ active }: DotIconProps) {
|
||||
return (
|
||||
<ListItemIconStyle>
|
||||
<Box
|
||||
component="span"
|
||||
sx={{
|
||||
width: 4,
|
||||
height: 4,
|
||||
borderRadius: '50%',
|
||||
bgcolor: 'text.disabled',
|
||||
transition: (theme) =>
|
||||
theme.transitions.create('transform', {
|
||||
duration: theme.transitions.duration.shorter,
|
||||
}),
|
||||
...(active && {
|
||||
transform: 'scale(2)',
|
||||
bgcolor: 'primary.main',
|
||||
}),
|
||||
}}
|
||||
/>
|
||||
</ListItemIconStyle>
|
||||
);
|
||||
}
|
||||
|
||||
// ----------------------------------------------------------------------
|
||||
|
||||
type ArrowIconProps = {
|
||||
open: boolean;
|
||||
};
|
||||
|
||||
export function ArrowIcon({ open }: ArrowIconProps) {
|
||||
return (
|
||||
<Iconify
|
||||
icon={open ? 'eva:arrow-ios-downward-fill' : 'eva:arrow-ios-forward-fill'}
|
||||
sx={{ width: 16, height: 16, ml: 1 }}
|
||||
/>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,86 @@
|
||||
import { useState } from 'react';
|
||||
import { useLocation } from 'react-router-dom';
|
||||
// @mui
|
||||
import { List, Collapse } from '@mui/material';
|
||||
// type
|
||||
import { NavListProps } from '../type';
|
||||
//
|
||||
import { NavItemRoot, NavItemSub } from './NavItem';
|
||||
import { getActive } from '..';
|
||||
|
||||
// ----------------------------------------------------------------------
|
||||
|
||||
type NavListRootProps = {
|
||||
list: NavListProps;
|
||||
isCollapse: boolean;
|
||||
};
|
||||
|
||||
export function NavListRoot({ list, isCollapse }: NavListRootProps) {
|
||||
const { pathname } = useLocation();
|
||||
|
||||
const active = getActive(list.path, pathname);
|
||||
|
||||
const [open, setOpen] = useState(active);
|
||||
|
||||
const hasChildren = list.children;
|
||||
|
||||
if (hasChildren) {
|
||||
return (
|
||||
<>
|
||||
<NavItemRoot
|
||||
item={list}
|
||||
isCollapse={isCollapse}
|
||||
active={active}
|
||||
open={open}
|
||||
onOpen={() => setOpen(!open)}
|
||||
/>
|
||||
|
||||
{!isCollapse && (
|
||||
<Collapse in={open} timeout="auto" unmountOnExit>
|
||||
<List component="div" disablePadding>
|
||||
{(list.children || []).map((item) => (
|
||||
<NavListSub key={item.title} list={item} />
|
||||
))}
|
||||
</List>
|
||||
</Collapse>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
return <NavItemRoot item={list} active={active} isCollapse={isCollapse} />;
|
||||
}
|
||||
|
||||
// ----------------------------------------------------------------------
|
||||
|
||||
type NavListSubProps = {
|
||||
list: NavListProps;
|
||||
};
|
||||
|
||||
function NavListSub({ list }: NavListSubProps) {
|
||||
const { pathname } = useLocation();
|
||||
|
||||
const active = getActive(list.path, pathname);
|
||||
|
||||
const [open, setOpen] = useState(active);
|
||||
|
||||
const hasChildren = list.children;
|
||||
|
||||
if (hasChildren) {
|
||||
return (
|
||||
<>
|
||||
<NavItemSub item={list} onOpen={() => setOpen(!open)} open={open} active={active} />
|
||||
|
||||
<Collapse in={open} timeout="auto" unmountOnExit>
|
||||
<List component="div" disablePadding sx={{ pl: 3 }}>
|
||||
{(list.children || []).map((item) => (
|
||||
<NavItemSub key={item.title} item={item} active={getActive(item.path, pathname)} />
|
||||
))}
|
||||
</List>
|
||||
</Collapse>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
return <NavItemSub item={list} active={active} />;
|
||||
}
|
||||
@@ -0,0 +1,52 @@
|
||||
// @mui
|
||||
import { styled } from '@mui/material/styles';
|
||||
import { List, Box, ListSubheader } from '@mui/material';
|
||||
// type
|
||||
import { NavSectionProps } from '../type';
|
||||
//
|
||||
import { NavListRoot } from './NavList';
|
||||
|
||||
// ----------------------------------------------------------------------
|
||||
|
||||
export const ListSubheaderStyle = styled((props) => (
|
||||
<ListSubheader disableSticky disableGutters {...props} />
|
||||
))(({ theme }) => ({
|
||||
...theme.typography.overline,
|
||||
paddingTop: theme.spacing(3),
|
||||
paddingLeft: theme.spacing(2),
|
||||
paddingBottom: theme.spacing(1),
|
||||
color: theme.palette.text.primary,
|
||||
transition: theme.transitions.create('opacity', {
|
||||
duration: theme.transitions.duration.shorter,
|
||||
}),
|
||||
}));
|
||||
|
||||
// ----------------------------------------------------------------------
|
||||
|
||||
export default function NavSectionVertical({
|
||||
navConfig,
|
||||
isCollapse = false,
|
||||
...other
|
||||
}: NavSectionProps) {
|
||||
return (
|
||||
<Box {...other}>
|
||||
{navConfig.map((group) => (
|
||||
<List key={group.subheader} disablePadding sx={{ px: 2 }}>
|
||||
<ListSubheaderStyle
|
||||
sx={{
|
||||
...(isCollapse && {
|
||||
opacity: 0,
|
||||
}),
|
||||
}}
|
||||
>
|
||||
{group.subheader}
|
||||
</ListSubheaderStyle>
|
||||
|
||||
{group.items.map((list) => (
|
||||
<NavListRoot key={list.title} list={list} isCollapse={isCollapse} />
|
||||
))}
|
||||
</List>
|
||||
))}
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,79 @@
|
||||
import { ReactNode } from 'react';
|
||||
// @mui
|
||||
import { alpha, styled } from '@mui/material/styles';
|
||||
import {
|
||||
LinkProps,
|
||||
ListItemText,
|
||||
ListItemButton,
|
||||
ListItemIcon,
|
||||
ListItemButtonProps,
|
||||
} from '@mui/material';
|
||||
// config
|
||||
import { ICON, NAVBAR } from '../../../config';
|
||||
|
||||
// ----------------------------------------------------------------------
|
||||
|
||||
type IProps = LinkProps & ListItemButtonProps;
|
||||
|
||||
interface ListItemStyleProps extends IProps {
|
||||
component?: ReactNode;
|
||||
to?: string;
|
||||
activeRoot?: boolean;
|
||||
activeSub?: boolean;
|
||||
subItem?: boolean;
|
||||
}
|
||||
|
||||
export const ListItemStyle = styled(ListItemButton, {
|
||||
shouldForwardProp: (prop) => prop !== 'activeRoot' && prop !== 'activeSub' && prop !== 'subItem',
|
||||
})<ListItemStyleProps>(({ activeRoot, activeSub, subItem, theme }) => ({
|
||||
...theme.typography.body2,
|
||||
position: 'relative',
|
||||
height: NAVBAR.DASHBOARD_ITEM_ROOT_HEIGHT,
|
||||
textTransform: 'capitalize',
|
||||
paddingLeft: theme.spacing(2),
|
||||
paddingRight: theme.spacing(1.5),
|
||||
marginBottom: theme.spacing(0.5),
|
||||
color: theme.palette.text.secondary,
|
||||
borderRadius: theme.shape.borderRadius,
|
||||
// activeRoot
|
||||
...(activeRoot && {
|
||||
...theme.typography.subtitle2,
|
||||
color: theme.palette.primary.main,
|
||||
backgroundColor: alpha(theme.palette.primary.main, theme.palette.action.selectedOpacity),
|
||||
}),
|
||||
// activeSub
|
||||
...(activeSub && {
|
||||
...theme.typography.subtitle2,
|
||||
color: theme.palette.text.primary,
|
||||
}),
|
||||
// subItem
|
||||
...(subItem && {
|
||||
height: NAVBAR.DASHBOARD_ITEM_SUB_HEIGHT,
|
||||
}),
|
||||
}));
|
||||
|
||||
interface ListItemTextStyleProps extends ListItemButtonProps {
|
||||
isCollapse?: boolean;
|
||||
}
|
||||
|
||||
export const ListItemTextStyle = styled(ListItemText, {
|
||||
shouldForwardProp: (prop) => prop !== 'isCollapse',
|
||||
})<ListItemTextStyleProps>(({ isCollapse, theme }) => ({
|
||||
whiteSpace: 'nowrap',
|
||||
transition: theme.transitions.create(['width', 'opacity'], {
|
||||
duration: theme.transitions.duration.shorter,
|
||||
}),
|
||||
...(isCollapse && {
|
||||
width: 0,
|
||||
opacity: 0,
|
||||
}),
|
||||
}));
|
||||
|
||||
export const ListItemIconStyle = styled(ListItemIcon)({
|
||||
width: ICON.NAVBAR_ITEM,
|
||||
height: ICON.NAVBAR_ITEM,
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
'& svg': { width: '100%', height: '100%' },
|
||||
});
|
||||
Reference in New Issue
Block a user