Added Sidebar View Animation

Author: DennisLpz

src/app/containers/ActionContainer.tsx

@@ -17,6 +17,7 @@ const resetSlider = () => {
 function ActionContainer(props) {
   const [{ tabs, currentTab }, dispatch] = useStoreContext();
   const { hierarchy, sliderIndex, viewIndex } = tabs[currentTab];
+  const { toggleActionContainer, actionView } = props;
   let actionsArr = [];
   const hierarchyArr: any[] = [];
 
@@ -115,21 +116,32 @@ function ActionContainer(props) {
   // this is not logging; the prop is not being udpdated or the component is not being re-rendered.
   return (
     <div id='action-id' className='action-container'>
-      <SwitchAppDropdown />
-      <div className='action-component exclude'>
-        <button
-          className='empty-button'
-          onClick={() => {
-            dispatch(emptySnapshots());
-            // set slider back to zero
-            resetSlider();
-          }}
-          type='button'
-        >
-          Empty
-        </button>
+      <div id = "arrow">
+        <aside className='aside'>
+          <a onClick={toggleActionContainer} className='toggle'>
+            <i></i>
+          </a>
+        </aside>
       </div>
-      <div>{actionsArr}</div>
+      {actionView ? (
+        <div>
+          <SwitchAppDropdown />
+          <div className='action-component exclude'>
+            <button
+              className='empty-button'
+              onClick={() => {
+                dispatch(emptySnapshots());
+                // set slider back to zero
+                resetSlider();
+              }}
+              type='button'
+            >
+              Empty
+            </button>
+          </div>
+          <div>{actionsArr}</div>
+        </div>
+      ) : null}
     </div>
   );
 }

src/app/containers/MainContainer.tsx

@@ -23,18 +23,11 @@ function MainContainer(): any {
   const [store, dispatch] = useStoreContext();
   const { tabs, currentTab, port: currentPort } = store;
   const [actionView, setActionView] = useState(true);
+  //this function handles Time Jump sidebar view
   const toggleActionContainer = () => {
-    const bodyElem = document.getElementById('bodyContainer');
-    const toggleElement = document.getElementById('side-bar-button');
-
+    const toggleElem = document.querySelector('aside');
+    toggleElem.classList.toggle('no-aside');
     setActionView(!actionView);
-    if (actionView) {
-      bodyElem.style.gridTemplateColumns = '1fr 2fr';
-      toggleElement.innerHTML = 'Close';
-    } else {
-      bodyElem.style.gridTemplateColumns = '0fr auto';
-      toggleElement.innerHTML = '☰ Open Time Travel';
-    }
   };
 
   useEffect(() => {
@@ -196,7 +189,10 @@ function MainContainer(): any {
     <div className='main-container'>
       {/* <HeadContainer /> */}
       <div id='bodyContainer' className='body-container1'>
-        <ActionContainer toggleActionContainer={toggleActionContainer} />
+        <ActionContainer
+          actionView={actionView}
+          toggleActionContainer={toggleActionContainer}
+        />
         {snapshots.length ? (
           <StateContainer
             toggleActionContainer={toggleActionContainer}

src/app/containers/StateContainer.tsx

@@ -48,13 +48,20 @@ const StateContainer = (props: StateContainerProps): JSX.Element => {
         <div className='main-navbar-container'>
           <div className='main-navbar-text'>
             {' '}
-            <button
+            {/* <button
               id='side-bar-button'
               className='toggleAC'
               onClick={() => toggleActionContainer()}
             >
               Close
-            </button>
+            </button> */}
+            {/* <div className='toggleAC'>
+              <aside className='no-aside'>
+                <a className='toggle'>
+                  <i></i>
+                </a>
+              </aside>
+            </div> */}
           </div>
           <div className='main-navbar'>
             <NavLink

src/app/styles/base/_base.scss

@@ -15,19 +15,16 @@ body {
 
 .travel-container {
   grid-area: travel;
-  transition: margin-left 15s;
 }
 .action-container {
   grid-area: actions;
-  transition: 15s;
+  transition: 0.5s;
 }
 .state-container {
   grid-area: states;
-  transition: margin-left 15s;
 }
 .buttons-container {
   grid-area: buttons;
-  transition: margin-left 15s;
   border-color: rgba(41, 41, 41, 1);
 }
 

src/app/styles/components/_buttons.scss

@@ -297,3 +297,71 @@
   height: 30px;
   padding: 0 2rem;
 }
+/* sidebar button open and closing functionality */
+aside {
+  width: 250px;
+  background: #242529;
+  color: #fff;
+  transition: width 1s;
+}
+
+.no-aside {
+  width: 30px;
+}
+.toggle {
+  width: 40px;
+  height: 40px;
+  display: block;
+  position: relative;
+  margin-top: 1rem;
+}
+
+.toggle i,
+.toggle i::after,
+.toggle i::before {
+  position: absolute;
+  width: 27px;
+  height: 4px;
+  border-radius: 4px;
+  transition: transform 0.15s;
+  background-color: #00dffc;
+}
+
+.toggle i {
+  top: 46%;
+  left: 18%;
+  display: block;
+  background: #00dffc;
+}
+
+.toggle i::before {
+  top: -5px;
+}
+
+.toggle i::after {
+  bottom: -6px;
+}
+
+.toggle i::after,
+.toggle i::before {
+  content: '';
+  display: block;
+}
+
+.toggle i::before {
+  transform: translate3d(-8px, 0, 0) rotate(-45deg) scale(0.7, 1);
+}
+
+.toggle i::after {
+  transform: translate3d(-8px, 0, 0) rotate(45deg) scale(0.7, 1);
+}
+
+.no-aside .toggle i::before,
+.no-aside .toggle i::after {
+  transform: none;
+}
+#arrow {
+  height: 20px !important;
+  margin-bottom: 40px;
+  margin-right: 20px;
+}

src/app/styles/layout/_bodyContainer.scss

@@ -2,25 +2,14 @@
   height: 94%;
   overflow: hidden;
   display: grid;
-  grid-template-columns: 1fr 2fr;
+  grid-template-columns: min-content 2fr;
   grid-template-rows: 8fr 1fr;
   grid-template-areas:
     'actions states'
     'actions travel'
     'actions buttons';
 }
 
-.body-container2 {
-  height: 94%;
-  overflow: hidden;
-  display: grid;
-  grid-template-columns: 1fr 2fr;
-  grid-template-rows: 8fr 1fr;
-  grid-template-areas:
-    'actions states'
-    'travel travel'
-    'buttons buttons';
-}
 
 /* if extension width is less than 500px, stack the body containers */
 @media (max-width: 500px) {