adding a snappy sidebar open animation

src/components/Sidebar.js

@@ -38,6 +38,7 @@ const Sidebar = ({facility, isSidebarOpen, isSidebarMapOpen, toggleSidebarMap, f
     }
 
     return (
+        <div className={classNames(['card-container-offset', (isSidebarOpen && 'card-container-offset-open'), (!isSidebarOpen && 'card-container-offset-closed')])}>
         <Paper
             className={classNames(['sidebar-root', (isSidebarOpen && 'sidebar-open'), (!isSidebarOpen && 'sidebar-closed')])}>
             <div className={'sidebar-row1'}>
@@ -54,8 +55,6 @@ const Sidebar = ({facility, isSidebarOpen, isSidebarMapOpen, toggleSidebarMap, f
                     <TextwTitle label="Phone Number" content="The Johnson Center"/>
                     <TextwTitle label="Tags" content={<FacilityTags facility={facility} />}/>
                     <TextwTitle label="Hours" content={<WeekHours facility={facility} />}/>
-                    
-
             </div>
             </div>
             <div className={'sidebar-row2'}>
@@ -64,7 +63,8 @@ const Sidebar = ({facility, isSidebarOpen, isSidebarMapOpen, toggleSidebarMap, f
                 {/* <Button className={'sidebar-toggle-map-btn'}
                         onClick={handleSidebarMapToggle}>{isSidebarMapOpen ? 'Close Map' : 'Open Map'}</Button> */}
             </div>
-        </Paper>
+        </Paper> 
+        </div>
     )
 };
 

src/styles/components/sidebar.scss

@@ -14,20 +14,36 @@
 }
 
 .sidebar-open {
-  flex: 1 0 400px;
+//   flex: 1 0 400px;
+ transform: translateX(0px);
 }
 
 .sidebar-closed {
-  flex: 1 0 0;
+//   flex: 1 0 0;
+ transform: translateX(400px);
 }
 
 .sidebar-root {
   overflow: hidden;
   display: block;
   box-sizing: border-box;
-  position: relative;
+  position: absolute;
+  right:0;
+  height:calc(100% - 64px);
+  width:400px;
+
+  @include transition(300ms cubic-bezier(0.820, 0.165, 0.340, 0.930));
+}
+.card-container-offset-open{
+    flex: 1 0 400px;
 
-  @include transition(150ms ease-in-out);
+}
+.card-container-offset-closed{
+    flex: 1 0 0px;
+
+}
+.card-container-offset{
+    // flex: 1 0 400px;
 }
 
 .sidebar-divider {

src/utils/facilityUtils.js

@@ -295,17 +295,17 @@ const getHoursByDay = (facility, dayOfWeek) => {
             allDayOrClosed:false
     })
     }
-    hours = [{
-        text: "11am - 2pm",
-        start:"11:00:00",
-        end:"14:00:00",
-        allDayOrClosed:false
-},{
-    text: "4pm - 5pm",
-    start:"16:00:00",
-    end:"17:00:00",
-    allDayOrClosed:false
-}];
+//     hours = [{
+//         text: "11am - 2pm",
+//         start:"11:00:00",
+//         end:"14:00:00",
+//         allDayOrClosed:false
+// },{
+//     text: "4pm - 5pm",
+//     start:"16:00:00",
+//     end:"17:00:00",
+//     allDayOrClosed:false
+// }];
     return hours.sort((a,b) => {
         return parseInt(a.start) - parseInt(b.start)
     })