move components to component folder

client/src/Components/Sidebar/collapseButton.jsx

@@ -1,55 +0,0 @@
-import IconButton from "@mui/material/IconButton";
-import ArrowRight from "../ArrowRight";
-import ArrowLeft from "../ArrowLeft";
-import { useTheme } from "@mui/material/styles";
-import { useDispatch } from "react-redux";
-import { toggleSidebar } from "../../Features/UI/uiSlice";
-import PropTypes from "prop-types";
-
-const CollapseButton = ({ collapsed }) => {
-	const theme = useTheme();
-	const dispatch = useDispatch();
-	const arrowIcon = collapsed ? (
-		<ArrowRight
-			height={theme.spacing(8)}
-			width={theme.spacing(8)}
-			color={theme.palette.primary.contrastTextSecondary}
-		/>
-	) : (
-		<ArrowLeft
-			height={theme.spacing(8)}
-			width={theme.spacing(8)}
-			color={theme.palette.primary.contrastTextSecondary}
-		/>
-	);
-	return (
-		<IconButton
-			sx={{
-				position: "absolute",
-				/* TODO 60 is a magic number. if logo chnges size this might break */
-				top: 60,
-				right: 0,
-				transform: `translate(50%, 0)`,
-				backgroundColor: theme.palette.tertiary.main,
-				border: `1px solid ${theme.palette.primary.lowContrast}`,
-				p: theme.spacing(2.5),
-
-				"&:focus": { outline: "none" },
-				"&:hover": {
-					backgroundColor: theme.palette.primary.lowContrast,
-					borderColor: theme.palette.primary.lowContrast,
-				},
-			}}
-			onClick={() => {
-				dispatch(toggleSidebar());
-			}}
-		>
-			{arrowIcon}
-		</IconButton>
-	);
-};
-
-CollapseButton.propTypes = {
-	collapsed: PropTypes.bool.isRequired,
-};
-export default CollapseButton;

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

@@ -4,27 +4,24 @@ import ArrowLeft from "../../ArrowLeft";
 import { useTheme } from "@mui/material/styles";
 import { useDispatch } from "react-redux";
 import { toggleSidebar } from "../../../Features/UI/uiSlice";
-
 import PropTypes from "prop-types";
 
 const CollapseButton = ({ collapsed }) => {
 	const theme = useTheme();
 	const dispatch = useDispatch();
-
 	const arrowIcon = collapsed ? (
 		<ArrowRight
-			width={theme.spacing(8)}
 			height={theme.spacing(8)}
+			width={theme.spacing(8)}
 			color={theme.palette.primary.contrastTextSecondary}
 		/>
 	) : (
 		<ArrowLeft
-			width={theme.spacing(8)}
 			height={theme.spacing(8)}
+			width={theme.spacing(8)}
 			color={theme.palette.primary.contrastTextSecondary}
 		/>
 	);
-
 	return (
 		<IconButton
 			sx={{
@@ -53,7 +50,6 @@ const CollapseButton = ({ collapsed }) => {
 };
 
 CollapseButton.propTypes = {
-	collapsed: PropTypes.bool,
+	collapsed: PropTypes.bool.isRequired,
 };
-
 export default CollapseButton;

client/src/Components/Sidebar/index.jsx

@@ -1,8 +1,8 @@
 import Stack from "@mui/material/Stack";
 
 import List from "@mui/material/List";
-import Logo from "./logo";
-import CollapseButton from "./collapseButton";
+import Logo from "./components/logo";
+import CollapseButton from "./components/collapseButton";
 import Divider from "@mui/material/Divider";
 import NavItem from "./components/navItem";
 import AuthFooter from "./components/authFooter";

client/src/Components/Sidebar/logo.jsx

@@ -1,62 +0,0 @@
-import Stack from "@mui/material/Stack";
-import Box from "@mui/material/Box";
-import Typography from "@mui/material/Typography";
-import { useTheme } from "@mui/material/styles";
-import { useNavigate } from "react-router";
-import { useTranslation } from "react-i18next";
-
-const Logo = ({ collapsed }) => {
-	const { t } = useTranslation();
-	const theme = useTheme();
-	const navigate = useNavigate();
-
-	return (
-		<Stack
-			pt={theme.spacing(6)}
-			pb={theme.spacing(12)}
-			pl={theme.spacing(8)}
-			direction="row"
-			alignItems="center"
-			gap={theme.spacing(4)}
-			onClick={() => navigate("/")}
-			sx={{ cursor: "pointer" }}
-		>
-			<Typography
-				pl={theme.spacing("1px")}
-				minWidth={theme.spacing(16)}
-				minHeight={theme.spacing(16)}
-				display={"flex"}
-				justifyContent={"center"}
-				alignItems={"center"}
-				backgroundColor={theme.palette.accent.main}
-				borderRadius={theme.shape.borderRadius}
-				color={theme.palette.accent.contrastText}
-				fontSize={18}
-			>
-				C
-			</Typography>
-			<Box
-				overflow={"hidden"}
-				sx={{
-					transition: "opacity 900ms ease",
-					opacity: collapsed ? 0 : 1,
-					whiteSpace: "nowrap",
-					width: collapsed ? 0 : "auto",
-				}}
-			>
-				{" "}
-				<Typography
-					lineHeight={1}
-					mt={theme.spacing(2)}
-					color={theme.palette.accent.contrastText}
-					fontSize={"var(--env-var-font-size-medium-plus)"}
-					sx={{ opacity: 0.8, fontWeight: 500 }}
-				>
-					{t("common.appName")}
-				</Typography>
-			</Box>
-		</Stack>
-	);
-};
-
-export default Logo;