12122023

src/layout/MainLayout/Drawer/MiniDrawerStyled.js

@@ -7,7 +7,8 @@ import { DRAWER_WIDTH, ThemeMode } from 'config';
 
 const openedMixin = (theme) => ({
   width: DRAWER_WIDTH,
-  borderRight: `1px solid ${theme.palette.divider}`,
+  // borderRight: `1px solid ${theme.palette.divider}`,
+  borderRight: 'none',
   transition: theme.transitions.create('width', {
     easing: theme.transitions.easing.sharp,
     duration: theme.transitions.duration.enteringScreen
@@ -22,7 +23,7 @@ const closedMixin = (theme) => ({
     easing: theme.transitions.easing.sharp,
     duration: theme.transitions.duration.leavingScreen
   }),
-  overflowX: 'hidden',
+  // overflowX: 'hidden',
   width: theme.spacing(7.5),
   borderRight: 'none',
   boxShadow: theme.customShadows.z1,
@@ -36,7 +37,7 @@ const MiniDrawerStyled = styled(Drawer, { shouldForwardProp: (prop) => prop !==
   flexShrink: 0,
   whiteSpace: 'nowrap',
   boxSizing: 'border-box',
-  
+
   ...(open && {
     ...openedMixin(theme),
     '& .MuiDrawer-paper': openedMixin(theme)

src/layout/MainLayout/Drawer/index.js

@@ -33,8 +33,11 @@ const MainDrawer = ({ window }) => {
   return (
     <Box component="nav" sx={{ flexShrink: { md: 0 }, zIndex: 1200 }} aria-label="mailbox folders">
       {!matchDownMD ? (
-        <MiniDrawerStyled variant="permanent" open={drawerOpen} >
-          {drawerHeader}
+        <MiniDrawerStyled 
+        variant="permanent" 
+        open={drawerOpen} 
+        >
+           {drawerHeader}
           {drawerContent}
         </MiniDrawerStyled>
       ) : (

src/layout/MainLayout/Header/HeaderContent/MobileSection.js

@@ -50,7 +50,12 @@ const MobileSection = () => {
     <>
       <Box sx={{ flexShrink: 0, ml: 0.75 }}>
         <IconButton
-          sx={{ color: 'text.primary', bgcolor: open ? iconBackColorOpen : iconBackColor }}
+          // sx={{ color: 'text.primary', bgcolor: open ? iconBackColorOpen : iconBackColor }}
+          sx={{ color: '#fff', bgcolor: 'transparent', ml: { xs: 0, lg: -2 },
+          fontSize:'25px',
+            ':hover':{
+              color: '#fff', bgcolor: 'transparent'
+            } }}
           aria-label="open more menu"
           ref={anchorRef}
           aria-controls={open ? 'menu-list-grow' : undefined}

src/layout/MainLayout/Header/HeaderContent/Notification.js

@@ -71,6 +71,7 @@ const Notification = () => {
 
   return (
     <Box sx={{ flexShrink: 0, ml: 0.75 }}>
+       <Tooltip title='Notifications'>
       <IconButton
         // color="secondary"
         // variant="light"
@@ -103,6 +104,7 @@ const Notification = () => {
           <BellOutlined />
         </Badge>
       </IconButton>
+      </Tooltip>
       <Popper
         placement={matchesXs ? 'bottom' : 'bottom-end'}
         open={open}

src/layout/MainLayout/Header/HeaderContent/Profile/index.js

@@ -96,6 +96,7 @@ navigate('/login')
 
   return (
     <Box sx={{ flexShrink: 0, ml: 0.75 }}>
+      <Tooltip title='Profile'>
       <ButtonBase
         sx={{
           p: 0.25,
@@ -120,6 +121,7 @@ navigate('/login')
             </Typography>
         </Stack>
       </ButtonBase>
+      </Tooltip>
       <Popper
         placement="bottom-end"
         open={open}

src/layout/MainLayout/Header/HeaderContent/index.js

@@ -235,11 +235,16 @@ const navigate = useNavigate()
         </Box>
 
 
-
+     
       <Notification />
+    
       {/* <Message /> */}
-      {!matchesXs && <Profile />}
-      {matchesXs && <MobileSection />}
+      {/* {!matchesXs && <Profile />}
+      {matchesXs && <MobileSection />} */}
+      <Tooltip title='Notifications'>
+
+      <Profile />
+      </Tooltip>
       </Stack>
       </Stack>
     </>