<?php
    namespace Pixebuilder\Element;
    
    // prevent direct file access
	if( !defined( 'ABSPATH' ) ) exit;
    
    class Hamburger_Button extends Item{

        static function get_name(){
            return 'hamburger-button';
        }

        static function item_class($settings){
            return 'pixe-type-button';
        }

        static function get_title(){
            return esc_html__('Hamburger Button', 'pixebuilder');
        }

        static function get_icon(){
            return 'menu';
        }
        
        static function render_content($settings){

            $settings['link'] = empty($settings['link'])? array(): $settings['link'];

            $line_count = empty($settings['button']['line-count'])? 3: intval($settings['button']['line-count']);
            if( is_nan($line_count) || $line_count < 1 || $line_count > 6 ){
                $line_count = 3;
            } 

            // print item
            $class = 'pixe-hamburger-button';
            if( empty($settings['button']['hover-animation']) ){
                $class .= ' pixe-hover-slide';
            }
            if( empty($settings['button']['x-morph']) ){
                $class .= ' pixe-active-morph';
            }

            $ret  = pixe_get_link_tag($settings['link'], array(
                'class' => $class,
                'default-link-to' => 'custom',
                'always-show' => true
            ));
            for( $i = 0; $i < $line_count; $i++ ){
                $ret .= '<span></span>';
            }
            $ret .= '</a>';

            return $ret;
        }

    }

    \Pixe_Builder::register_element('Pixebuilder\Element\Hamburger_Button');

    // register timeline style
    function hamburger_button_style(){
?>
.pixe-item-hamburger-button .pixe-hamburger-button{ position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 8px; width: 40px;
    background: none; border: none; cursor: pointer; padding: 0; }
.pixe-item-hamburger-button .pixe-hamburger-button span{ display: block; height: 4px; width: 100%; background-color: #333; border-radius: 2px; 
    transition: background 300ms, opacity 300ms, transform 400ms; }
.pixe-hamburger-button.pixe-hover-slide.pixe-hover{ overflow: hidden; }
.pixe-hamburger-button.pixe-hover-slide.pixe-hover span.pixe-hover{ animation: pixeHamburgerSlideOutIn 300ms forwards; }
@keyframes pixeHamburgerSlideOutIn{ 0% { transform: translateX(0); } 50% { transform: translateX(100%); } 50.01% { transform: translateX(-100%); } 100% { transform: translateX(0); } }
<?php
    }
    \Pixe_Dependency::get()->register_style('hamburger-button', 'Pixebuilder\Element\hamburger_button_style');

    function hamburger_button_script(){
?>
$(document).ready(function(){
    $('.pixe-hamburger-button').each(function(){
        let touched = false;
        var button = $(this);

        // hover animation
        if( button.hasClass('pixe-hover-slide') ){
            var lineDelay = 150;
            function hoverSlideEnter(e){
                if( touched ) return;
                if( button.hasClass('pixe-active') || button.hasClass('pixe-hover') ) return;

                var delay = 0;
                button.addClass('pixe-hover');
                button.children().each(function(){
                    var line = $(this);
                    setTimeout(function(){
                        line.addClass('pixe-hover');
                    }, delay);
                    delay += lineDelay;
                });

                // end animation
                setTimeout(function(){
                    button.removeClass('pixe-hover');
                    button.children().removeClass('pixe-hover');
                }, delay + 300)
            }

            button.on('mouseenter', hoverSlideEnter)
        }

        // click animation
        if( button.hasClass('pixe-active-morph') ){
            button.on('click touchstart', function(e){
                if( e.type == 'touchstart' ){
                    touched = true;
                }else{
                    if( touched ){
                        touched = false;
                        return false;
                    }                       
                }
                
                function returnButton(){
                    button.children('span').css({ transform: '', opacity: '' });
                    setTimeout(function(){
                        button.removeClass('pixe-active');
                    }, 400);

                    $(document.body).off('pixeclosepopup', returnButton);
                }

                // click animation
                if( !button.hasClass('pixe-active') ){
                    button.removeClass('pixe-hover');
                    button.addClass('pixe-active');

                    // move children to center
                    var h = button.outerHeight();
                    var borderTop = parseFloat(button.css('border-top-width'));
                    button.children().each(function(){
                        $(this).removeClass('pixe-hover');

                        var css = {};
                        var yPos = (h / 2) - ($(this).outerHeight() / 2) - borderTop - $(this).position().top;
                        var transform = 'translateY(' + yPos + 'px)';
                        if( $(this).is(':first-child') ){
                            transform += ' rotate(135deg)';
                        }else if( $(this).is(':last-child') ){
                            transform += ' rotate(-135deg)';
                        }else{
                            css.opacity = 0;
                        }

                        css.transform = transform;
                        $(this).css(css);
                    });

                }

                $(document.body).on('pixeclosepopup', returnButton);
            });
        }
    });
    
})
<?php
    }
    \Pixe_Dependency::get()->register_script('hamburger-button', 'Pixebuilder\Element\hamburger_button_script');