Menu Accordion + Baron Scrollbar

Menu Accordion + Baron Scrollbar

HTML

<script src="https://github.com/Diokuz/baron/blob/master/demo/baron.js"></script>
<div class="box-left-menu">
    <ul class="left-menu">
        <li class="root-item">
            <a href="/catalog/argenta-ceramica-ispaniya/">
                Argenta ceramica<i class="icon-custom icon-16 switch down"></i>
            </a>
            <ul class="sub-menu" style="display: none;">
                <div class="baron baron__root baron__clipper _macosx" data-baron-v-id="0" style="overflow: hidden;">
                    <div class="baron__scroller" style="overflow-y: scroll; box-sizing: border-box; margin: 0px; border: 0px;">
                        <li>
                            <a href="/catalog/atlas-novinka/">
                                Atlas                        </a>
                        </li>
                        <li>
                            <a href="/catalog/creek/">
                                Creek                        </a>
                        </li>
                        <li>
                            <a href="/catalog/domo/">
                                Domo                        </a>
                        </li>
                        <li>
                            <a href="/catalog/element/">
                                Element                        </a>
                        </li>
                        <li>
                            <a href="/catalog/matrix/">
                                Matrix                        </a>
                        </li>
                        <li>
                            <a href="/catalog/novum/">
                                Novum                        </a>
                        </li>
                        <li>
                            <a href="/catalog/shabby-vintage-new-/">
                                Shabby Vintage                        </a>
                        </li>
                        <li>
                            <a...

CSS

.left-menu{
    position: relative;   
    text-align: left;
    width: 100%;
}
.left-menu, 
.left-menu ul{
    list-style: none;
    padding: 0px;
}
.left-menu ul, 
.left-menu li, 
.left-menu a{
    margin: 0;
    padding: 0;
    border: none;
    outline: none;
}
.left-menu ul{
    display: none;
}
.left-menu li{
    position: relative;
    text-transform: capitalize;
}
.left-menu .menu-icon{
    display: block;
    width: 30px;
    height: 30px;
    background: orange;
    position: absolute;
    top: 0;
    left: 100px;
}
.left-menu li + .sub-menu {
    display: none;
}
.left-menu .open > li > a {
    display: inline-block;
}
.left-menu .switch {
    cursor: pointer;
    display: inline-block;
    width: 16px;
    height: 16px;
    z-index: 100;
    line-height: 0;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);	
    right: -20px;
    border: 1px solid red;
}
.left-menu .switch:before{
    content: "+";
    width: 100%;
    height: 100%;
    display: block;
    line-height: 100%;
    text-align: center;
}
.left-menu .switch.down {

}
.left-menu .switch.down:before{
   content: "-"!important;
}
.left-menu > .root-item > a > .switch {
    display: inline-block;
}
.left-menu .active-root-item > a > .switch,
.left-menu > .root-item:hover > a > .switch {
    display: inline-block;
}
.left-menu li > a,
.left-menu li > a:visited {
    display: inline-block;
    position: relative;
    /*min-width: 110px;*/
    color: #777;
    text-decoration: none;
    text-transform: uppercase;    
}
.left-menu li > a:hover{
    color: #000;;
}
.left-menu .root-item > a{
    padding: 5px;
}
.left-menu .active-root-item > a{
    font-weight: 700;
}
.left-menu .root-item .sub-menu li > a{
    padding: 6px 20px 6px 0;
}
.left-menu .root-item .sub-menu {
    margin-top: 1px;
    border-top: 1px solid #898b8a;
    border-right: 1px solid #898b8a;
    text-align: right;
    padding-top: 5px;
    margin-right: 5px;
}
.left-menu .root-item .sub-menu.open{
  ...

JavaScript

$(document).ready(function () {
    $(".left-menu .switch").click(function () {
        if ($(this).hasClass('down'))
            $(this).removeClass('down');
        else {
            $(this).parent().parent().parent().find(".down").removeClass('down');
            $(this).addClass('down');
        }
        if ($(this).parent('a').next(".sub-menu").length > 0) {
            $(this).parent().parent().parent().find(".sub-menu").removeClass('selected');
            $(this).parent().next(".sub-menu").slideToggle(500).addClass('selected')
                    .parent().parent().find(".sub-menu:not(.selected)").slideUp(500);

            if ($(this).parent().next(".sub-menu").find(".sub-menu").length === 0) { //==
                $('.left-menu .sub-menu.open').removeClass('open');
                $(this).parent().next(".sub-menu").addClass('open');
            }
            return false;
        }

    });
    $(".left-menu").find('li.active-root-item').parents('.sub-menu').show();
    $(".left-menu li.active-root-item > ul.sub-menu").show().addClass('open');

    $(".left-menu").find('li.active, li.active-sub-item').parents('.sub-menu').show();
    $(".left-menu li.active-sub-item > ul.sub-menu").show().addClass('open');

});

window.onload = function () {
    baron({
        root: '.baron',
        scroller: '.baron__scroller',
        bar: '.baron__bar',
        scrollingCls: '_scrolling',
        draggingCls: '_dragging'
    }).fix({
        elements: '.header__title',
        outside: 'header__title_state_fixed',
        before: 'header__title_position_top',
        after: 'header__title_position_bottom',
        clickable: true
    }).controls({
        // Element to be used as interactive track. Note: it could be different from 'track' param of baron.
        track: '.baron__track',
        forward: '.baron__down',
        backward: '.baron__up'
    })    
};