custom collapsible mobile filter menu - need some javascript help

[Nzagamba]

I'm trying to make a custom collapsible filter menu for my drawing archive.

Here's my page, what I managed to do up to now:
https://tobiasgutmann.com/artworks/

In the mobile version, there are two things, that I couldn't figure out how to fix:

1. I would like the green button to dissapear, as soon as you click on it, so only the filters appear.
2. If clicking on an image while filters are showing, it automatically opens it in lightbox, instead of closing the filter first. I would like, whenever you click outside of the filters, the filters close again to see the overview of the archive, and then the lightbox is active again.

Is there anyone out there who could help me with this?
Best,
Tobias

[arminunruh]

so
when the filter is open, the green button should disappear

when the filter is open, clicking anywhere except one of the filters, the filters should disappear and green button should appear

only when filters are closed, the images are clickable to view the lightbox

and desktop version should stay the way it is

correct?

[Nzagamba]

@arminunruh Thanks for your reply.

when the filter is open, the green button should disappear

Yes, exactly, to give all the space needed for the filters

when the filter is open, clicking anywhere except one of the filters, the filters should disappear and green button should appear

Yes, this whas what I had in mind. Alternative could be:
when the filter is open, clicking anywhere, the filters should disappear and green button should appear. clicking on one of the filters, both scrolls to the area and also closes filters.

Not sure yet, if this step is confusing from a UI Perspective, or if filters should stay visible, until one them away.

only when filters are closed, the images are clickable to view the lightbox

Yes

desktop version should stay the way it is

Yes

[arminunruh]

can you send your website address, /wp-admin/ username and password and a link to this topic to info@laytheme.com?

i think this custom code only should take me 10 minutes to do, i will do it for free! :D

[Nzagamba]

Armin, you would be my hero, if you could help me out with this one! I've sent you the details per email a while ago. did you receive it?

[Nzagamba]

Update: Thanks to ChatGPT I managed to fix some parts of the missing pieces of my menu. current site on mobile looks like this.

What I still struggle with and am looking for a solution:

1. Filter menu does not work when visiting the site for the first time, navigating through the main menu. only after reloading the page, the filter menu works. Any solution?

2. When clicking outside of the filter buttons, on an image, instead of closing the filter, the lightbox zooms the image directly. I would like the menu to close, before lightbox is active again.

Some help from an expert would mean the world to me!

[arminunruh]

Hey, I couldn't manage to do it because I got sick.

Point two, what you could do is create an extra div. This div is transparent and lays over the images but under your buttons. Then bind the click on this div to close your menu.

Point one, maybe you need to bind the click like this.
https://laytheme.com/documentation/custom-javascript.html#binding-click-events

So basically you use a delegated event handler to bind to document.

[Nzagamba]

@arminunruh Thanks for your tipp! Point1 works now, Thanks!
Point two (overlay div) is driving me crazy. I've been trying to do this in Javascript, because it didn't work properly by placing the div in the Laytheme Gridder. I tried in so many ways to set the z-index of the filter buttons higher than the overlay div, but it didn't work. The issue is, that the overlay div is covering all the filter menu buttons, so they are not clickable anymore. (in mobile view). What am I missing?

Here the current website (please visit the mobile version)

Here's my css:

.bottom-menu {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  transform: translateY(100%);  /* <- Menu is outside the screen */
  transition: transform 0.25s ease;
  z-index: 9998 !important;
  background: none; /* or your desired background */
  pointer-events: none; /* so it can't be clicked when closed */
}

.bottom-menu.open {
  transform: translateY(0); /* <- Menu slides in */
  pointer-events: auto;
}

.menu-toggle-btn {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 60px;
    background: #00ff00;
    color: white;
    border: none;
    border-radius: 50%;
    font-size: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 9999 !important;
    transition: background 0.1s ease;
}

.menu-toggle-btn:hover {
    background: #00ff00;
}
.mobile-toggle-wrapper { 
    z-index: 9999 !important; /* brings green filter mobile button to the front */
}

.laybutton2 {
    display: block !important;
    margin: 6px auto !important;
    width: fit-content !important;
}

