feat/collapsible sidebar (#844)

c2siorg · Jul 21, 2023 · 7ee4352 · 7ee4352
1 parent 6446e9e
commit 7ee4352
Show file tree

Hide file tree

Showing 3 changed files with 105 additions and 15 deletions.
diff --git a/src/components/Tutorials/index.jsx b/src/components/Tutorials/index.jsx
@@ -22,6 +22,66 @@ import Spinner from "../../helpers/spinner";
 import AddNewStepModal from "./subComps/AddNewStep";
 import QuillEditor from "../Editor/QuillEditor";
 import RichTextRenderer from "./subComps/RichTextRenderer";
+import { Collapse, Button } from "@mui/material";
+import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
+import { makeStyles } from "@mui/styles";
+
+const useStyles = makeStyles(theme => ({
+  flexRow: {
+    display: "flex",
+    flexDirection: "row"
+  },
+  collapseContainer: {
+    minWidth: "100%",
+    "& > div > div": {
+      minWidth: "100%"
+    },
+    overflow: "hidden",
+    transition: theme.transitions.create(["width"])
+  },
+  widthTransition: {
+    overflow: "hidden",
+    transition: theme.transitions.create(["width"])
+  },
+  expandButton: {
+    display: "flex",
+    alignItems: "start",
+    paddingTop: "15px"
+  },
+  rotateChildren: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    transition: theme.transitions.create("transform", {
+      duration: theme.transitions.duration.shortest
+    })
+  },
+  ExpandIcon: {
+    fontSize: 50
+  },
+  editorContainer: {
+    width: "100%",
+    padding: "0 10px 10px 10px",
+    overflow: "hidden",
+    background: "white"
+  }
+}));
+
+const ExpandMore = props => {
+  const { expand, children, ...other } = props;
+  const classes = useStyles({ expand });
+
+  return (
+    <Button {...other} className={classes.expandButton}>
+      <div
+        className={classes.rotateChildren}
+        style={{ transform: !expand ? "rotate(270deg)" : "rotate(90deg)" }}
+      >
+        {children}
+      </div>
+    </Button>
+  );
+};
 
 const ViewTutorial = () => {
   const firebase = useFirebase();
@@ -37,10 +97,12 @@ const ViewTutorial = () => {
   const [currentStepContent, setCurrentStepContent] = useState(null);
   const [stepsData, setStepData] = useState(null);
   const [tutorialData, setTutorialData] = useState(null);
+  const [expand, setExpand] = useState(true);
   const isDesktop = useMediaQuery({
     query: "(min-device-width: 767px)"
   });
   const { owner, tutorial_id } = useParams();
+  const classes = useStyles();
 
   useEffect(() => {
     getCurrentTutorialData(owner, tutorial_id)(firebase, firestore, dispatch);
@@ -147,23 +209,44 @@ const ViewTutorial = () => {
             />
           </Grid>
         </Grid>
-        <Grid style={{ display: "flex", flexDirection: "row" }}>
+        <Grid className={classes.flexRow}>
+          <ExpandMore
+            expand={expand}
+            onClick={() => {
+              setExpand(prev => !prev);
+              setStepPanelVisible(prev => !prev);
+            }}
+            aria-expanded={expand}
+            aria-label="show more"
+          >
+            <ExpandMoreIcon className={classes.ExpandIcon} />
+          </ExpandMore>
+
           <Grid
             width={stepPanelVisible ? (isDesktop ? "55%" : "100%") : "0"}
-            style={{ backgroundColor: "white", padding: "0 2rem" }}
+            padding={stepPanelVisible ? "0 2rem" : "0"}
+            className={classes.widthTransition}
           >
-            <StepsPanel
-              currentStep={currentStep}
-              onChange={onChange}
-              stepsData={stepsData}
-              onClick={() => setStepPanelVisible(false)}
-              hideButton={isDesktop}
-              setCurrentStep={setCurrentStep}
-              setStepData={setStepData}
-            />
+            <Collapse
+              in={expand}
+              timeout="auto"
+              unmountOnExit
+              orientation="horizontal"
+              className={classes.collapseContainer}
+            >
+              <StepsPanel
+                currentStep={currentStep}
+                onChange={onChange}
+                stepsData={stepsData}
+                onClick={() => setStepPanelVisible(false)}
+                hideButton={isDesktop}
+                setCurrentStep={setCurrentStep}
+                setStepData={setStepData}
+              />
+            </Collapse>
           </Grid>
 
-          <Grid style={{ width: "90%", background: "#f0f0f0" }}>
+          <Grid className={classes.editorContainer}>
             <Grid className="tutorial-content" justify="center" container>
               <Grid
                 xs={24}

diff --git a/src/components/Tutorials/subComps/ControlButtons.jsx b/src/components/Tutorials/subComps/ControlButtons.jsx
@@ -11,7 +11,8 @@ const useStyles = makeStyles(theme => ({
     justifyContent: "space-between",
     [theme.breakpoints.down("sm")]: {
       flexDirection: "column",
-      alignItems: "center"
+      alignItems: "center",
+      gap: "30px"
     }
   },
   rightButtonsGroup: {
@@ -22,7 +23,11 @@ const useStyles = makeStyles(theme => ({
     borderWidth: "2px",
     "&:hover": {
       borderWidth: "2px"
-    }
+    },
+    minWidth: "fit-content",
+  },
+  completeButton: {
+    minWidth: "fit-content"
   }
 }));
 
@@ -86,6 +91,7 @@ const ControlButtons = ({
                   )
                 );
               }}
+              className={classes.completeButton}
             >
               {stepsData[currentStep].completed
                 ? "Reset Step"

diff --git a/src/components/Tutorials/subComps/TutorialTitle.jsx b/src/components/Tutorials/subComps/TutorialTitle.jsx
@@ -35,7 +35,8 @@ const TutorialHeading = ({
         data-testid="tutorialTitle"
         variant="h5"
         sx={{
-          pt: 5
+          pt: 2,
+          pb: 2
         }}
       >
         {tutorialData.title}