added collapse items

Author: jpabloms2

front/src/pods/trainer/components/header.component.tsx

@@ -1,6 +1,9 @@
 import React from 'react';
 import { cx } from 'emotion';
+import Collapse from '@material-ui/core/Collapse';
 import FileCopyOutlinedIcon from '@material-ui/icons/FileCopyOutlined';
+import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
+import ExpandLessIcon from '@material-ui/icons/ExpandLess';
 import * as innerClasses from './header.styles';
 
 interface Props {
@@ -39,28 +42,45 @@ interface CopyFieldProps {
 export const CopyFieldComponent: React.FC<CopyFieldProps> = props => {
   const { labelName, inputId, urlLink } = props;
 
+  const [open, setOpen] = React.useState(true);
+
+  const handleClick = () => {
+    setOpen(!open);
+  };
+
   return (
     <>
-      <label className={innerClasses.label} htmlFor={inputId}>
+      <label
+        className={innerClasses.label}
+        htmlFor={inputId}
+        onClick={handleClick}
+      >
         {labelName}
+        {open ? (
+          <ExpandLessIcon className={innerClasses.collapseIcon} />
+        ) : (
+          <ExpandMoreIcon className={innerClasses.collapseIcon} />
+        )}
       </label>
-      <div className={innerClasses.inputContainer}>
-        <input
-          id={inputId}
-          type="text"
-          className={innerClasses.input}
-          value={urlLink}
-          readOnly
-          aria-readonly
-        />
-        <button
-          aria-label={`copy ${labelName}`}
-          className={innerClasses.button}
-          onClick={() => navigator.clipboard.writeText(urlLink)}
-        >
-          <FileCopyOutlinedIcon className={innerClasses.icon} />
-        </button>
-      </div>
+      <Collapse in={open} timeout="auto" unmountOnExit>
+        <div className={innerClasses.inputContainer}>
+          <input
+            id={inputId}
+            type="text"
+            className={innerClasses.input}
+            value={urlLink}
+            readOnly
+            aria-readonly
+          />
+          <button
+            aria-label={`copy ${labelName}`}
+            className={innerClasses.button}
+            onClick={() => navigator.clipboard.writeText(urlLink)}
+          >
+            <FileCopyOutlinedIcon className={innerClasses.icon} />
+          </button>
+        </div>
+      </Collapse>
     </>
   );
 };

front/src/pods/trainer/components/header.styles.ts

@@ -14,6 +14,17 @@ export const label = css`
   font-family: ${typography.fontFamily};
   font-size: 1.125rem;
   color: ${palette.text.primary};
+  display: flex;
+  cursor: pointer;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
+  & :hover {
+    background-color: rgba(0, 0, 0, 0.12);
+  }
+`;
+
+export const collapseIcon = css`
+  font-size: 1.7rem;
+  margin: 0 1%;
 `;
 
 export const inputContainer = css`