auth footer

client/src/Components/v2/design-elements/Avatar.tsx

@@ -8,7 +8,7 @@ interface AvatarProps {
 	src?: string;
 	small?: boolean;
 	sx?: object;
-	onClick?: Function;
+	onClick?: (event: React.MouseEvent<HTMLDivElement>) => void;
 }
 
 export const Avatar = ({ src, small, sx, onClick = () => {} }: AvatarProps) => {
@@ -17,7 +17,6 @@ export const Avatar = ({ src, small, sx, onClick = () => {} }: AvatarProps) => {
 	if (!user) return null;
 
 	const style = small ? { width: 32, height: 32 } : { width: 64, height: 64 };
-	const border = small ? 1 : 3;
 
 	const [image, setImage] = useState<string>();
 	useEffect(() => {

client/src/Components/v2/sidebar/Authfooter.tsx

@@ -6,7 +6,6 @@ import IconButton from "@mui/material/IconButton";
 import { Avatar, Icon } from "@/Components/v2/design-elements";
 import Menu from "@mui/material/Menu";
 import MenuItem from "@mui/material/MenuItem";
-import Divider from "@mui/material/Divider";
 import { MoreVertical, LogOut } from "lucide-react";
 
 import { useTheme } from "@mui/material";
@@ -97,7 +96,6 @@ const AuthFooter = ({
 	return (
 		<Stack
 			direction="row"
-			height="var(--env-var-side-bar-auth-footer-height)"
 			alignItems="center"
 			py={theme.spacing(4)}
 			px={theme.spacing(8)}
@@ -135,10 +133,8 @@ const AuthFooter = ({
 					}}
 				>
 					<Typography
-						color={theme.palette.primary.contrastText}
 						fontWeight={500}
 						lineHeight={1}
-						fontSize={"var(--env-var-font-size-medium)"}
 						sx={{
 							display: "block",
 							whiteSpace: "nowrap",
@@ -149,8 +145,6 @@ const AuthFooter = ({
 						{authState.user?.firstName} {authState.user?.lastName}
 					</Typography>
 					<Typography
-						color={theme.palette.primary.contrastText}
-						fontSize={"var(--env-var-font-size-small)"}
 						textOverflow="ellipsis"
 						overflow="hidden"
 						whiteSpace="nowrap"
@@ -228,7 +222,6 @@ const AuthFooter = ({
 									display: "block",
 									whiteSpace: "nowrap",
 									overflow: "visible",
-									// wordBreak: "break-word",
 									textOverflow: "clip",
 								}}
 							>
@@ -240,7 +233,6 @@ const AuthFooter = ({
 									fontSize: 12,
 									whiteSpace: "nowrap",
 									overflow: "visible",
-									// wordBreak: "break-word",
 								}}
 							>
 								{authState.user?.role}
@@ -248,9 +240,6 @@ const AuthFooter = ({
 						</Box>
 					</MenuItem>
 				)}
-				{/* TODO Do we need two dividers? */}
-				{collapsed && <Divider />}
-				{/* <Divider /> */}
 				{renderAccountMenuItems(authState.user, accountMenuItems)}
 				<MenuItem
 					onClick={logout}

client/src/Components/v2/sidebar/index.tsx

@@ -7,6 +7,7 @@ import { Logo } from "@/Components/v2/sidebar/Logo";
 import { getMenu, getBottomMenu, getAccountMenu } from "@/Components/v2/sidebar/Menu";
 import { NavItem } from "@/Components/v2/sidebar/NavItem";
 import { StarPrompt } from "@/Components/v2/sidebar/StarPrompt";
+import AuthFooter from "@/Components/v2/sidebar/Authfooter";
 
 import { useNavigate, useLocation } from "react-router";
 import { useTranslation } from "react-i18next";
@@ -26,7 +27,7 @@ export const Sidebar = () => {
 	const navigate = useNavigate();
 	const location = useLocation();
 	const { t } = useTranslation();
-	const { width, transition } = useSidebar();
+	const { width, transition, collapsed } = useSidebar();
 	const theme = useTheme();
 	const isSmall = useMediaQuery(theme.breakpoints.down("md"));
 	const menu = getMenu(t);
@@ -110,23 +111,11 @@ export const Sidebar = () => {
 				})}
 			</List>
 			<Divider sx={{ borderColor: theme.palette.divider }} />
-			<List
-				component="nav"
-				disablePadding
-				sx={{ px: theme.spacing(6) }}
-			>
-				{accountMenu.map((item) => {
-					const selected = location.pathname.startsWith(`/${item.path}`);
-					return (
-						<NavItem
-							key={item.path}
-							item={item}
-							selected={selected}
-							onClick={() => handleNavClick(item.path)}
-						/>
-					);
-				})}
-			</List>
+
+			<AuthFooter
+				collapsed={collapsed}
+				accountMenuItems={accountMenu}
+			/>
 		</Stack>
 	);
 };