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

@@ -10,20 +10,22 @@
   cursor: pointer;
 }
 
-.transition {
-  transition: 0.35s width ease-in-out;
-}
-
 .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;
 }
 
-.width-0 {
-  width: 0;
+.mw-0 {
+  max-width: 0;
 }
 
 .collapse:not(.width):not(.show) {
@@ -34,7 +36,7 @@
   position: relative;
   height: 0;
   overflow: hidden;
-  transition: height 0.35s ease-in-out; 
+  transition: height 0.35s ease-in-out;
 }
 
 @media (prefers-reduced-motion: reduce) {

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

@@ -87,9 +87,7 @@ const ExamNavbar: React.FC<{
   const additionalClass = expanded ? 'sidebar-expanded' : 'sidebar-small';
   return (
     <div
-      id="sidebar"
       className={`
-        transition
         bg-dark
         text-white
         float-left
@@ -111,7 +109,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 => {