Skip to content

Commit

Permalink
feat: added menu mini
Browse files Browse the repository at this point in the history
  • Loading branch information
@Jadapema
Jadapema committed Aug 15, 2024
1 parent 18a004e commit 853389d
Show file tree
Hide file tree
Showing 22 changed files with 308 additions and 200 deletions.
25 changes: 25 additions & 0 deletions package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -60,6 +60,7 @@
"@mui/x-data-grid": "^6.10.0",
"@mui/x-date-pickers": "^6.10.0",
"@react-pdf/renderer": "^3.1.12",
"@tabler/icons-react": "^3.11.0",
"apexcharts": "^3.41.0",
"autosuggest-highlight": "^3.3.4",
"axios": "^1.4.0",
Expand Down
5 changes: 5 additions & 0 deletions public/assets/icons/navbar/ic_watchit.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
4 changes: 2 additions & 2 deletions src/components/nav-section/horizontal/nav-list.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,9 +24,9 @@ export default function NavList({ data, depth, hasChild, config }: NavListRootPr

const pathname = usePathname();

const active = useActiveLink(data.path, hasChild);
const active = useActiveLink(data?.path ?? '', hasChild);

const externalLink = data.path.includes('http');
const externalLink = data?.path?.includes('http');

const [open, setOpen] = useState(false);

Expand Down
122 changes: 59 additions & 63 deletions src/components/nav-section/mini/nav-item.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import { forwardRef } from 'react';
// @mui
import { useTheme } from '@mui/material/styles';
import Link from '@mui/material/Link';
import Box from '@mui/material/Box';
import Tooltip from '@mui/material/Tooltip';
import ListItemText from '@mui/material/ListItemText';
// routes
Expand All @@ -10,7 +11,7 @@ import { RouterLink } from 'src/routes/components';
import Iconify from '../../iconify';
//
import { NavItemProps, NavConfigProps } from '../types';
import { StyledItem, StyledIcon } from './styles';
import { StyledItem, StyledIcon, StyledNavContent } from './styles';

// ----------------------------------------------------------------------

Expand All @@ -37,73 +38,68 @@ const NavItem = forwardRef<HTMLDivElement, Props>(
config={config}
{...other}
>
{icon && (
<StyledIcon
size={config.iconSize}
sx={{
...(subItem && { mr: 1.5 }),
}}
>
{icon}
</StyledIcon>
)}
<Box className='menu-pill'
sx={{
position: 'absolute',
top: 0,
left: 0,
width: '4px',
height: '100%',
display: 'flex',
overflow: 'hidden',
alignItems: 'center',
justifyContent: 'flex-start',
transition: 'all 0.2s ease-in-out'
}}
>
<Box className='pill' sx={{
width: active ? '4px' : 0 ,
height: active ? '60%' : 0,
borderRadius: 0,
borderTopRightRadius: '1rem',
borderBottomRightRadius: '1rem',
backgroundColor: '#fff',
transition: 'all 0.3s ease-in-out'
}} />
</Box>

{!(config.hiddenLabel && !subItem) && (
<ListItemText
sx={{
width: 1,
flex: 'unset',
...(!subItem && {
px: 0.5,
mt: 0.5,
}),
}}
primary={title}
primaryTypographyProps={{
noWrap: true,
fontSize: 10,
lineHeight: '16px',
textAlign: 'center',
textTransform: 'capitalize',
fontWeight: active ? 'fontWeightBold' : 'fontWeightSemiBold',
...(subItem && {
textAlign: 'unset',
fontSize: theme.typography.body2.fontSize,
lineHeight: theme.typography.body2.lineHeight,
fontWeight: active ? 'fontWeightSemiBold' : 'fontWeightMedium',
}),
}}
/>
)}
<StyledNavContent
active={active}
>
{icon && (
<StyledIcon
size={config.iconSize}
sx={{
width: '1.7rem',
height: '1.7rem',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
...(subItem && { mr: 1.5 }),
}}
>
{icon}
</StyledIcon>
)}

{caption && (
<Tooltip title={caption} arrow placement="right">
<Iconify
width={16}
icon="eva:info-outline"
{!icon && title && (
<ListItemText
sx={{
color: 'text.disabled',
...(!subItem && {
top: 11,
left: 6,
position: 'absolute',
}),
width: 1,
flex: 'unset'
}}
primary={title.slice(0,4)}
primaryTypographyProps={{
noWrap: true,
fontSize: 14,
lineHeight: 1,
textAlign: 'center',
textTransform: 'capitalize',
fontWeight: active ? 'fontWeightBold' : 'fontWeightSemiBold',
}}
/>
</Tooltip>
)}

{!!children && (
<Iconify
width={16}
icon="eva:arrow-ios-forward-fill"
sx={{
top: 11,
right: 6,
position: 'absolute',
}}
/>
)}
)}
</StyledNavContent>
</StyledItem>
);

Expand Down
85 changes: 28 additions & 57 deletions src/components/nav-section/mini/nav-list.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,20 +14,17 @@ import NavItem from './nav-item';

type NavListRootProps = {
data: NavListProps;
active?: boolean;
depth: number;
hasChild: boolean;
config: NavConfigProps;
onClick?: () => void
};

export default function NavList({ data, depth, hasChild, config }: NavListRootProps) {
export default function NavList({ data, active, depth, config, onClick }: NavListRootProps) {
const navRef = useRef(null);

const pathname = usePathname();

const active = useActiveLink(data.path, hasChild);

const externalLink = data.path.includes('http');

const [open, setOpen] = useState(false);

useEffect(() => {
Expand Down Expand Up @@ -74,63 +71,37 @@ export default function NavList({ data, depth, hasChild, config }: NavListRootPr
item={data}
depth={depth}
open={open}
active={active}
externalLink={externalLink}
active={active || open}
onMouseEnter={handleOpen}
onMouseLeave={handleClose}
config={config}
onClick={onClick}
/>

{hasChild && (
<Popover
open={open}
anchorEl={navRef.current}
anchorOrigin={{ vertical: 'center', horizontal: 'right' }}
transformOrigin={{ vertical: 'center', horizontal: 'left' }}
slotProps={{
paper: {
onMouseEnter: handleOpen,
onMouseLeave: handleClose,
sx: {
mt: 0.5,
width: 160,
...(open && {
pointerEvents: 'auto',
}),
},
<Popover
open={open}
anchorEl={navRef.current}
anchorOrigin={{ vertical: 'center', horizontal: 'right' }}
transformOrigin={{ vertical: 'center', horizontal: 'left' }}
slotProps={{
paper: {
onMouseEnter: handleOpen,
onMouseLeave: handleClose,
sx: {
backgroundColor: 'rgba(0,0,0,0.6)',
padding: '8px 20px',
...(open && {
pointerEvents: 'auto',
}),
},
}}
sx={{
pointerEvents: 'none',
}}
>
<NavSubList data={data.children} depth={depth} config={config} />
</Popover>
)}
},
}}
sx={{
pointerEvents: 'none'
}}
>
{ data.title }
</Popover>
</>
);
}

// ----------------------------------------------------------------------

type NavListSubProps = {
data: NavListProps[];
depth: number;
config: NavConfigProps;
};

function NavSubList({ data, depth, config }: NavListSubProps) {
return (
<Stack spacing={0.5}>
{data.map((list) => (
<NavList
key={list.title + list.path}
data={list}
depth={depth + 1}
hasChild={!!list.children}
config={config}
/>
))}
</Stack>
);
}
27 changes: 8 additions & 19 deletions src/components/nav-section/mini/nav-section-mini.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,43 +1,32 @@
import { memo } from 'react';
import Stack from '@mui/material/Stack';
//
import { NavSectionProps, NavListProps, NavConfigProps } from '../types';
import { navMiniConfig } from '../config';
import { NavListProps, NavConfigProps } from '../types';
import NavList from './nav-list';

// ----------------------------------------------------------------------

function NavSectionMini({ data, config, sx, ...other }: NavSectionProps) {
return (
<Stack sx={sx} {...other}>
{data.map((group, index) => (
<Group key={index} items={group.items} config={navMiniConfig(config)} />
))}
</Stack>
);
}

export default memo(NavSectionMini);

// ----------------------------------------------------------------------

type GroupProps = {
items: NavListProps[];
activeId?: string;
config: NavConfigProps;
onClick?: (id: string) => void
};

function Group({ items, config }: GroupProps) {
function NavSectionMini({ items, activeId, config, onClick }: GroupProps) {
return (
<>
{items.map((list) => (
<NavList
key={list.title + list.path}
active={activeId === list.id}
data={list}
depth={1}
hasChild={!!list.children}
config={config}
onClick={() => { onClick?.(list.id ?? '') }}
/>
))}
</>
);
}

export default memo(NavSectionMini);
Loading

0 comments on commit 853389d

Please sign in to comment.