<?php 
namespace DiviPixel;
$style = get_option('dipi_hamburger_animation_styles'); 
?>

<div class="dipi_hamburger hamburger <?php echo $style; ?>" style="float: right; margin-bottom: 24px; line-height: 1em;">
    <div class="hamburger-box">
        <div class="hamburger-inner"></div>
    </div>
</div>

<script>
jQuery(function($) {
    $(document).ready(function(){
        // Default Divi Header
        let $hamburger = $(".dipi_hamburger");
        let $body = $("body");
        if($body.hasClass("et_header_style_slide") || $body.hasClass("et_header_style_fullscreen")) {
            $mobileMenuBar = $("#et-top-navigation .mobile_menu_bar");
            $mobileMenuBar.hide();
            $hamburger.click(function(){
                $hamburger.toggleClass("is-active");
                $mobileMenuBar.click();
            })

            document.addEventListener("click", function(event){
                var $element = $(event.target);
                if(!$element.hasClass("et_toggle_fullscreen_menu")){
                    return;
                }
                if($element.parent().attr('id') === 'et-top-navigation') {
                    return;
                }
                $hamburger.toggleClass("is-active");
            });
        } else {
            let mobileMenu = $(".mobile_menu_bar_toggle");
            mobileMenu.append($hamburger.detach());
            $hamburger.css("float", "none");
            $hamburger.css("margin-bottom", "");
            mobileMenu.click(function(){
                $hamburger.toggleClass("is-active");
            })
        }

        // Theme Builder Header
        $(".et-l--header .mobile_menu_bar").append('<div class="dipi_hamburger hamburger <?php echo $style; ?>" style="float: right; margin-bottom: 24px; line-height: 1em;"><div class="hamburger-box"><div class="hamburger-inner"></div></div></div>');
        let hamburger = $(".et-l--header .dipi_hamburger ").detach();
        let mobileMenu = $(".et-l--header .mobile_menu_bar");
        mobileMenu.append(hamburger);
        hamburger.css("float", "none");
        hamburger.css("margin-bottom", "");
        mobileMenu.click(function(){
            hamburger.toggleClass("is-active");
        })
    });
});
</script>