Foundation 6: How to set .is-open-right translateX value with JavaScript

Question

I am building a website with Foundation 6 using CSS instead of SCSS. I'm using the responsive off-canvas drill-down menu on small screens, and by default, the off-canvas menu width is 250px.

Problem: I would like this to be the full width of the browser window instead.

Setting the Width

I have used JavaScript to dynamically set the .off-canvas.position-right width to the width of the window, and right to the negative width of the window. I've also set the .off-canvas .drilldown max-width to the width of the window.

This works well, and here's how I did it:

function setOffCanvasWidth() {

    var windowWidth = window.innerWidth,
        offCanvasRight = document.querySelector( '.off-canvas.position-right' ),
        isDrilldown = document.querySelector( '.off-canvas .is-drilldown' );

    offCanvasRight.style.width = windowWidth + "px";
    offCanvasRight.style.right = "-" + windowWidth + "px";
    isDrilldown.style.maxWidth = windowWidth + "px";

}
setOffCanvasWidth();

I'm happy with this part, but it only solves half of the problem.

Moving the Off-Canvas

In addition to dealing with the width of the menu, .is-open-right is moving everything over by -250px using transform: translateX().

I tried including these lines in my function to set the transform: translateX() value to the negative width of the window:

var offCanvasWrapperInner = document.querySelector( '.off-canvas-wrapper-inner.is-off-canvas-open.is-open-right' );
offCanvasWrapperInner.style.transform = "translateX(-" + windowWidth + "px)";

But this didn't work. I think it has to do with the fact that .off-canvas-wrapper-inner doesn't have the class .is-open-right when the window loads. That class is added dynamically after clicking the hamburger toggle button, which has a class of .menu-icon. So I tried adding a click event listener, but it still doesn't work.

Here is my JS code in its entirety:

function setOffCanvasWidth() {

    var windowWidth = window.innerWidth,
            offCanvasRight = document.querySelector( '.off-canvas.position-right' ),
            isDrilldown = document.querySelector( '.off-canvas .is-drilldown' ),
            menuIcon = docuemnt.querySelector( '.menu-icon' ),
            offCanvasWrapperInner = document.querySelector( '.off-canvas-wrapper-inner.is-off-canvas-open.is-open-right' );

    offCanvasRight.style.width = windowWidth + "px";
    offCanvasRight.style.right = "-" + windowWidth + "px";
    isDrilldown.style.maxWidth = windowWidth + "px";

    menuIcon.addEventListener( 'click', function() {
        offCanvasWrapperInner.style.transform = "translateX(-" + windowWidth + "px)";
    } );

}
setOffCanvasWidth();

Where Am I Going Wrong?

I'm not looking for anyone to code the solution for me, necessarily, but any feedback and direction on how I might set the .is-open-right translateX value would be very helpful.

Here is the entire project code: https://github.com/paulshryock/paulshryock/releases/tag/v0.0.1
Here is a live demo: https://paulshryock.github.io/paulshryock/

Answer 1

Use a translateX value of -100%. Percentage transformations are based on the element's dimensions, so 100% would be equal the element's width. At this point no JavaScript would be needed.

On that note, I would recommend setting the menu's left to 100% instead of setting right to the negative width.