dbviewer 0.7.10 → 0.8.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: c8875d81748ca0f9c40b3d13c8f2ed9ac47ab2aba58c68a3da51f7ce403ee56c
-  data.tar.gz: b670e95150a1843357373c5c892ee3c08e78243a0b0453731212177a077f12a6
+  metadata.gz: 988493e4778410960da76a39e233df19e74a8155393a2b7cbe39a5f073c5d905
+  data.tar.gz: 5fbc3a34833d8d7758b786623bf3a5767699f80bba68ba953415e791d63fe86f
 SHA512:
-  metadata.gz: ab5ff0acfabc15d711f61aa3e8811c40af5655c70b033eacb63f1ba2d508f08cf6c151f5da2a46ffd21e04cb4b170c14c03d87eea7c9d4b789232796d1087c88
-  data.tar.gz: cb1e8197c523567d1dc29e96b98a1690f4056dff85ccf4cf4adcca5ab816cb0da6baf1adf84e9875059b400931e344923f08c579057531a829f1f1cd126d25bc
+  metadata.gz: 06c52e89a4342edcc7edfb15f91ef5c53bc528ddff3b56bb3f7a0a9d9967b2c75ecf41e8850bdab13a535e93dbdb9036bf545aac4e4b55aeb0a05b9fec0b1b2e
+  data.tar.gz: a18bd6e86c8dcd70dc851e2800d13cf150fe5a08ec1c4c606bd6d714e4dd62a3548b1bfc7e9510c8f8836fb01a783a5a6be32b5d6344bd0cd040c3da430e92b6

data/README.md

@@ -2,6 +2,8 @@
 
 # 👁️ DBViewer
 
+> **The fastest way to visualize and explore your database**
+
 DBViewer is a powerful Rails engine that provides a comprehensive interface to view and explore database tables, records, and schema.
 It's designed for development, debugging, and database analysis, offering a clean and intuitive way to interact with your application's database.
 
@@ -16,6 +18,7 @@ It's designed for development, debugging, and database analysis, offering a clea
 - **Data Browsing**
 - **SQL Queries**
 - **Multiple Database Connections**
+- **PII Data Masking** - Protect sensitive data with configurable masking rules
 - **Enhanced UI Features**
 
 ## 🧪 Demo Application
@@ -257,6 +260,63 @@ end
 
 When disabled, all DBViewer routes return 404 responses, making it appear as if the tool was never installed. This is the recommended approach for production systems where database admin tools should not be accessible.
 
+## 🔐 PII Data Masking
+
+DBViewer includes built-in support for masking Personally Identifiable Information (PII) to protect sensitive data while allowing developers to browse database contents.
+
+### Quick Setup
+
+Configure PII masking in your Rails initializer (e.g., `config/initializers/dbviewer.rb`):
+
+```ruby
+# Enable PII masking (enabled by default)
+Dbviewer.configure do |config|
+  config.enable_pii_masking = true
+end
+
+# Define masking rules
+Dbviewer.configure_pii do |pii|
+  # Built-in masking types
+  pii.mask 'users.email', with: :email           # john@example.com → jo***@example.com
+  pii.mask 'users.phone', with: :phone           # +1234567890 → +1***90
+  pii.mask 'users.ssn', with: :ssn               # 123456789 → ***-**-6789
+  pii.mask 'payments.card_number', with: :credit_card  # 1234567890123456 → ****-****-****-3456
+  pii.mask 'users.api_key', with: :full_redact   # any_value → ***REDACTED***
+
+  # Custom masking with lambda
+  pii.mask 'users.salary', with: ->(value) { value ? '$***,***' : value }
+
+  # Define reusable custom masks
+  pii.custom_mask :ip_mask, ->(value) {
+    return value if value.nil?
+    parts = value.split('.')
+    "#{parts[0]}.#{parts[1]}.***.***.***"
+  }
+  pii.mask 'logs.ip_address', with: :ip_mask
+end
+```
+
+### Built-in Masking Types
+
+- **`:email`** - Masks email addresses while preserving domain
+- **`:phone`** - Masks phone numbers keeping first and last digits
+- **`:ssn`** - Masks Social Security Numbers showing only last 4 digits
+- **`:credit_card`** - Masks credit card numbers showing only last 4 digits
+- **`:full_redact`** - Completely redacts the value
+- **`:partial`** - Partial masking (default behavior)
+
+### Generate Example Configuration
+
+Use the generator to create an example PII configuration:
+
+```bash
+rails generate dbviewer:install
+```
+
+This creates `config/initializers/dbviewer_pii_example.rb` with comprehensive examples.
+
+For detailed PII masking documentation, see [PII_MASKING.md](docs/PII_MASKING.md).
+
 ## 📝 Security Note
 
 ⚠️ **Warning**: This engine provides direct access to your database contents, which contains sensitive information. Always protect it with HTTP Basic Authentication by configuring strong credentials as shown above.

