How do I make a custom toggle button for an off canvas?

[vigilante]

I added an off canvas and that was easy enough.
I know the docs say to use the toggle element to control it, but the toggle element is just an icon. I wanted to create a buton with icon and text in a menu.

I figured out that I can do an interation on click to add the class is-active to the button and the class brx-open to the off canvas. This only partially does the trick. The canvas opens and I can also close it with the close button, ESC, or click outside the canvas.

The only thing I couldn’t figure out how to do was remove the is-active class from the button after closing the canvas. I couldn’t create the right interaction conditions to remove it. Blur didn’t work, which made the most sense. Neither did end animation or going out of viewport.

So three questions.

1. Can I do an interaction to remove is-active from the button when the canvas closes?
2. Is there a better procedure to create a custom button or link to toggle the canvas than what I did here?
3. Can you some day adjust the toggle button so it can be more than just an icon? At least adding some text or making it a container or some other trick. Maybe I just missed how to do it.

One thing is, I intuitively thought that when I did an interaction on my button, there would be an action for opening and closing an off canvas. One is literally labeled “show element” and “hide element”. I thought that might work for the off canvas but it didn’t

[tyoung560]

Create a JavaScript function and paste it inside a <script> tag in the Bricks custom code section.

function clickBrxeMmntdj() {
    var targetElement = document.querySelector('#brxe-mmntdj');
    if (targetElement) {
        targetElement.click();
    }
}
</script>

Then add an interaction that calls this function

[paquito]

It works, but I faced this issue (Solution below):

“Toggle” element is child of the clickable element , so clicking the toggle itself will issue a click on the parent as well, resulting in a double click, and causing the off-canvas to get closed before being shown.

This CSS on the Toggle element will prevent that:

{pointer-events: none;}

[darpet]

It is pretty easy, it can be done with any element. Just add class “brxe-toggle” and add attribute with name “data-selector” with the id of the off canvas element.

[vigilante]

Not sure what’s happening here. Is there some kind of magic with those specific data and class names? Is this documented?

[darpet]

It seems it is not documented, I just looked and saw that the toggle element has those attrubutes, try it and it works.

[HOSEIN]

Hi everyone, please try this.

[darpet]

Bricks 1.11 has this feature build in.

[vigilante]

I had a draft reply to say the same thing.

I watched the video on the upcoming features and the new offcanvas interaction should hopefully do the trick to use my own trigger rather than the built-in toggle element.

[moalla]