(function() {
    var sideMenuContainer = $('<div id="side-menu-container">')
    var sideMenuOpener = $('<button class="side-menu-opener"></button>')
    var sideMenu = $('<div id="side-menu">')
    var body = $('body')

    body.append(sideMenuContainer)

    sideMenuContainer.append(sideMenu)

    <?php if ($_['opener-position'] === 'before'): ?>
        sideMenuOpener.insertBefore('#nextcloud')
    <?php else: ?>
        sideMenuOpener.insertAfter('#nextcloud')
    <?php endif; ?>

    var isTouchDevice = window.matchMedia("(pointer: coarse)").matches

    body.on('side-menu.ready', function() {
        sideMenu = $('#side-menu')

        var headerMenuOpener = $('#header .side-menu-opener')
        var sideMenuOpener = $('#side-menu .side-menu-opener')

        <?php if ($_['opener-hover']): ?>
            var sideMenuMouseLeave = function() {
                sideMenu
                    .removeClass('open')
                    .off('mouseleave', sideMenuMouseLeave)
            }

            var sideMenuMouseEnter = function() {
                sideMenu.on('mouseleave', sideMenuMouseLeave)
            }

            var sideMenuOpenerMouseEnter = function() {
                sideMenu
                    .addClass('open')
                    .on('mouseenter', sideMenuMouseEnter)
            }

            if (!isTouchDevice) {
                headerMenuOpener.on('mouseenter', sideMenuOpenerMouseEnter)

                sideMenu.addClass('hide-opener')
            }
        <?php endif; ?>

        headerMenuOpener.on('click', function() {
            sideMenu.addClass('open');
        })

        sideMenuOpener.on('click', function() {
            sideMenu.removeClass('open');
        })
    })
})();