Nearle_express/dailygrubs_console
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

updates

Browse Source
This commit is contained in:
joshikannan
2024-02-21 19:11:50 +05:30
parent a13bd37ac7
commit 61387df823
15 changed files with 2193 additions and 1708 deletions
Download Patch File Download Diff File Expand all files Collapse all files

78
src/layout/MainLayout/Drawer/DrawerContent/Navigation/NavCollapse.js
View File

@@ -45,7 +45,8 @@ const PopperStyled = styled(Popper)(({ theme }) => ({
left: -5,
width: 10,
height: 10,
backgroundColor: theme.palette.background.paper,
// backgroundColor: theme.palette.background.paper,
backgroundColor: theme.palette.primary.main,
transform: 'translateY(-50%) rotate(45deg)',
zIndex: 120,
borderLeft: `1px solid ${theme.palette.grey.A800}`,
@@ -210,11 +211,14 @@ const NavCollapse = ({ menu, level, parentId, setSelectedItems, selectedItems, s
const isSelected = selected === menu.id;
const borderIcon = level === 1 ? <BorderOutlined style={{ fontSize: '1rem' }} /> : false;
const Icon = menu.icon;
const menuIcon = menu.icon ? <Icon style={{ fontSize: drawerOpen ? '1rem' : '1.25rem' }} /> : borderIcon;
const textColor = theme.palette.mode === ThemeMode.DARK ? 'grey.400' : 'text.primary';
const iconSelectedColor = theme.palette.mode === ThemeMode.DARK && drawerOpen ? theme.palette.text.primary : theme.palette.primary.main;
const menuIcon = menu.icon ? <Icon style={{ fontSize: drawerOpen ? '1rem' : '1.25rem', color: 'white' }} /> : borderIcon;
// const textColor = theme.palette.mode === ThemeMode.DARK ? 'grey.400' : 'text.primary';
// const iconSelectedColor = theme.palette.mode === ThemeMode.DARK && drawerOpen ? theme.palette.text.primary : theme.palette.primary.main;
const popperId = miniMenuOpened ? `collapse-pop-${menu.id}` : undefined;
const FlexBox = { display: 'flex', justifyContent: 'space-between', alignItems: 'center', width: '100%' };
const textColor = 'white';
const iconSelectedColor = 'white';
// const isSelected = true;
return (
<>
@@ -228,9 +232,11 @@ const NavCollapse = ({ menu, level, parentId, setSelectedItems, selectedItems, s
sx={{
pl: drawerOpen ? `${level * 28}px` : 1.5,
py: !drawerOpen && level === 1 ? 1.25 : 1,
...(drawerOpen && {
'&:hover': {
bgcolor: theme.palette.mode === ThemeMode.DARK ? 'divider' : 'primary.lighter'
// bgcolor: theme.palette.mode === ThemeMode.DARK ? 'divider' : 'primary.lighter'
bgcolor: '#7b1fa2'
},
'&.Mui-selected': {
bgcolor: 'transparent',
@@ -241,6 +247,7 @@ const NavCollapse = ({ menu, level, parentId, setSelectedItems, selectedItems, s
...(!drawerOpen && {
'&:hover': {
bgcolor: 'transparent'
// bgcolor:'#7b1fa2'
},
'&.Mui-selected': {
'&:hover': {
@@ -256,7 +263,11 @@ const NavCollapse = ({ menu, level, parentId, setSelectedItems, selectedItems, s
onClick={handlerIconLink}
sx={{
minWidth: 28,
color: selected === menu.id ? 'primary.main' : textColor,
// color: selected === menu.id ? 'primary.main' : textColor,
// color: selected === menu.id ? textColor : textColor,
// bgcolor:'white',
// color:'white',
...(!drawerOpen && {
borderRadius: 1.5,
width: 36,
@@ -264,14 +275,20 @@ const NavCollapse = ({ menu, level, parentId, setSelectedItems, selectedItems, s
alignItems: 'center',
justifyContent: 'center',
'&:hover': {
bgcolor: theme.palette.mode === ThemeMode.DARK ? 'secondary.light' : 'secondary.lighter'
// bgcolor: theme.palette.mode === ThemeMode.DARK ? 'secondary.light' : 'secondary.lighter'
bgcolor: '#7b1fa2',
color: 'white'
}
}),
...(!drawerOpen &&
selected === menu.id && {
bgcolor: theme.palette.mode === ThemeMode.DARK ? 'primary.900' : 'primary.lighter',
// bgcolor: theme.palette.mode === ThemeMode.DARK ? 'primary.900' : 'primary.lighter',
// bgcolor:'white',
bgcolor: '#7b1fa2',
'&:hover': {
bgcolor: theme.palette.mode === ThemeMode.DARK ? 'primary.darker' : 'primary.lighter'
// bgcolor: theme.palette.mode === ThemeMode.DARK ? 'primary.darker' : 'primary.lighter'
bgcolor: '#7b1fa2'
// color:'white'
}
})
}}
@@ -282,7 +299,12 @@ const NavCollapse = ({ menu, level, parentId, setSelectedItems, selectedItems, s
{(drawerOpen || (!drawerOpen && level !== 1)) && (
<ListItemText
primary={
<Typography variant="h6" color={selected === menu.id ? 'primary' : textColor}>
<Typography
variant="h6"
// color={selected === menu.id ? 'primary' : textColor}
// color={'white'}
color={selected === menu.id ? textColor : textColor}
>
{menu.title}
</Typography>
}
@@ -297,9 +319,22 @@ const NavCollapse = ({ menu, level, parentId, setSelectedItems, selectedItems, s
)}
{(drawerOpen || (!drawerOpen && level !== 1)) &&
(miniMenuOpened || open ? (
<UpOutlined style={{ fontSize: '0.625rem', marginLeft: 1, color: theme.palette.primary.main }} />
<UpOutlined
style={{
fontSize: '0.625rem',
marginLeft: 1,
// color: theme.palette.primary.main
color: 'white'
}}
/>
) : (
<DownOutlined style={{ fontSize: '0.625rem', marginLeft: 1 }} />
<DownOutlined
style={{
fontSize: '0.625rem',
marginLeft: 1,
color: 'white'
}}
/>
))}
{!drawerOpen && (
@@ -329,7 +364,8 @@ const NavCollapse = ({ menu, level, parentId, setSelectedItems, selectedItems, s
mt: 1.5,
boxShadow: theme.customShadows.z1,
backgroundImage: 'none',
border: `1px solid ${theme.palette.divider}`
// border: `1px solid ${theme.palette.divider}`,
background: theme.palette.primary.main
}}
>
<ClickAwayListener onClickAway={handleClose}>
@@ -373,7 +409,14 @@ const NavCollapse = ({ menu, level, parentId, setSelectedItems, selectedItems, s
>
<Box onClick={handlerIconLink} sx={FlexBox}>
{menuIcon && (
<ListItemIcon sx={{ my: 'auto', minWidth: !menu.icon ? 18 : 36, color: theme.palette.secondary.dark }}>
<ListItemIcon
sx={{
my: 'auto',
minWidth: !menu.icon ? 18 : 36
// color: theme.palette.secondary.dark
// color:'white'
}}
>
{menuIcon}
</ListItemIcon>
)}
@@ -386,7 +429,12 @@ const NavCollapse = ({ menu, level, parentId, setSelectedItems, selectedItems, s
)}
<ListItemText
primary={
<Typography variant="body1" color="inherit" sx={{ my: 'auto' }}>
<Typography
variant="body1"
// color="inherit"
// color="white"
sx={{ my: 'auto' }}
>
{menu.title}
</Typography>
}

50
src/layout/MainLayout/Drawer/DrawerContent/Navigation/NavItem.js
View File

@@ -1,5 +1,5 @@
import PropTypes from 'prop-types';
import { forwardRef, useEffect,useState } from 'react';
import { forwardRef, useEffect, useState } from 'react';
import { Link } from 'react-router-dom';
import { useDispatch, useSelector } from 'react-redux';
@@ -20,14 +20,12 @@ import { activeItem, openDrawer } from 'store/reducers/menu';
const NavItem = ({ item, level }) => {
const theme = useTheme();
const dispatch = useDispatch();
const { menuOrientation } = useConfig();
const { drawerOpen, openItem } = useSelector((state) => state.menu);
const [ishover,setIshover]=useState('')
const [ishover, setIshover] = useState('');
const downLG = useMediaQuery(theme.breakpoints.down('lg'));
let itemTarget = '_self';
if (item.target) {
itemTarget = '_blank';
@@ -41,8 +39,11 @@ const NavItem = ({ item, level }) => {
const Icon = item.icon;
const isSelected = openItem.findIndex((id) => id === item.id) > -1;
const itemIcon = item.icon ? <Icon style={{ fontSize: drawerOpen ? '1rem' : '1.25rem',
color:isSelected?'#662582':'#fff' }} /> : false;
const itemIcon = item.icon ? (
<Icon style={{ fontSize: drawerOpen ? '1rem' : '1.25rem', color: isSelected ? '#662582' : '#fff' }} />
) : (
false
);
// const { pathname } = useLocation();
const pathname = document.location.pathname;
@@ -77,11 +78,11 @@ const NavItem = ({ item, level }) => {
{...listItemProps}
disabled={item.disabled}
selected={isSelected}
onMouseEnter={(e,val)=>{
console.log(e)
onMouseEnter={(e, val) => {
console.log(e);
}}
onMouseLeave={()=>{
setIshover('')
onMouseLeave={() => {
setIshover('');
}}
sx={{
zIndex: 1201,
@@ -90,7 +91,7 @@ setIshover('')
...(drawerOpen && {
'&:hover': {
// bgcolor: theme.palette.mode === ThemeMode.DARK ? 'divider' : 'primary.lighter'
bgcolor:'#7b1fa2'
bgcolor: '#7b1fa2'
},
'&.Mui-selected': {
bgcolor: theme.palette.mode === ThemeMode.DARK ? 'divider' : 'primary.lighter',
@@ -103,17 +104,18 @@ setIshover('')
}
}),
...(!drawerOpen && {
bgcolor: '#662582',
'&:hover': {
bgcolor: 'transparent',
// bgcolor: 'transparent',
// bgcolor:'#7b1fa2'
bgcolor: '#662582'
},
'&.Mui-selected': {
'&:hover': {
bgcolor: 'transparent'
},
bgcolor: 'transparent'
// bgcolor:'#7b1fa2'
}
})
}}
@@ -126,20 +128,20 @@ setIshover('')
sx={{
minWidth: 28,
'&:hover': {
color:isSelected ? '#fff':iconSelectedColor ,
color: isSelected ? '#fff' : iconSelectedColor
},
color: isSelected ? iconSelectedColor : textColor,
...(!drawerOpen && {
borderRadius: 1.5,
width: 36,
height: 36,
alignItems: 'center',
justifyContent: 'center',
'&:hover': {
// bgcolor: theme.palette.mode === ThemeMode.DARK ? 'secondary.light' : 'secondary.lighter'
bgcolor:'#7b1fa2'
bgcolor: '#7b1fa2'
}
}),
...(!drawerOpen &&
@@ -157,7 +159,17 @@ setIshover('')
{(drawerOpen || (!drawerOpen && level !== 1)) && (
<ListItemText
primary={
<Typography variant="h6" sx={{ color: isSelected ? iconSelectedColor : textColor }}>
<Typography
variant="h6"
// sx={{ color: isSelected ? iconSelectedColor : textColor }}
sx={{
color: isSelected && !drawerOpen ? theme.palette.primary.main : !isSelected ? 'white' : theme.palette.primary.main,
bgcolor: isSelected && !drawerOpen ? theme.palette.primary.lighter : 'none',
padding: isSelected && !drawerOpen ? 0.8 : 'none',
borderRadius: isSelected && !drawerOpen ? 2 : 'none',
ml: isSelected && !drawerOpen ? 0.5 : 'none'
}}
>
{item.title}
</Typography>
}

3
src/layout/MainLayout/index.js
View File

@@ -44,7 +44,8 @@ const MainLayout = () => {
<Box component="main" sx={{ width: 'calc(100% - 260px)', flexGrow: 1, p: { xs: 2, sm: 3 } }}>
<Toolbar sx={{ mt: isHorizontal ? 8 : 'inherit' }} />
<Container
maxWidth={container ? 'xl' : false}
// maxWidth={container ? 'xl' : false}
maxWidth
sx={{
...(container && { px: { xs: 0, sm: 2 } }),
position: 'relative',