add proptypes, fix logo text animation

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

@@ -4,6 +4,7 @@ import Typography from "@mui/material/Typography";
 import { useTheme } from "@mui/material/styles";
 import { useNavigate } from "react-router";
 import { useTranslation } from "react-i18next";
+import PropTypes from "prop-types";
 
 const Logo = ({ collapsed }) => {
 	const { t } = useTranslation();
@@ -38,10 +39,10 @@ const Logo = ({ collapsed }) => {
 			<Box
 				overflow={"hidden"}
 				sx={{
-					transition: "opacity 900ms ease",
+					transition: "opacity 900ms ease, width 900ms ease",
 					opacity: collapsed ? 0 : 1,
 					whiteSpace: "nowrap",
-					width: collapsed ? 0 : "auto",
+					width: collapsed ? 0 : "100%",
 				}}
 			>
 				{" "}
@@ -59,4 +60,8 @@ const Logo = ({ collapsed }) => {
 	);
 };
 
+Logo.propTypes = {
+	collapsed: PropTypes.bool,
+};
+
 export default Logo;

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

@@ -3,13 +3,11 @@ import ListItemButton from "@mui/material/ListItemButton";
 import ListItemIcon from "@mui/material/ListItemIcon";
 import Box from "@mui/material/Box";
 import Typography from "@mui/material/Typography";
-
 import { useTheme } from "@emotion/react";
-import { useNavigate } from "react-router";
+import PropTypes from "prop-types";
 
 const NavItem = ({ item, collapsed, selected, onClick }) => {
 	const theme = useTheme();
-	const navigate = useNavigate();
 
 	return (
 		<Tooltip
@@ -86,4 +84,10 @@ const NavItem = ({ item, collapsed, selected, onClick }) => {
 	);
 };
 
+NavItem.propTypes = {
+	item: PropTypes.object,
+	collapsed: PropTypes.bool,
+	selected: PropTypes.bool,
+	onClick: PropTypes.func,
+};
 export default NavItem;