added task rubric sidemenu

Author: rmfay1

package.json

@@ -25,6 +25,7 @@
     "aws-amplify": "^3.3.26",
     "aws-amplify-react": "^4.2.30",
     "bootstrap": "^4.6.0",
+    "clsx": "^1.1.1",
     "eslint-plugin-react": "^7.23.1",
     "formik": "^2.2.6",
     "get-video-id": "^3.2.0",

src/Screens/TaskView/Rubric/Rubric.tsx

@@ -1,6 +1,7 @@
-import { Checkbox, MenuItem } from '@material-ui/core';
+import { Checkbox, MenuItem, Typography } from '@material-ui/core';
 import { useState } from 'react';
-import { Navbar, Nav, Form, Button, Dropdown } from 'react-bootstrap';
+
+import { Form } from 'react-bootstrap';
 import { RubricRequirement } from '../../../__generated__/types';
 
 function Rubric({ requirement }: { requirement: RubricRequirement }) {
@@ -9,17 +10,17 @@ function Rubric({ requirement }: { requirement: RubricRequirement }) {
    const handleChange = () => {
       setComplete(!complete);
    };
+
    return (
-      <MenuItem>
+      <MenuItem style={{ width: '100%' }}>
          <Form.Group>
             <Checkbox
                checked={complete}
                onChange={handleChange}
                inputProps={{ 'aria-label': 'primary checkbox' }}
                color="default"
             />
-            {/* <Form.Check required checked={requirement.isComplete} /> */}
-            <Form.Label>{requirement.description}</Form.Label>
+            <Typography>{requirement.description}</Typography>
          </Form.Group>
       </MenuItem>
    );

src/Screens/TaskView/Rubric/RubricMenu.tsx

@@ -0,0 +1,125 @@
+import {
+   createStyles,
+   Divider,
+   Drawer,
+   IconButton,
+   makeStyles,
+   Theme,
+   useTheme,
+   Typography,
+} from '@material-ui/core';
+import { Form, Button, NavDropdown } from 'react-bootstrap';
+import { ChevronLeft, ChevronRight, Menu } from '@material-ui/icons';
+import clsx from 'clsx';
+import React from 'react';
+import { RubricRequirement } from '../../../__generated__/types';
+import Rubric from './Rubric';
+
+const useStyles = makeStyles((theme: Theme) =>
+   createStyles({
+      root: {
+         display: 'flex',
+      },
+      appBar: {
+         transition: theme.transitions.create(['margin', 'width'], {
+            easing: theme.transitions.easing.sharp,
+            duration: theme.transitions.duration.leavingScreen,
+         }),
+      },
+      appBarShift: {
+         transition: theme.transitions.create(['margin', 'width'], {
+            easing: theme.transitions.easing.easeOut,
+            duration: theme.transitions.duration.enteringScreen,
+         }),
+      },
+      title: {
+         flexGrow: 1,
+      },
+      hide: {
+         display: 'none',
+      },
+      drawer: {
+         flexShrink: 0,
+      },
+      drawerPaper: {},
+      drawerHeader: {
+         display: 'flex',
+         alignItems: 'center',
+         padding: theme.spacing(0, 1),
+         // necessary for content to be below app bar
+         ...theme.mixins.toolbar,
+         justifyContent: 'flex-start',
+      },
+      content: {
+         flexGrow: 1,
+         padding: theme.spacing(3),
+         transition: theme.transitions.create('margin', {
+            easing: theme.transitions.easing.sharp,
+            duration: theme.transitions.duration.leavingScreen,
+         }),
+      },
+      contentShift: {
+         transition: theme.transitions.create('margin', {
+            easing: theme.transitions.easing.easeOut,
+            duration: theme.transitions.duration.enteringScreen,
+         }),
+         marginRight: 0,
+      },
+   })
+);
+
+function RubricMenu({ requirements }: { requirements: RubricRequirement[] }) {
+   const classes = useStyles();
+   const theme = useTheme();
+   const [open, setOpen] = React.useState(false);
+
+   const handleDrawerOpen = () => {
+      setOpen(true);
+   };
+
+   const handleDrawerClose = () => {
+      setOpen(false);
+   };
+   return (
+      <div>
+         <IconButton
+            color="inherit"
+            aria-label="open drawer"
+            edge="end"
+            onClick={handleDrawerOpen}
+            className={clsx(open && classes.hide)}
+         >
+            <Menu />
+            <Typography>Task Rubric</Typography>
+         </IconButton>
+         <Drawer
+            className={classes.drawer}
+            variant="persistent"
+            anchor="right"
+            open={open}
+            classes={{
+               paper: classes.drawerPaper,
+            }}
+         >
+            <div className={classes.drawerHeader}>
+               <IconButton onClick={handleDrawerClose}>
+                  {theme.direction === 'rtl' ? <ChevronLeft /> : <ChevronRight />}
+               </IconButton>
+               <Typography>Task Rubric</Typography>
+            </div>
+            <Divider />
+            <Form>
+               {requirements.map((requirement: RubricRequirement) => (
+                  <Rubric requirement={requirement} />
+               ))}
+               <NavDropdown.Divider />
+               <Button className="mx-auto" type="submit">
+                  Submit Task
+               </Button>
+            </Form>
+         </Drawer>
+      </div>
+   );
+}
+
+export default RubricMenu;

src/Screens/TaskView/TaskNavbar/TaskNavbar.tsx

@@ -4,17 +4,16 @@ import { Dispatch, SetStateAction } from 'react';
 import { Navbar, Nav, Form, Button, NavDropdown, Dropdown } from 'react-bootstrap';
 import { RubricRequirement } from '../../../__generated__/types';
 import Rubric from '../Rubric/Rubric';
+import RubricMenu from '../Rubric/RubricMenu';
 import './TaskNavbar.css';
 
-function handleToggle() {}
-
 function TaskNavbar({ rubric }: { rubric: RubricRequirement[] }) {
    return (
       <Navbar collapseOnSelect expand="sm" bg="primary" variant="light">
          <Navbar.Toggle aria-controls="responsive-navbar-nav" />
          <Navbar.Collapse id="responsive-navbar-nav">
             <Nav className="container-fluid">
-               <Form inline>
+               <Form className="mr-3" inline>
                   <Button className="rounded-circle btn-light" type="submit" href="/">
                      <FontAwesomeIcon icon={faCaretLeft} />
                   </Button>
@@ -24,8 +23,10 @@ function TaskNavbar({ rubric }: { rubric: RubricRequirement[] }) {
                      <FontAwesomeIcon icon={faHandPaper} />
                   </Button>
                </Form>
-
-               <NavDropdown drop="left" title="Task Rubric" id="rubric-dropdown" className="ml-2">
+               <div className="ml-1 mr-0">
+                  <RubricMenu requirements={rubric} />
+               </div>
+               {/* <NavDropdown drop="left" title="Task Rubric" id="rubric-dropdown" className="ml-2">
                   <Form>
                      {rubric.map((requirement: RubricRequirement) => (
                         <Rubric requirement={requirement} />
@@ -35,7 +36,7 @@ function TaskNavbar({ rubric }: { rubric: RubricRequirement[] }) {
                         Submit Task
                      </Button>
                   </Form>
-               </NavDropdown>
+               </NavDropdown> */}
             </Nav>
          </Navbar.Collapse>
       </Navbar>