fixed collapse function with fixed action container width

Author: garrettlchow

src/app/containers/ActionContainer.tsx

@@ -130,11 +130,6 @@ function ActionContainer(props: ActionContainerProps): JSX.Element {
     },
   );
 
-  // JR: this is questionable, why would you always set it to true?
-  // useEffect(() => {
-  //   setActionView(true);
-  // }, [setActionView]);
-
   // Function sends message to background.js which sends message to the content script
   const toggleRecord = (): void => {
     port.postMessage({
@@ -174,22 +169,11 @@ function ActionContainer(props: ActionContainerProps): JSX.Element {
               className='toggle'
             >
               {' '}
-              {/* JR: updating onClick to stop propagation so that it detects the click only on the arrow and not the parent*/}
               <i />
             </a>
           </aside>
           <div className='collapse'>Collapse</div>
         </div>
-        {/* <a type='button' id='recordBtn' onClick={toggleRecord}>
-          <i />
-          <div
-            className='toggle-record'
-            style={{ display: 'flex', alignItems: 'center', textAlign: 'right' }}
-          >
-            Record
-          </div>
-          {recordingActions ? <Switch defaultChecked /> : <Switch />}
-        </a> */}
       </div>
       {actionView ? (
         <div className='action-button-wrapper'>
@@ -218,8 +202,9 @@ function ActionContainer(props: ActionContainerProps): JSX.Element {
             </Button>
           </div>
           <div className='snapshots'>
-            {dropdownSelection === 'Provider/Consumer' && <ProvConContainer  currentSnapshot={currLocation.stateSnapshot}
-         />}
+            {dropdownSelection === 'Provider/Consumer' && (
+              <ProvConContainer currentSnapshot={currLocation.stateSnapshot} />
+            )}
             {dropdownSelection === 'TimeJump' &&
               Object.keys(routes).map((route, i) => (
                 <RouteDescription key={`route${i}`} actions={routes[route]} />

src/app/containers/MainContainer.tsx

@@ -40,6 +40,9 @@ function MainContainer(): JSX.Element {
   const toggleActionContainer = () => {
     setActionView(!actionView); // sets actionView to the opposite boolean value
 
+    const bodyContainer = document.getElementById('bodyContainer');
+    bodyContainer.classList.toggle('collapsed');
+
     const toggleElem = document.querySelector('aside'); // aside is like an added text that appears "on the side" aside some text.
     toggleElem.classList.toggle('no-aside'); // toggles the addition or the removal of the 'no-aside' class
 
@@ -211,7 +214,7 @@ function MainContainer(): JSX.Element {
           actionView={actionView}
           setActionView={setActionView}
           toggleActionContainer={toggleActionContainer}
-          snapshots={snapshots} 
+          snapshots={snapshots}
           currLocation={currLocation}
         />
         {/* @ts-ignore */}

src/app/styles/layout/_actionContainer.scss

@@ -5,8 +5,22 @@
   overflow-x: hidden;
   overflow-y: auto;
   height: 100%;
+
+  .action-button-wrapper {
+    opacity: 1;
+    visibility: visible;
+    transition:
+      opacity 0.2s ease,
+      visibility 0.2s ease;
+  }
 }
 
+.collapsed .action-container {
+  .action-button-wrapper {
+    opacity: 0;
+    visibility: hidden;
+  }
+}
 .actionname {
   background-color: $indiv-action-input-bg;
   border: 1px solid $indiv-action-border;

src/app/styles/layout/_bodyContainer.scss

@@ -2,23 +2,15 @@
   height: 100%;
   overflow: hidden;
   display: grid;
-  grid-template-columns: 280px 1fr; /* Set action container width to 320px */
-  grid-template-rows: 1fr auto; /* Change to auto for the bottom row */
+  grid-template-columns: 280px 1fr;
+  grid-template-rows: 1fr auto;
   grid-template-areas:
     'actions states'
     'bottom bottom';
-}
+  transition: grid-template-columns 0.3s ease;
 
-/* if extension width is less than 500px, stack the body containers */
-@media (max-width: 500px) {
-  .body-container {
-    grid-template-rows: 3fr 5fr 1fr;
-    grid-template-columns: auto;
-    grid-template-areas:
-      'actions'
-      'states'
-      'travel'
-      'buttons';
+  &.collapsed {
+    grid-template-columns: 45px 1fr;
   }
 }