moved facets to offcanvas, added button to search bar to open and stylized

src/assets/css/_bootstrap.scss

@@ -33,7 +33,7 @@
 // @import 'bootstrap/scss/list-group';
 @import 'bootstrap/scss/modal';
 @import 'bootstrap/scss/navbar';
-// @import 'bootstrap/scss/offcanvas';
+@import 'bootstrap/scss/offcanvas';
 // @import 'bootstrap/scss/pagination';
 // @import 'bootstrap/scss/placeholders';
 // @import 'bootstrap/scss/popover';

src/assets/css/main.scss

@@ -57,7 +57,7 @@
    Navbar & Icons
 -------------------------------------------------- */
 .navbar {
-  background-color: hsl(358, 71%, 48%) !important;
+  background-color: var(--bs-danger) !important;
 }
 
 .sticky-top {
@@ -245,6 +245,7 @@ $tiers: (
 .rarity-icon-large svg,
 .set-icon svg {
   width: 2.5rem;
+  z-index: 999;
 }
 
 .rarity-icon-large svg,
@@ -252,6 +253,18 @@ $tiers: (
   margin-bottom: -0.25rem;
 }
 
+.filter-icon svg {
+  width: 2rem;
+  fill: rgba(255,255,255,0.87);
+  stroke: rgba(255,255,255,0.87);
+}
+
+.search-button {
+  width: 2rem;
+  fill: rgba(255,255,255,0.87);
+  stroke: rgba(255,255,255,0.87);
+}
+
 .energy-icon svg {
   margin-top: -0.25rem;
   margin-right: -0.25rem;
@@ -374,7 +387,7 @@ $tiers: (
 }
 
 .facet-list {
-  max-height: 240px;
+  max-height: 185px;
   overflow-y: auto;
 }