<style>
    .ub-menu .ub-scroll-bar-mini{
        overflow-y: auto;
        overflow-x: hidden;
        height:100%;
    }
    @media (min-width: 40rem) {
        .ub-header{
            top: 0 !important;
            box-shadow: var(--box-shadow);
        }
        .ub-menu {
            height: calc( 100vh - 80px );
            position: sticky;
            top: 70px;
            overflow:hidden;
        }
    }
    @media (max-width: 40rem) {
        .ub-menu{
            top: 0 !important;
        }
    }
</style>
<div class="ub-menu page-menu">
    <div class="ub-scroll-bar-mini">
        @foreach($tree as $group)
            <div class="title">
                <i class="iconfont icon-list-alt"></i>
                {{$group['name']}}
            </div>
            <div class="items">
                @if(!empty($group['_child']))
                    @foreach($group['_child'] as $item)
                        <a @if($id==$item['id']) class="active" @endif href="{{$__msRoot}}help/category/{{$item['id']}}">{{$item['name']}}</a>
                    @endforeach
                @endif
            </div>
        @endforeach
    </div>
    <div class="page-menu-toggle" onclick="$('body').toggleClass('ub-menu-page-show')">
        <i class="iconfont icon-list"></i>
    </div>
</div>
<script>
    $(function () {
        var $menu = $('.ub-menu');
        $menu.find('.items .active').parent().show();
        $menu.find('.title').on('click',function () {
            var $next = $(this).next();
            $next.is(':visible')?$next.slideUp():$next.slideDown();
        });
    });
</script>
