style: Updated Filters menu to no longer use "offcanvas"

to prevent being hidden by elements on the host site

Author: rebeccaeve

index.html

@@ -13,11 +13,11 @@
       href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.min.css"
     />
     <script type="module">
-      const baseUrl = "http://localhost:63313/dist";
+      const baseUrl = "http://localhost:53956/dist";
       import {
         onRampsResourceCatalog,
         shadowTarget,
-      } from "http://localhost:63313/dist/xras-ui.js";
+      } from "http://localhost:53956/dist/xras-ui.js";
       onRampsResourceCatalog({
         target: shadowTarget(
           document.getElementById("resource-catalog-react"),

src/onramps-resource-catalog/FilterBar.jsx

@@ -1,39 +1,43 @@
-import React, { useState } from "react";
+import React, { useRef, useState } from "react";
 import Filters from "./Filters";
-import { Offcanvas } from "react-bootstrap";
+import styles from "./ResourceCatalog.module.scss";
 
 const FilterBar = () => {
   const [show, setShow] = useState(false);
-  const handleClose = () => setShow(false);
-  const handleOpen = () => setShow(true);
+  const menuRef = useRef(null);
+
+  const toggleMenu = () => {
+    const menu = menuRef.current
+    if(!show){
+      menu.style.height = menu.scrollHeight + "px";
+      menu.classList.remove(styles.filtersHidden);
+      menu.classList.add(styles.filtersVisible);
+    } else {
+      menu.style.height = '0px';
+      menu.classList.remove(styles.filtersVisible);
+      menu.classList.add(styles.filtersHidden);
+    }
+
+    setShow(!show);
+
+  }
 
   return (
-    <>
-      <div className={`offcanvas offcanvas-start ${show ? 'show' : ''}`} tabIndex="-1" id="offcanvas" aria-labelledby="offcanvasLabel">
-        <div className="offcanvas-header">
-          <h5 className="offcanvas-title" id="offcanvasLabel">Filters</h5>
-          <button
-            type="button"
-            className="btn-close"
-            onClick={handleClose}
-            aria-label="Close"></button>
-        </div>
-        <div className="offcanvas-body">
-          <Filters />
-        </div>
-      </div>
+    <div className={styles.filterBar}>
       <div className={`row mb-2`}>
         <div className="col pt-2 pb-2">
           <div className="p-1 pb-0 border-bottom bg-white shadow">
-            <button className="btn btn-outline-primary mb-1 mt-1" type="button" onClick={handleOpen}>
+            <button className="btn btn-outline-primary mb-1 mt-1" type="button" onClick={toggleMenu}>
               <i className="bi bi-filter"></i> Filters
             </button>
+            <div className={`${styles.filtersHidden} pe-2 ps-2`} id="filtersList" ref={menuRef}>
+              <Filters onReset={toggleMenu} />
+            </div>
           </div>
         </div>
       </div>
-
-    </>
-  )
+    </div>
+  );
 }
 
 export default FilterBar;

src/onramps-resource-catalog/Filters.jsx

@@ -3,7 +3,7 @@ import { resetFilters, selectFilters, selectCatalogs } from "./helpers/catalogSl
 import FilterCategory from "./FilterCategory";
 import CatalogList from "./CatalogList";
 
-const Filters = () => {
+const Filters = ({ onReset }) => {
   const dispatch = useDispatch();
   const catalogs = useSelector( selectCatalogs );
   const filters = useSelector( selectFilters );
@@ -14,7 +14,7 @@ const Filters = () => {
   const catalogFilters = Object.keys(catalogs).map((c) => catalogs[c]);
 
   return (
-    <div>
+    <>
       {/* {catalogFilters.length > 0 ? <CatalogList catalogs={catalogFilters} /> : ''} */}
       {filters.map((f) => (
         <FilterCategory category={f} key={f.categoryId} />
@@ -26,7 +26,14 @@ const Filters = () => {
       >
         Reset Filters
       </button>
-    </div>
+
+      <button
+        className="btn btn-outline-primary ms-3 mt-2 mb-2"
+        onClick={onReset}
+      >
+        Close Menu
+      </button>
+    </>
   );
 };
 

src/onramps-resource-catalog/ResourceCatalog.module.scss

@@ -54,3 +54,14 @@ $warning: #ef7537;
   background-color: #fecd4d !important;
   border-color: #feca42 !important;
 }
+
+.filtersHidden {
+  height: 0px;
+  overflow: hidden;
+  transition: height 0.5s ease-out;
+}
+
+.filtersVisible {
+ height: auto;
+ transition: height 0.5s ease-out;
+}