let user resize sidebar

Author: kylesferrazza

app/javascript/components/workflows/student/exams/show/components/navbar/NavAccordionItem.tsx

@@ -36,7 +36,7 @@ const NavAccordionItem: React.FC<NavAccordionItemProps> = (props) => {
       onClick={(): void => onSectionClick(eventKey)}
     >
       <RenderIcon I={Icon} className="" />
-      <span aria-hidden="true" className="width-0">&nbsp;</span>
+      <span aria-hidden="true" className="mw-0">&nbsp;</span>
       <Collapse
         in={expanded}
         dimension="width"

app/javascript/components/workflows/student/exams/show/components/navbar/index.css

@@ -1,9 +1,19 @@
 .sidebar-small {
-  width: var(--sidebar-small);
+  transition: 0.35s max-width ease-in-out, 0.35s min-width ease-in-out;
+  min-width: var(--sidebar-small);
+  max-width: var(--sidebar-small);
 }
 
 .sidebar-expanded {
-  width: var(--sidebar-expanded);
+  transition: 0.35s max-width ease-in-out, 0.35s min-width ease-in-out;
+  min-width: var(--sidebar-expanded);
+  max-width: 50%;
+  resize: horizontal;
+  overflow: auto;
+}
+
+.mw-0 {
+  max-width: 0;
 }
 
 .collapse:not(.width):not(.show) {

app/javascript/components/workflows/student/exams/show/components/navbar/index.tsx

@@ -116,9 +116,7 @@ const ExamNavbar: React.FC<{
   const additionalClass = expanded ? 'sidebar-expanded' : 'sidebar-small';
   return (
     <div
-      id="sidebar"
       className={`
-        transition
         bg-dark
         text-white
         float-left
@@ -140,7 +138,7 @@ const ExamNavbar: React.FC<{
             Hourglass
           </h1>
         </Collapse>
-        <h1 aria-hidden="true" className="width-0">&nbsp;</h1>
+        <h1 aria-hidden="true" className="mw-0">&nbsp;</h1>
         <Button
           className="ml-2"
           onClick={(): void => {