pluginManager.register('dragLeftSideBar',{
    run(){
        $('#leftsidebar')
            .on('mouseover mousedown',function(e){
                const client_x = e.clientX,
                    trigger_width = 10,
                    min_width = 250,
                    $leftsidebar = $(this),
                    width = $leftsidebar.width(),
                    is = {
                        mouseover:e.type === 'mouseover',
                        mousedown:e.type === 'mousedown',
                        movePosition: client_x >= width - trigger_width 
                    }

                    if(is.movePosition){
                        is.mouseover
                            && $leftsidebar
                                .style('border-right',`${trigger_width}px solid #eee`)

                        is.mousedown
                            && $(window)
                                    .on('mousemove',function(e){
                                        const x = e.pageX,
                                            max_width = $(this).width() * 0.25,
                                            width = $leftsidebar.width();
                                        if(x >= width && x <= max_width){
                                            $leftsidebar
                                                .style('width',x)
                                        }
                                        if(x <= min_width ){
                                            $leftsidebar
                                                .style('width','')
                                        }
                                    })
                                    .on('mouseup',function(){
                                        $(this).off('mousemove')
                                        $leftsidebar
                                            .style('border-right','')
                                    })
                    }
            })

        $(document.body)
            .append(`
                <style>
                    #jShape.ls-toggle-menu #leftsidebar {
                        margin-left: 0px !important;
                    }
                </style>
            `)

        plugin
            .systabs
            .tabs['ls-toggle-btn']
            .action = function({$tab}){
                $(document.body)
                    .toggleClass("ls-toggle-menu")
                $tab.removeClass("active")

                let ishiddenLeftSidebar = $(document.body).attr('class').includes('ls-toggle-menu')
                    $windowWidth = $(window).width(),
                    $leftSidebar = $('#leftsidebar'),
                    $leftSidebarWidth = $leftSidebar.width()
                    
                if(ishiddenLeftSidebar || $windowWidth < 1280){
                    $leftSidebar
                        .css('transform',`translateX(-${$leftSidebarWidth}px)`)
                }else{
                    $leftSidebar
                        .css('transform',`translateX(0)`)
                }
                
            }
    }
})
.run()