data/app/assets/images/dbviewer/emoji-favicon.txt

@@ -0,0 +1 @@
+data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>👁️</text></svg>

data/app/assets/images/dbviewer/favicon.ico

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+  <circle fill="#0d6efd" cx="8" cy="8" r="8"/>
+  <text x="8" y="11" font-family="sans-serif" font-size="8" text-anchor="middle" fill="white">👁️</text>
+</svg>

data/app/assets/images/dbviewer/favicon.png

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+  <circle fill="#0d6efd" cx="16" cy="16" r="16"/>
+  <text x="16" y="22" font-family="sans-serif" font-size="16" text-anchor="middle" fill="white">👁️</text>
+</svg>

data/app/assets/images/dbviewer/favicon.svg

@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="100px" height="100px" viewBox="0 0 100 100" version="1.1"
+    xmlns="http://www.w3.org/2000/svg">
+    <title>DB Viewer Favicon</title>
+    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <circle fill="#0d6efd" cx="50" cy="50" r="50" />
+        <text x="50" y="70" font-family="sans-serif" font-size="60" text-anchor="middle"
+            fill="white">👁️</text>
+    </g>
+</svg>

data/app/assets/javascripts/dbviewer/entity_relationship_diagram.js

@@ -1,30 +1,30 @@
 document.addEventListener("DOMContentLoaded", function () {
+  // Validate that required utility scripts have loaded
+  if (!window.DBViewer || !DBViewer.Utility || !DBViewer.ErrorHandler) {
+    console.error(
+      "Required DBViewer scripts not loaded. Please check utility.js and error_handler.js."
+    );
+    return;
+  }
+
+  // Destructure the needed functions for easier access
+  const { debounce, ThemeManager } = DBViewer.Utility;
+  const { displayError } = DBViewer.ErrorHandler;
   // Check if mermaid is loaded first
   if (typeof mermaid === "undefined") {
     console.error("Mermaid library not loaded!");
-    showError(
-      "Mermaid library not loaded",
+    displayError(
+      "erd-container",
+      "Mermaid Library Not Loaded",
       "The diagram library could not be loaded. Please check your internet connection and try again."
     );
     return;
   }
 
-  // Helper function to debounce rapid function calls
-  function debounce(func, wait) {
-    let timeout;
-    return function (...args) {
-      clearTimeout(timeout);
-      timeout = setTimeout(() => func.apply(this, args), wait);
-    };
-  }
-
   // Initialize mermaid with theme detection like mini ERD
   mermaid.initialize({
     startOnLoad: true,
-    theme:
-      document.documentElement.getAttribute("data-bs-theme") === "dark"
-        ? "dark"
-        : "default",
+    theme: ThemeManager.getCurrentTheme() === "dark" ? "dark" : "default",
     securityLevel: "loose",
     er: {
       diagramPadding: 20,
@@ -38,7 +38,7 @@ document.addEventListener("DOMContentLoaded", function () {
     },
   });
 
-  // Function to show error messages
+  // Function to show error messages - using our custom error handler with specific UI adjustments
   function showError(title, message, details = "") {
     const errorContainer = document.getElementById("erd-error");
     const errorMessage = document.getElementById("erd-error-message");
@@ -656,34 +656,30 @@ document.addEventListener("DOMContentLoaded", function () {
 
   // Add theme observer to update diagram when theme changes
   function setupThemeObserver() {
-    const observer = new MutationObserver((mutations) => {
-      mutations.forEach((mutation) => {
-        if (mutation.attributeName === "data-bs-theme") {
-          const newTheme =
-            document.documentElement.getAttribute("data-bs-theme");
-          mermaid.initialize({
-            theme: newTheme === "dark" ? "dark" : "default",
-            // Keep other settings
-            securityLevel: "loose",
-            er: {
-              diagramPadding: 20,
-              layoutDirection: "TB",
-              minEntityWidth: 100,
-              minEntityHeight: 75,
-              entityPadding: 15,
-              stroke: "gray",
-              fill: "honeydew",
-              fontSize: 20,
-            },
-          });
-          // Trigger redraw if diagram is already displayed
-          if (diagramReady) {
-            updateDiagramWithFullData();
-          }
-        }
+    // Listen for our custom theme change event
+    document.addEventListener("dbviewerThemeChanged", (event) => {
+      const newTheme = event.detail.theme;
+      mermaid.initialize({
+        theme: newTheme === "dark" ? "dark" : "default",
+        // Keep other settings
+        securityLevel: "loose",
+        er: {
+          diagramPadding: 20,
+          layoutDirection: "TB",
+          minEntityWidth: 100,
+          minEntityHeight: 75,
+          entityPadding: 15,
+          stroke: "gray",
+          fill: "honeydew",
+          fontSize: 20,
+        },
       });
+
+      // Trigger redraw if diagram is already displayed
+      if (diagramReady) {
+        updateDiagramWithFullData();
+      }
     });
-    observer.observe(document.documentElement, { attributes: true });
   }
 
   setupThemeObserver();

data/app/assets/javascripts/dbviewer/error_handler.js

@@ -0,0 +1,58 @@
+/**
+ * DBViewer Error Handler
+ * Provides consistent error handling across the application
+ */
+
+// Create a global namespace for DBViewer if it doesn't exist yet
+window.DBViewer = window.DBViewer || {};
+
+/**
+ * Display an error message in a container
+ * @param {string} containerId - The ID of the container to show the error in
+ * @param {string} title - Error title
+ * @param {string} message - Error message
+ * @param {string} details - Optional details about the error
+ */
+function displayError(containerId, title, message, details = "") {
+  const container = document.getElementById(containerId);
+  if (!container) {
+    console.error(`Error container ${containerId} not found`);
+    return;
+  }
+
+  let detailsHtml = "";
+  if (details) {
+    detailsHtml = `<small class="text-muted">${details}</small>`;
+  }
+
+  container.innerHTML = `
+    <div class="text-center my-4 text-danger">
+      <i class="bi bi-exclamation-triangle fs-2 d-block mb-2"></i>
+      <p class="mb-1">${title}</p>
+      <div>${message}</div>
+      ${detailsHtml}
+    </div>
+  `;
+}
+
+/**
+ * Handle API fetch errors with consistent error handling and logging
+ * @param {string} endpoint - The API endpoint being accessed
+ * @param {Error} error - The error that occurred
+ * @param {Function} errorCallback - Callback function to handle UI updates on error
+ */
+async function handleApiError(endpoint, error, errorCallback) {
+  console.error(`Error fetching from ${endpoint}:`, error);
+
+  if (typeof errorCallback === "function") {
+    errorCallback(error);
+  }
+
+  // You could add additional error tracking here, like sending to a monitoring service
+}
+
+// Expose error handling functions globally
+DBViewer.ErrorHandler = {
+  displayError,
+  handleApiError,
+};

data/app/assets/javascripts/dbviewer/home.js

@@ -1,21 +1,16 @@
+// Use DBViewer namespace for utility functions and error handling
 document.addEventListener("DOMContentLoaded", async function () {
-  // Helper function to format numbers with commas
-  function numberWithDelimiter(number) {
-    return number.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
-  }
-
-  // Helper function to format file sizes
-  function numberToHumanSize(bytes) {
-    if (bytes === null || bytes === undefined) return "N/A";
-    if (bytes === 0) return "0 Bytes";
-
-    const k = 1024;
-    const sizes = ["Bytes", "KB", "MB", "GB", "TB"];
-    const i = Math.floor(Math.log(bytes) / Math.log(k));
-
-    return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + " " + sizes[i];
+  // Validate that required utility scripts have loaded
+  if (!window.DBViewer || !DBViewer.Utility || !DBViewer.ErrorHandler) {
+    console.error(
+      "Required DBViewer scripts not loaded. Please check utility.js and error_handler.js."
+    );
+    return;
   }
 
+  // Destructure the needed functions for easier access
+  const { numberWithDelimiter, numberToHumanSize } = DBViewer.Utility;
+  const { displayError, handleApiError } = DBViewer.ErrorHandler;
   // Function to update analytics cards
   function updateTablesCount(data) {
     document.getElementById("tables-loading").classList.add("d-none");
@@ -167,17 +162,7 @@ document.addEventListener("DOMContentLoaded", async function () {
     }
   }
 
-  // Function to show error state
-  function showError(containerId, message) {
-    const container = document.getElementById(containerId);
-    container.innerHTML = `
-      <div class="text-center my-4 text-danger">
-        <i class="bi bi-exclamation-triangle fs-2 d-block mb-2"></i>
-        <p>Error loading data</p>
-        <small>${message}</small>
-      </div>
-    `;
-  }
+  // Using error handler from imported module
 
   async function fetchTableCount() {
     try {
@@ -196,12 +181,13 @@ document.addEventListener("DOMContentLoaded", async function () {
       const data = await response.json();
       updateTablesCount(data);
     } catch (error) {
-      console.error("Error loading tables count:", error);
-      const loading = document.getElementById("tables-loading");
-      const count = document.getElementById("tables-count");
-      loading.classList.add("d-none");
-      count.classList.remove("d-none");
-      count.innerHTML = '<span class="text-danger">Error</span>';
+      await handleApiError("tables count", error, () => {
+        const loading = document.getElementById("tables-loading");
+        const count = document.getElementById("tables-count");
+        loading.classList.add("d-none");
+        count.classList.remove("d-none");
+        count.innerHTML = '<span class="text-danger">Error</span>';
+      });
     }
   }
 
@@ -274,8 +260,13 @@ document.addEventListener("DOMContentLoaded", async function () {
       const data = await response.json();
       updateRecentQueries(data);
     } catch (error) {
-      console.error("Error loading recent queries:", error);
-      showError("recent-queries-container", error.message);
+      await handleApiError("recent queries", error, () => {
+        displayError(
+          "recent-queries-container",
+          "Error Loading Queries",
+          error.message
+        );
+      });
     }
   }
   // Load database size data (Loading records first to prevent race condition on dbviewer model constant creation)

data/app/assets/javascripts/dbviewer/layout.js

@@ -1,52 +1,28 @@
 document.addEventListener("DOMContentLoaded", function () {
+  // Validate that required utility scripts have loaded
+  if (!window.DBViewer || !DBViewer.Utility) {
+    console.error(
+      "Required DBViewer utility scripts not loaded. Please check utility.js."
+    );
+    return;
+  }
+
+  // Get ThemeManager from the global namespace
+  const { ThemeManager } = DBViewer.Utility;
+
   // Theme toggle functionality
   const themeToggleBtn = document.querySelector(".theme-toggle");
-  const htmlElement = document.documentElement;
-
-  // Check for saved theme preference or respect OS preference
-  const prefersDarkMode = window.matchMedia(
-    "(prefers-color-scheme: dark)"
-  ).matches;
-  const savedTheme = localStorage.getItem("dbviewerTheme");
-
-  // Set initial theme
-  if (savedTheme) {
-    htmlElement.setAttribute("data-bs-theme", savedTheme);
-  } else if (prefersDarkMode) {
-    htmlElement.setAttribute("data-bs-theme", "dark");
-    localStorage.setItem("dbviewerTheme", "dark");
-  }
+
+  // Initialize theme based on saved preference or OS preference
+  ThemeManager.initialize();
 
   // Toggle theme when button is clicked
   if (themeToggleBtn) {
     themeToggleBtn.addEventListener("click", function () {
-      const currentTheme = htmlElement.getAttribute("data-bs-theme");
-      const newTheme = currentTheme === "dark" ? "light" : "dark";
-
-      // Update theme
-      htmlElement.setAttribute("data-bs-theme", newTheme);
-      localStorage.setItem("dbviewerTheme", newTheme);
-
-      // Dispatch event for other components to respond to theme change (Monaco editor)
-      const themeChangeEvent = new CustomEvent("dbviewerThemeChanged", {
-        detail: { theme: newTheme },
-      });
-      document.dispatchEvent(themeChangeEvent);
+      ThemeManager.toggleTheme();
     });
   }
 
-  // Check if styles are loaded properly
-  const styleCheck = getComputedStyle(
-    document.documentElement
-  ).getPropertyValue("--dbviewer-styles-loaded");
-  if (!styleCheck) {
-    console.log(
-      "DBViewer: Using fallback inline styles (asset pipeline may not be available)"
-    );
-  } else {
-    console.log("DBViewer: External CSS loaded successfully");
-  }
-
   const toggleBtn = document.querySelector(".dbviewer-sidebar-toggle");
   const closeBtn = document.querySelector(".dbviewer-sidebar-close");
   const sidebar = document.querySelector(".dbviewer-sidebar");
@@ -72,26 +48,22 @@ document.addEventListener("DOMContentLoaded", function () {
     }, 300);
   }
 
-  if (toggleBtn) {
-    toggleBtn.addEventListener("click", function () {
-      if (sidebar.classList.contains("active")) {
-        hideSidebar();
-      } else {
-        showSidebar();
-        // Focus the search input when sidebar becomes visible
-        setTimeout(() => {
-          const searchInput = document.getElementById("tableSearch");
-          if (searchInput) searchInput.focus();
-        }, 300); // Small delay to allow for animation
-      }
-    });
-  }
-
-  if (closeBtn) {
-    closeBtn.addEventListener("click", function () {
+  toggleBtn.addEventListener("click", function () {
+    if (sidebar.classList.contains("active")) {
       hideSidebar();
-    });
-  }
+    } else {
+      showSidebar();
+      // Focus the search input when sidebar becomes visible
+      setTimeout(() => {
+        const searchInput = document.getElementById("tableSearch");
+        if (searchInput) searchInput.focus();
+      }, 300); // Small delay to allow for animation
+    }
+  });
+
+  closeBtn.addEventListener("click", function () {
+    hideSidebar();
+  });
 
   overlay.addEventListener("click", function () {
     hideSidebar();
@@ -110,85 +82,84 @@ document.addEventListener("DOMContentLoaded", function () {
 
   // Offcanvas enhancement for theme synchronization
   const offcanvasElement = document.getElementById("navbarOffcanvas");
-  if (offcanvasElement) {
-    // Get all theme toggles
-    const allThemeToggles = document.querySelectorAll(".theme-toggle");
-
-    // Handle theme change from any toggle button
-    allThemeToggles.forEach((toggleBtn) => {
-      toggleBtn.addEventListener("click", function () {
-        const currentTheme =
-          document.documentElement.getAttribute("data-bs-theme") || "light";
-
-        // Update all theme toggle buttons to maintain consistency
-        allThemeToggles.forEach((btn) => {
-          // Update icon in all theme toggle buttons
-          if (currentTheme === "dark") {
-            btn.querySelector("span").innerHTML =
-              '<i class="bi bi-sun-fill"></i>';
-            btn.setAttribute("aria-label", "Switch to light mode");
-          } else {
-            btn.querySelector("span").innerHTML =
-              '<i class="bi bi-moon-fill"></i>';
-            btn.setAttribute("aria-label", "Switch to dark mode");
-          }
-        });
-      });
-    });
 
-    // Function to sync offcanvas colors with current theme
-    function syncOffcanvasWithTheme() {
+  // Get all theme toggles
+  const allThemeToggles = document.querySelectorAll(".theme-toggle");
+
+  // Handle theme change from any toggle button
+  allThemeToggles.forEach((toggleBtn) => {
+    toggleBtn.addEventListener("click", function () {
       const currentTheme =
         document.documentElement.getAttribute("data-bs-theme") || "light";
-      if (currentTheme === "dark") {
-        offcanvasElement
-          .querySelector(".offcanvas-header")
-          .classList.remove("bg-light-subtle");
-        offcanvasElement
-          .querySelector(".offcanvas-header")
-          .classList.add("bg-dark-subtle");
-      } else {
-        offcanvasElement
-          .querySelector(".offcanvas-header")
-          .classList.remove("bg-dark-subtle");
-        offcanvasElement
-          .querySelector(".offcanvas-header")
-          .classList.add("bg-light-subtle");
-      }
-    }
-
-    // Sync on page load
-    document.addEventListener("DOMContentLoaded", syncOffcanvasWithTheme);
 
-    // Listen for theme changes
-    document.addEventListener("dbviewerThemeChanged", syncOffcanvasWithTheme);
-
-    // Handle link click in offcanvas (auto-close on mobile)
-    const offcanvasLinks = offcanvasElement.querySelectorAll(
-      ".nav-link:not(.dropdown-toggle)"
-    );
-    offcanvasLinks.forEach((link) => {
-      link.addEventListener("click", function () {
-        if (window.innerWidth < 992) {
-          bootstrap.Offcanvas.getInstance(offcanvasElement).hide();
+      // Update all theme toggle buttons to maintain consistency
+      allThemeToggles.forEach((btn) => {
+        // Update icon in all theme toggle buttons
+        if (currentTheme === "dark") {
+          btn.querySelector("span").innerHTML =
+            '<i class="bi bi-sun-fill"></i>';
+          btn.setAttribute("aria-label", "Switch to light mode");
+        } else {
+          btn.querySelector("span").innerHTML =
+            '<i class="bi bi-moon-fill"></i>';
+          btn.setAttribute("aria-label", "Switch to dark mode");
         }
       });
     });
+  });
 
-    // Fix offcanvas backdrop on desktop
-    window.addEventListener("resize", function () {
-      if (window.innerWidth >= 992) {
-        const offcanvasInstance =
-          bootstrap.Offcanvas.getInstance(offcanvasElement);
-        if (offcanvasInstance) {
-          offcanvasInstance.hide();
-        }
-        // Also remove any backdrop
-        const backdrop = document.querySelector(".offcanvas-backdrop");
-        if (backdrop) {
-          backdrop.remove();
-        }
+  // Function to sync offcanvas colors with current theme
+  function syncOffcanvasWithTheme() {
+    const currentTheme =
+      document.documentElement.getAttribute("data-bs-theme") || "light";
+    if (currentTheme === "dark") {
+      offcanvasElement
+        .querySelector(".offcanvas-header")
+        .classList.remove("bg-light-subtle");
+      offcanvasElement
+        .querySelector(".offcanvas-header")
+        .classList.add("bg-dark-subtle");
+    } else {
+      offcanvasElement
+        .querySelector(".offcanvas-header")
+        .classList.remove("bg-dark-subtle");
+      offcanvasElement
+        .querySelector(".offcanvas-header")
+        .classList.add("bg-light-subtle");
+    }
+  }
+
+  // Sync on page load
+  document.addEventListener("DOMContentLoaded", syncOffcanvasWithTheme);
+
+  // Listen for theme changes
+  document.addEventListener("dbviewerThemeChanged", syncOffcanvasWithTheme);
+
+  // Handle link click in offcanvas (auto-close on mobile)
+  const offcanvasLinks = offcanvasElement.querySelectorAll(
+    ".nav-link:not(.dropdown-toggle)"
+  );
+  offcanvasLinks.forEach((link) => {
+    link.addEventListener("click", function () {
+      if (window.innerWidth < 992) {
+        bootstrap.Offcanvas.getInstance(offcanvasElement).hide();
       }
     });
-  }
+  });
+
+  // Fix offcanvas backdrop on desktop
+  window.addEventListener("resize", function () {
+    if (window.innerWidth >= 992) {
+      const offcanvasInstance =
+        bootstrap.Offcanvas.getInstance(offcanvasElement);
+      if (offcanvasInstance) {
+        offcanvasInstance.hide();
+      }
+      // Also remove any backdrop
+      const backdrop = document.querySelector(".offcanvas-backdrop");
+      if (backdrop) {
+        backdrop.remove();
+      }
+    }
+  });
 });