add onclick to avatar

client/src/Components/Avatar/index.jsx

@@ -15,7 +15,7 @@ import { useTheme } from "@emotion/react";
  * <Avatar src="assets/img" first="Alex" last="Holliday" small />
  */
 
-const Avatar = ({ src, small, sx }) => {
+const Avatar = ({ src, small, sx, onClick = () => {} }) => {
 	const { user } = useSelector((state) => state.auth);
 	const theme = useTheme();
 
@@ -31,6 +31,7 @@ const Avatar = ({ src, small, sx }) => {
 
 	return (
 		<MuiAvatar
+			onClick={onClick}
 			alt={`${user?.firstName} ${user?.lastName}`}
 			/* TODO What is the  /static/images/avatar/2.jpg ?*/
 			src={src ? src : user?.avatarImage ? image : "/static/images/avatar/2.jpg"}
@@ -66,6 +67,7 @@ Avatar.propTypes = {
 	src: PropTypes.string,
 	small: PropTypes.bool,
 	sx: PropTypes.object,
+	onClick: PropTypes.func,
 };
 
 export default Avatar;

client/src/Components/Sidebar/components/authFooter.jsx

@@ -100,7 +100,13 @@ const AuthFooter = ({ collapsed, accountMenuItems }) => {
 			borderRadius={theme.shape.borderRadius}
 			boxSizing={"border-box"}
 		>
-			<Avatar small={true} />
+			<Avatar
+				small={true}
+				onClick={(e) => collapsed && openPopup(e)}
+				sx={{
+					cursor: collapsed ? "pointer" : "default",
+				}}
+			/>
 
 			<Stack
 				direction={"row"}