adding scrolling to sidebar so it works with more screen resolutions

src/components/Sidebar.js

@@ -47,6 +47,7 @@ const Sidebar = ({facility, isSidebarOpen, isSidebarMapOpen, toggleSidebarMap, f
                 </div>
             </div>
             <Divider className={'sidebar-divider'}/>
+            <div className={'sidebar-scroll'}>
             <div className={'sidebar-label-holder'}>
                     <TextwTitle label="Building" content="The Johnson Center"/>
                     <TextwTitle label="Address" content="https://amenufromaplace.com"/>
@@ -55,6 +56,7 @@ const Sidebar = ({facility, isSidebarOpen, isSidebarMapOpen, toggleSidebarMap, f
                     <TextwTitle label="Hours" content={<WeekHours facility={facility} />}/>
                     
 
+            </div>
             </div>
             <div className={'sidebar-row2'}>
                 <FacilitiesMap isMapOpen={isSidebarMapOpen} facilities={facilities} facility={facility}/>

src/styles/components/sidebar.scss

@@ -60,6 +60,10 @@
 .sidebar-toggle-map-btn {
   width: 100%;
 }
+.sidebar-scroll{
+    height:calc(100% - 220px - 116px - 32px);
+    overflow-y: scroll;
+}
 
 @media screen and (max-width: map-get($breakpoints, lg) - 1px) {
   .sidebar-root {

src/utils/facilityUtils.js

@@ -295,7 +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
+}];
     return hours.sort((a,b) => {
         return parseInt(a.start) - parseInt(b.start)
     })