/* 
 * Invisible overlay that covers the entire page,
 * to catch clicks outside the menu
 * as long as the filter menu is open.
 */
.menu-overlay {
  position: fixed;        /* Fixes the overlay relative to the viewport (remains visible while scrolling) */
  top: 0;                 /* Starts at the very top */
  left: 0;                /* and far left */
  width: 100vw;           /* Takes up the entire width of the viewport */
  height: 100vh;          /* and the entire height */
  background: rgba(255, 0, 0, 0.2); /* Invisible background – you can use something like rgba(0,0,0,0.2) for a slight shadow */
  z-index: 9000 !important; /* Lies below the menu (which has z-index: 9999), but above images and other content */
  display: none;          /* Hidden by default */
  pointer-events: auto;   /* important: clicks should be recognized */
}

/*
 * When the menu is open, the overlay gets the class 'active'.
 * This makes it visible and starts catching clicks.
 */
.menu-overlay.active {
  display: block;         /* Shows the overlay */
}

here's my javascript:

<!-- Mobile Filter Menu Logic -->
<script>
  window.laytheme.on("newpageshown", function() {
    // 1. Insert the overlay only once, if it doesn’t already exist
    if (!document.querySelector('.menu-overlay')) {
      const menuOverlay = document.createElement('div');     // Create a new <div>
      menuOverlay.className = 'menu-overlay';                // Assign the CSS class
      document.body.insertBefore(menuOverlay, document.body.firstChild); // Insert it at the top of the body
    }

    // 2. Store element references
    const menuButton = document.getElementById('toggleButton');      // The green toggle button
    const menu = document.getElementById('phoneMenu');              // The mobile filter menu
    const overlay = document.querySelector('.menu-overlay');        // The transparent overlay

    // 3. Abort if something is missing (e.g. on a page without the menu)
    if (!menuButton || !menu || !overlay) return;

    // 4. Select all links inside the menu
    const links = menu.querySelectorAll('a');

    // 5. Function to close the menu
    function closeMenu() {
      menu.classList.remove('open');                // Remove "open" class
      menuButton.style.display = 'flex';            // Show the toggle button again
      overlay.classList.remove('active');           // Hide the overlay
      document.body.classList.remove('no-scroll');  // Allow scrolling again
    }

    // 6. Function to open the menu
    function openMenu() {
      menu.classList.add('open');                   // Add "open" class
      menuButton.style.display = 'none';            // Hide the toggle button
      overlay.classList.add('active');              // Show the overlay
      document.body.classList.add('no-scroll');     // Block scrolling
    }

    // 7. Only add click listener to toggle button once
    if (!menuButton.dataset.listenerAttached) {
      menuButton.addEventListener('click', (e) => {
        e.stopPropagation(); // Don’t propagate click (e.g. to the overlay)
        if (menu.classList.contains('open')) {
          closeMenu();
        } else {
          openMenu();
        }
      });
      menuButton.dataset.listenerAttached = "true"; // Set a flag
    }

    // 8. Every link in the menu closes the menu when clicked
    links.forEach(link => {
      link.addEventListener('click', () => {
        setTimeout(() => {
          closeMenu();
        }, 300); // Wait 300ms so the link still works
      });
    });

    // 9. Clicking the overlay also closes the menu
    overlay.addEventListener('click', () => {
      closeMenu();
    });

    // 10. Clicking outside the buttons (in the wrapper) also closes the menu
    const filterWrapper = document.querySelector('.lay-textformat-parent');
    if (filterWrapper) {
      filterWrapper.addEventListener('click', (event) => {
        // Only if a link wasn’t clicked directly
        if (!event.target.closest('a')) {
          closeMenu();
        }
      });
    }
  });
</script>

[Nzagamba]

Aaaah, I finally found a solution. I think it works well now...
Many Thanks @arminunruh !

Here the current website (The menu is visible in the mobile version)

[arminunruh]

Oh great job. Sorry I didn't find the time to do this. I'm working on like three websites at the same time at the moment, all of them are Lay Theme websites :O.