Merge pull request #143 from pranavkparti/ui-sidebar-fix

UI sidebar fix
Greenstand · Sep 8, 2024 · 269a3ca · 269a3ca
2 parents 00c2a9a + 80aa88b
commit 269a3ca
Show file tree

Hide file tree

Showing 5 changed files with 84 additions and 73 deletions.
diff --git a/src/components/layout/Menu/MenuItem/LinkItem.js b/src/components/layout/Menu/MenuItem/LinkItem.js
@@ -1,4 +1,8 @@
-import { ItemButtonStyled, ItemIconStyled, LinkItemStyled } from './MenuItemStyled';
+import {
+ ItemButtonStyled,
+ ItemIconStyled,
+ LinkItemStyled,
+} from './MenuItemStyled';
 import ListItemText from '@mui/material/ListItemText';
 import * as React from 'react';
 import Badge from '@mui/material/Badge';
@@ -7,34 +11,41 @@ const StyledBadge = styled(Badge)(({ theme }) => ({
  marginLeft: theme.spacing(1),
 }));
 
-
-const LinkItem = ({ itemPath, itemName, itemIcon, isActive, open, pendingCount }) => {
+const LinkItem = ({
+ itemPath,
+ itemName,
+ itemIcon,
+ isActive,
+ open,
+ pendingCount,
+}) => {
  return (
-
  <LinkItemStyled to={itemPath} isActive={isActive}>
  <ItemButtonStyled open={open}>
- <ItemIconStyled open={open}>
+ <ItemIconStyled open={open} isActive={isActive}>
  {itemIcon}
  </ItemIconStyled>
  <ListItemText
  primary={itemName}
- sx={{ opacity: open ? 1 : 0, marginLeft: open ? '1rem' : 0, fontWeight: 'bold' }}
+ sx={{
+ opacity: open ? 1 : 0,
+ marginLeft: open ? '1rem' : 0,
+ fontWeight: 'bold',
+ }}
  />
- { pendingCount &&
- <StyledBadge
- badgeContent={pendingCount}
- color="error"
- anchorOrigin={{
- vertical: 'top',
- horizontal: 'right',
- }}
- > 
- </StyledBadge>
- }
+ {pendingCount && (
+ <StyledBadge
+ badgeContent={pendingCount}
+ color="error"
+ anchorOrigin={{
+ vertical: 'top',
+ horizontal: 'right',
+ }}
+ ></StyledBadge>
+ )}
  </ItemButtonStyled>
  </LinkItemStyled>
-
  );
 };
 
-export default LinkItem; 
+export default LinkItem;
diff --git a/src/components/layout/Menu/MenuItem/MenuItemStyled.js b/src/components/layout/Menu/MenuItem/MenuItemStyled.js
@@ -4,11 +4,9 @@ import { NavLink } from 'react-router-dom';
 
 const LinkItemStyled = styled(NavLink)(({ theme, isActive }) => ({
  textDecoration: 'none',
- color: isActive ? theme.palette.primary.main : theme.palette.primary.lightMain,
- backgroundColor: isActive ? theme.palette.action.active: null,
- borderTopRightRadius: isActive ? '25px': null,
- borderBottomRightRadius: isActive ? '25px': null,
- width: '14.5rem'
+ color: isActive ? theme.palette.stats.white : theme.palette.primary.lightMain,
+ backgroundColor: isActive ? theme.palette.action.active : null,
+ width: '14.5rem',
 }));
 
 const ItemButtonStyled = styled(ListItemButton)(({ open }) => ({
@@ -17,10 +15,11 @@ const ItemButtonStyled = styled(ListItemButton)(({ open }) => ({
  px: 2.5,
 }));
 
-const ItemIconStyled = styled(ListItemIcon)(({ open }) => ({
+const ItemIconStyled = styled(ListItemIcon)(({ open, theme, isActive }) => ({
  minWidth: 0,
  mr: open ? 3 : 'auto',
  justifyContent: 'center',
+ color: isActive ? theme.palette.stats.white : theme.palette.primary.lightMain,
 }));
 
 export { ItemButtonStyled, ItemIconStyled, LinkItemStyled };
diff --git a/src/components/layout/Menu/MenuStyled.js b/src/components/layout/Menu/MenuStyled.js
@@ -1,59 +1,59 @@
-import MuiDrawer from "@mui/material/Drawer";
-import { styled } from "@mui/system";
+import MuiDrawer from '@mui/material/Drawer';
+import { styled } from '@mui/system';
 
-const drawerWidth = 240;
-const mobileDrawerWidth = 140;
+const drawerWidth = 200;
+const mobileDrawerWidth = 200;
 
 const openedMixin = (theme) => ({
  width: mobileDrawerWidth,
- [theme.breakpoints.up("sm")]: {
+ [theme.breakpoints.up('sm')]: {
  width: drawerWidth,
  },
- transition: theme.transitions.create("width", {
+ transition: theme.transitions.create('width', {
  easing: theme.transitions.easing.sharp,
  duration: theme.transitions.duration.enteringScreen,
  }),
- overflowX: "hidden",
+ overflowX: 'hidden',
 });
 
 const closedMixin = (theme) => ({
- transition: theme.transitions.create("width", {
+ transition: theme.transitions.create('width', {
  easing: theme.transitions.easing.sharp,
  duration: theme.transitions.duration.leavingScreen,
  }),
- overflowX: "hidden",
- width: `calc(${theme.spacing(8)} + 1px)`,
- [theme.breakpoints.up("sm")]: {
- width: `calc(${theme.spacing(8)} + 1px)`,
+ overflowX: 'hidden',
+ width: `calc(${theme.spacing(12)} + 1px)`,
+ [theme.breakpoints.up('sm')]: {
+ width: `calc(${theme.spacing(12)} + 1px)`,
  },
 });
 
-const DrawerHeaderStyled = styled("div")(({ theme }) => ({
- display: "flex",
- alignItems: "center",
- justifyContent: "flex-end",
+const DrawerHeaderStyled = styled('div')(({ theme }) => ({
+ display: 'flex',
+ alignItems: 'center',
+ justifyContent: 'flex-end',
  padding: theme.spacing(0, 1),
  // necessary for content to be below app bar
  ...theme.mixins.toolbar,
 }));
 
 const DrawerStyled = styled(MuiDrawer, {
- shouldForwardProp: (prop) => prop !== "open",
+ shouldForwardProp: (prop) => prop !== 'open',
 })(({ theme, open }) => ({
  width: mobileDrawerWidth,
- [theme.breakpoints.up("sm")]: {
+ [theme.breakpoints.up('sm')]: {
  width: drawerWidth,
  },
  flexShrink: 0,
- whiteSpace: "nowrap",
- boxSizing: "border-box",
+ whiteSpace: 'nowrap',
+ boxSizing: 'border-box',
  ...(open && {
  ...openedMixin(theme),
- "& .MuiDrawer-paper": openedMixin(theme),
+ '& .MuiDrawer-paper': openedMixin(theme),
  }),
  ...(!open && {
  ...closedMixin(theme),
- "& .MuiDrawer-paper": closedMixin(theme),
+ '& .MuiDrawer-paper': closedMixin(theme),
  }),
 }));
 

diff --git a/src/components/layout/Menu/TopMenu/TopMenu.js b/src/components/layout/Menu/TopMenu/TopMenu.js
@@ -1,11 +1,11 @@
-import MenuIcon from "@mui/icons-material/Menu";
-import IconButton from "@mui/material/IconButton";
-import LogoutIcon from "@mui/icons-material/Logout";
-import * as React from "react";
-import { AppBarStyled, LogoStyled, ToolbarStyled } from "./TopMenuStyled";
-import AuthContext from "../../../../store/auth-context";
-import { FlexDiv } from "../../../UI/styledComponents/CommonStyled";
-import IconLogo from "../../../UI/IconLogo";
+import MenuIcon from '@mui/icons-material/Menu';
+import IconButton from '@mui/material/IconButton';
+import LogoutIcon from '@mui/icons-material/Logout';
+import * as React from 'react';
+import { AppBarStyled, LogoStyled, ToolbarStyled } from './TopMenuStyled';
+import AuthContext from '../../../../store/auth-context';
+import { FlexDiv } from '../../../UI/styledComponents/CommonStyled';
+import IconLogo from '../../../UI/IconLogo';
 
 const TopMenu = ({ handleDrawerOpen, open }) => {
  const authContext = React.useContext(AuthContext);
@@ -23,7 +23,8 @@ const TopMenu = ({ handleDrawerOpen, open }) => {
  edge="start"
  sx={{
  marginRight: 5,
- ...(open && { display: "none" }),
+ marginLeft: 0,
+ ...(open && { display: 'none' }),
  }}
  >
  <MenuIcon />
@@ -35,7 +36,7 @@ const TopMenu = ({ handleDrawerOpen, open }) => {
  <div>
  <LogoutIcon
  color="inherit"
- style={{ cursor: "pointer" }}
+ style={{ cursor: 'pointer' }}
  onClick={logoutHandler}
  ></LogoutIcon>
  </div>

diff --git a/src/components/layout/Menu/TopMenu/TopMenuStyled.js b/src/components/layout/Menu/TopMenu/TopMenuStyled.js
@@ -1,45 +1,45 @@
-import styled from "@emotion/styled";
-import { Toolbar, Typography } from "@mui/material";
-import MuiAppBar from "@mui/material/AppBar";
+import styled from '@emotion/styled';
+import { Toolbar, Typography } from '@mui/material';
+import MuiAppBar from '@mui/material/AppBar';
 
-const drawerWidth = 240;
-const mobileDrawerWidth = 140;
+const drawerWidth = 200;
+const mobileDrawerWidth = 200;
 
 const AppBarStyled = styled(MuiAppBar, {
- shouldForwardProp: (prop) => prop !== "open",
+ shouldForwardProp: (prop) => prop !== 'open',
 })(({ theme, open }) => ({
- backgroundColor: "white",
- boxShadow: "0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)",
+ backgroundColor: 'white',
+ boxShadow: '0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)',
  zIndex: theme.zIndex.drawer + 1,
- transition: theme.transitions.create(["width", "margin"], {
+ transition: theme.transitions.create(['width', 'margin'], {
  easing: theme.transitions.easing.sharp,
  duration: theme.transitions.duration.leavingScreen,
  }),
  ...(open && {
- [theme.breakpoints.up("sm")]: {
+ [theme.breakpoints.up('sm')]: {
  marginLeft: drawerWidth,
  width: `calc(100% - ${drawerWidth}px)`,
  },
  marginLeft: mobileDrawerWidth,
  width: `calc(100% - ${mobileDrawerWidth}px)`,
- transition: theme.transitions.create(["width", "margin"], {
+ transition: theme.transitions.create(['width', 'margin'], {
  easing: theme.transitions.easing.sharp,
  duration: theme.transitions.duration.enteringScreen,
  }),
  }),
 }));
 
 const LogoStyled = styled(Typography)(({ theme }) => ({
- "@media(max-width: 480px)": {
- margin: "auto",
+ '@media(max-width: 480px)': {
+ margin: 'auto',
  paddingRight: `calc(${theme.spacing(7)} + 1px)`,
  },
 }));
 
 const ToolbarStyled = styled(Toolbar)(() => ({
- display: "flex",
- alignItems: "center",
- justifyContent: "space-between",
+ display: 'flex',
+ alignItems: 'center',
+ justifyContent: 'space-between',
 }));
 
 export { AppBarStyled, ToolbarStyled, LogoStyled };