Fix #8 filter bar

static/public/css/style.css

@@ -7,6 +7,21 @@
     float: right;
 }
 
+#pch-navbar .bt-filter-active {
+    display: none;
+}
+
+body.filter-active #pch-navbar .bt-filter-active {
+    display: initial;
+}
+body.filter-active #pch-navbar .bt-filter-inactive {
+    display: none;
+}
+
+#pch-filterbarContainer {
+    display: none;
+}
+
 #pch-page {
     margin-top: 6rem;
     padding: 1em 3em;

static/public/js/filters.js

@@ -11,6 +11,11 @@ window.FilterManager = (() => {
                     i.ui.root.classList.add("filtered");
             }
             MediaStorage.Instance.onFilterUpdated();
+
+            if (this.isFiltering())
+                document.body.classList.add("filter-active");
+            else
+                document.body.classList.remove("filter-active");
         }
 
         setFilterValue(key, val) {
@@ -18,6 +23,14 @@ window.FilterManager = (() => {
             this.#updateFilter();
         }
 
+        isFiltering() {
+            for (let i in this.#filters) {
+                if (this.#filters[i]?.length)
+                    return true;
+            }
+            return false;
+        }
+
         // Returns false if image doesnt match
         #matchTags(mediaTags, tags) {
             for (let i of tags)

static/public/js/uiFilter.js

@@ -40,5 +40,14 @@ $(() => {
         let filterUi = buildFilterBar("Tags", true, Array.from(mediaManager.allTags).sort());
         container.appendChild(filterUi.content);
     }
+
+    document.getElementById('pch-navbar-filterToggle').addEventListener('click', e => {
+        e.preventDefault();
+        let filterBarDom = document.getElementById('pch-filterbarContainer');
+        if (filterBarDom.style.display)
+            filterBarDom.style.display = "";
+        else
+            filterBarDom.style.display = "flex"
+    });
 });
 

templates/_menu.js

@@ -5,6 +5,12 @@ module.exports = `
     <nav id="pch-navbar" class="navbar navbar-expand-lg bg-body-tertiary">
         <div class="container-fluid" id="navbarSupportedContent">
             <ul class="navbar-nav col justify-content-end">
+                <li class="nav-item">
+                    <a class="nav-link" id="pch-navbar-filterToggle" href="#" role="button">
+                        <i class="bi bi-funnel bt-filter-inactive">&nbsp;</i>
+                        <i class="bi bi-funnel-fill bt-filter-active">&nbsp;</i>
+                    </a>
+                </li>
                 <li class="nav-item dropdown">
                     <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                         <i class="bi bi-person-circle">&nbsp;</i>
@@ -16,7 +22,7 @@ module.exports = `
             </ul>
         </div>
     </nav>
-    <nav class="navbar bg-body-tertiary"><div class="container-fluid" id="pch-filterbar">
+    <nav id="pch-filterbarContainer" class="navbar bg-body-tertiary"><div class="container-fluid" id="pch-filterbar">
     </div></nav>
     </div>
 `;