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

08122023

Browse Source
This commit is contained in:
Malai Raja
2023-12-08 19:01:21 +05:30
parent 743cae09b8
commit ecafa8fb25
27 changed files with 658 additions and 836 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
src/layout/MainLayout/Drawer/DrawerContent/Navigation/NavGroup.js
View File

@@ -227,7 +227,10 @@ const NavGroup = ({ item, lastItem, remItems, lastItemId, setSelectedItems, sele
item.title &&
drawerOpen && (
<Box sx={{ pl: 3, mb: 1.5 }}>
<Typography variant="subtitle2" color={theme.palette.mode === ThemeMode.DARK ? 'textSecondary' : 'text.secondary'}>
<Typography variant="subtitle2"
// color={theme.palette.mode === ThemeMode.DARK ? 'textSecondary' : 'text.secondary'}
sx={{color:'#fff'}}
>
{item.title}
</Typography>
{item.caption && (

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

@@ -1,5 +1,5 @@
import PropTypes from 'prop-types';
import { forwardRef, useEffect } from 'react';
import { forwardRef, useEffect,useState } from 'react';
import { Link } from 'react-router-dom';
import { useDispatch, useSelector } from 'react-redux';
@@ -9,8 +9,10 @@ import { Avatar, Chip, ListItemButton, ListItemIcon, ListItemText, Typography, u
// project import
import Dot from 'components/@extended/Dot';
import { MenuOrientation, ThemeMode } from 'config';
import useConfig from 'hooks/useConfig';
// import { dispatch, useSelector } from 'store';
import { activeItem, openDrawer } from 'store/reducers/menu';
// ==============================|| NAVIGATION - LIST ITEM ||============================== //
@@ -21,9 +23,11 @@ const NavItem = ({ item, level }) => {
const { menuOrientation } = useConfig();
const { drawerOpen, openItem } = useSelector((state) => state.menu);
const [ishover,setIshover]=useState('')
const downLG = useMediaQuery(theme.breakpoints.down('lg'));
let itemTarget = '_self';
if (item.target) {
itemTarget = '_blank';
@@ -35,9 +39,10 @@ const NavItem = ({ item, level }) => {
}
const Icon = item.icon;
const itemIcon = item.icon ? <Icon style={{ fontSize: drawerOpen ? '1rem' : '1.25rem' }} /> : false;
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 { pathname } = useLocation();
const pathname = document.location.pathname;
@@ -62,7 +67,7 @@ const NavItem = ({ item, level }) => {
// eslint-disable-next-line
}, [pathname]);
const textColor = theme.palette.mode === ThemeMode.DARK ? 'grey.400' : 'text.primary';
const textColor = theme.palette.mode === ThemeMode.DARK ? 'grey.400' : '#fff';
const iconSelectedColor = theme.palette.mode === ThemeMode.DARK && drawerOpen ? 'text.primary' : 'primary.main';
return (
@@ -72,13 +77,20 @@ const NavItem = ({ item, level }) => {
{...listItemProps}
disabled={item.disabled}
selected={isSelected}
onMouseEnter={(e,val)=>{
console.log(e)
}}
onMouseLeave={()=>{
setIshover('')
}}
sx={{
zIndex: 1201,
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: theme.palette.mode === ThemeMode.DARK ? 'divider' : 'primary.lighter',
@@ -92,7 +104,10 @@ const NavItem = ({ item, level }) => {
}),
...(!drawerOpen && {
'&:hover': {
bgcolor: 'transparent'
bgcolor: 'transparent',
// bgcolor:'#7b1fa2'
},
'&.Mui-selected': {
'&:hover': {
@@ -110,7 +125,11 @@ const NavItem = ({ item, level }) => {
<ListItemIcon
sx={{
minWidth: 28,
'&:hover': {
color:isSelected ? '#fff':iconSelectedColor ,
},
color: isSelected ? iconSelectedColor : textColor,
...(!drawerOpen && {
borderRadius: 1.5,
width: 36,
@@ -118,7 +137,9 @@ const NavItem = ({ item, level }) => {
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'
}
}),
...(!drawerOpen &&

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

@@ -22,7 +22,8 @@ const DrawerContent = () => {
'& .simplebar-content': {
display: 'flex',
flexDirection: 'column'
}
},
}}
>
<Navigation />

12
src/layout/MainLayout/Drawer/DrawerHeader/index.js
View File

@@ -11,8 +11,8 @@ import Logo from 'components/logo';
import { MenuOrientation } from 'config';
import useConfig from 'hooks/useConfig';
import logo from 'assets/images/logo-nearle.png'
import logo1 from 'assets/images/logo-sm.png'
import logo from 'assets/images/logo-nearle9.png'
import logo1 from 'assets/images/logo-sm1.png'
// ==============================|| DRAWER HEADER ||============================== //
const DrawerHeader = ({ open }) => {
@@ -39,12 +39,14 @@ const DrawerHeader = ({ open }) => {
{(open) &&
<img src={logo}
// width='160px'
height='45px'
width='170px'
// height='45px'
// width='170px'
alt='logo'/>
}
{(!open) &&
<img src={logo1} width='40px' alt='logo'/>
<img src={logo1}
width='40px'
alt='logo'/>
}
</DrawerHeaderStyled>
);

7
src/layout/MainLayout/Drawer/MiniDrawerStyled.js
View File

@@ -13,7 +13,8 @@ const openedMixin = (theme) => ({
duration: theme.transitions.duration.enteringScreen
}),
overflowX: 'hidden',
boxShadow: theme.palette.mode === ThemeMode.DARK ? theme.customShadows.z1 : 'none'
boxShadow: theme.palette.mode === ThemeMode.DARK ? theme.customShadows.z1 : 'none',
backgroundColor:'#662582',
});
const closedMixin = (theme) => ({
@@ -24,7 +25,8 @@ const closedMixin = (theme) => ({
overflowX: 'hidden',
width: theme.spacing(7.5),
borderRight: 'none',
boxShadow: theme.customShadows.z1
boxShadow: theme.customShadows.z1,
backgroundColor:'#662582',
});
// ==============================|| DRAWER - MINI STYLED ||============================== //
@@ -34,6 +36,7 @@ const MiniDrawerStyled = styled(Drawer, { shouldForwardProp: (prop) => prop !==
flexShrink: 0,
whiteSpace: 'nowrap',
boxSizing: 'border-box',
...(open && {
...openedMixin(theme),
'& .MuiDrawer-paper': openedMixin(theme)

5
src/layout/MainLayout/Drawer/index.js
View File

@@ -33,7 +33,7 @@ const MainDrawer = ({ window }) => {
return (
<Box component="nav" sx={{ flexShrink: { md: 0 }, zIndex: 1200 }} aria-label="mailbox folders">
{!matchDownMD ? (
<MiniDrawerStyled variant="permanent" open={drawerOpen}>
<MiniDrawerStyled variant="permanent" open={drawerOpen} >
{drawerHeader}
{drawerContent}
</MiniDrawerStyled>
@@ -51,7 +51,8 @@ const MainDrawer = ({ window }) => {
width: DRAWER_WIDTH,
borderRight: `1px solid ${theme.palette.divider}`,
backgroundImage: 'none',
boxShadow: 'inherit'
boxShadow: 'inherit',
bgcolor:'#662582'
}
}}
>

30
src/layout/MainLayout/Header/HeaderContent/Notification.js
View File

@@ -53,7 +53,7 @@ const Notification = () => {
const matchesXs = useMediaQuery(theme.breakpoints.down('md'));
const anchorRef = useRef(null);
const [read, setRead] = useState(2);
const [read, setRead] = useState(0);
const [open, setOpen] = useState(false);
const handleToggle = () => {
setOpen((prevOpen) => !prevOpen);
@@ -72,16 +72,34 @@ const Notification = () => {
return (
<Box sx={{ flexShrink: 0, ml: 0.75 }}>
<IconButton
color="secondary"
variant="light"
sx={{ color: 'text.primary', bgcolor: open ? iconBackColorOpen : iconBackColor }}
// color="secondary"
// variant="light"
// sx={{ color: 'text.primary', bgcolor: open ? iconBackColorOpen : iconBackColor }}
sx={{ color: '#fff',
fontSize:'20px',
// bgcolor: open ? iconBackColorOpen : iconBackColor
':hover':{
bgcolor:'transparent',
color: '#fff',
},
// bgcolor:'transparent'
}}
aria-label="open profile"
ref={anchorRef}
aria-controls={open ? 'profile-grow' : undefined}
aria-haspopup="true"
onClick={handleToggle}
// onClick={handleToggle}
>
<Badge badgeContent={read} color="primary">
<Badge badgeContent={read}
// color="primary"
sx={{
"& .MuiBadge-badge": {
color: "#662582",
backgroundColor: "white"
}
}}
>
<BellOutlined />
</Badge>
</IconButton>

12
src/layout/MainLayout/Header/HeaderContent/Profile/index.js
View File

@@ -99,13 +99,13 @@ navigate('/login')
<ButtonBase
sx={{
p: 0.25,
bgcolor: open ? iconBackColorOpen : 'transparent',
// bgcolor: open ? iconBackColorOpen : 'transparent',
borderRadius: 1,
'&:hover': { bgcolor: theme.palette.mode === ThemeMode.DARK ? 'secondary.light' : 'secondary.lighter' },
'&:focus-visible': {
outline: `2px solid ${theme.palette.secondary.dark}`,
outlineOffset: 2
}
// '&:hover': { bgcolor: theme.palette.mode === ThemeMode.DARK ? 'secondary.light' : 'secondary.lighter' },
// '&:focus-visible': {
// outline: `2px solid ${theme.palette.secondary.dark}`,
// outlineOffset: 2
// }
}}
aria-label="open profile"
ref={anchorRef}

21
src/layout/MainLayout/Header/HeaderContent/index.js
View File

@@ -55,17 +55,25 @@ const navigate = useNavigate()
{/* {!matchesXs && <Search />} */}
<Stack
width='100%'
direction='row' justifyContent='flex-end' spacing={2} alignItems='center'>
direction='row' justifyContent='space-between' spacing={2} alignItems='center'>
{/* {!matchesXs && megaMenu} */}
<Typography variant='h5' sx={{ml:2,color:'#fff'}}>{localStorage.getItem('firstname') || ''}</Typography>
{matchesXs && <Box sx={{ width: '100%', ml: 1 }} />}
<Stack direction={'row'} spacing={2}>
<Box sx={{ flexShrink: 0, ml: 0.75 }}>
<Tooltip title='Quick Menu'>
<IconButton
color="secondary"
variant="light"
sx={{
color: 'text.primary',
bgcolor: open ? iconBackColorOpen : iconBackColor
// color="secondary"
// variant="light"
// sx={{
// color: 'text.primary',
// bgcolor: open ? iconBackColorOpen : iconBackColor
// }}
sx={{ color: '#fff',
fontSize:'20px',
// bgcolor: open ? iconBackColorOpen : iconBackColor
bgcolor:'transparent',
// border:'1px solid #fff'
}}
aria-label="open profile"
// ref={anchorRef}
@@ -233,6 +241,7 @@ const navigate = useNavigate()
{!matchesXs && <Profile />}
{matchesXs && <MobileSection />}
</Stack>
</Stack>
</>
);
};

14
src/layout/MainLayout/Header/index.js
View File

@@ -43,9 +43,14 @@ const Header = () => {
aria-label="open drawer"
onClick={() => dispatch(openDrawer(!drawerOpen))}
edge="start"
color="secondary"
variant="light"
sx={{ color: 'text.primary', bgcolor: drawerOpen ? iconBackColorOpen : iconBackColor, ml: { xs: 0, lg: -2 } }}
// color="secondary"
// variant="light"
// sx={{ color: 'text.primary', bgcolor: drawerOpen ? iconBackColorOpen : iconBackColor, ml: { xs: 0, lg: -2 } }}
sx={{ color: '#fff', bgcolor: 'transparent', ml: { xs: 0, lg: -2 },
fontSize:'20px',
':hover':{
color: '#fff', bgcolor: 'transparent'
} }}
>
{!drawerOpen ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
</IconButton>
@@ -62,8 +67,9 @@ const Header = () => {
sx: {
borderBottom: `1px solid ${theme.palette.divider}`,
zIndex: 1200,
width: isHorizontal ? '100%' : drawerOpen ? 'calc(100% - 260px)' : { xs: '100%', lg: 'calc(100% - 60px)' }
width: isHorizontal ? '100%' : drawerOpen ? 'calc(100% - 260px)' : { xs: '100%', lg: 'calc(100% - 60px)' },
// boxShadow: theme.customShadows.z1
bgcolor:'#662582'
}
};