admin-sidebar.js

$(function () {
    console.log(
        'admin.js',
        '$', $ || null,
        'jQuery', jQuery || null,
        'Vue', Vue || null
    );

    $.fn.ensureClass = function (className, remove) {
        remove = remove || false;
        return this.each(function () {
            let $this = $(this);
            console.log('ensureClass', {$this, self: this, className, remove});
            if ( remove ) {
                $this.removeClass(className);
            } else {
                if ( ! $this.hasClass(className) ) {
                    $this.addClass(className);
                }
            }
        });
    };

    class FullSidebar {
        /** @param {JQuery} $el */
        constructor($el) {
            this.$el = $el;
            /**
             * @type {FullSidebarItem[]}
             */
            this.items = [];
            let self = this;
            this.$el.find('> ul > .fsb-item').each(function () {
                self.items.push(new FullSidebarItem(self, $(this)));
            });
        }

        closeAllSubmenus() {
            this.items.forEach(item => item.close());
        }

        initActive() {
            let items = this.items.filter(item => window.location.href.startsWith(item.$link.attr('href')) === true);
            if ( items.length > 0 ) {
                items[0].open();
            }
        }
    }

    class FullSidebarItem {
        /**
         * @param {FullSidebar} fsb
         * @param {JQuery} $el
         */
        constructor(fsb, $el) {
            let self = this;
            this.fsb = fsb;
            this.$el = $el;
            this.$expand = $el.find('> .fsb-item-expand');
            this.$expandIcon = this.$expand.children('i.fa');

            this.hasChildren = $el.find('> ul').length > 0;
            this.$submenu = $el.find('> ul');

            this.$link = $el.find('> a:not(.fsb-item-expand)');
            this.$linkIcon = this.$link.children('.icon');
            this.$linkTitle = this.$link.children('.title');

            this.$expand.on('click', function () {
                self.toggle();
            });
        }

        open() {
            this.fsb.closeAllSubmenus();
            this.$submenu.ensureClass('open');
            this.$expandIcon.removeClass('fa-plus');
            this.$expandIcon.ensureClass('fa-minus');
            this.$el.ensureClass('active');
            return this;
        }

        close() {
            this.$submenu.removeClass('open');
            this.$expandIcon.removeClass('fa-minus');
            this.$expandIcon.ensureClass('fa-plus');
            this.$el.removeClass('active');
            return this;
        }

        toggle() {
            if ( this.isOpen() ) {
                this.close();
            } else {
                this.open();
            }
            return this;
        }

        isOpen() {
            return this.$submenu.hasClass('open');
        }
    }

    const $sb = $('#full-sidebar');
    if ( $sb.length === 1 ) {
        let fullSidebar = new FullSidebar($sb);
        console.log('fullSidebar',fullSidebar)
        fullSidebar.initActive();
    }
    // var $sidebar = $('#sidebar');
    // console.log('$sidebar', $sidebar)
});

admin-sidebar.scss

@import "font-awesome-variables";

#full-sidebar {
    top: 70px;
    bottom: 0;
    width: 240px;
    height: 100%;
    z-index: 103;
    margin-top: 0;
    position: fixed;
    overflow: hidden !important;
    background: #252525;
    padding-bottom: 70px;

    > ul {
        list-style: none;
        padding: 0;
        margin-bottom: 70px;
    }
    li.fsb-item {
        width: 100%;
        clear: both;

        border-left: 3px solid transparent;
        > a.fsb-item-expand {
            display: block;
            float: left;
            height: 100%;
            //margin: 8px 0 8px 10px;
            padding-left: 0;
            //line-height: 39px;
            margin: 9px 0 6px 10px;
            font-size: 14px;
            line-height: 16px;
            color: rgba(255, 255, 255, 0.3);
            &:hover, &:active {
                color: #eeeeee;
                svg path { fill: #eeeeee; }
            }
        }
        > a:not(.fsb-item-expand) {
            height: 100%;
            margin: 8px 0;
            display: block;
            padding: 0 10px;
            font-size: 15px;
            line-height: 16px;
            position: relative;
            text-align: left;
            float: left;
            white-space: nowrap;
            color: rgba(255, 255, 255, 0.3);
            .icon {
                width: 1.25rem;
                text-align: center;
                display: inline-block;
            }
            .title {
                display: inline-block;
                margin-left: 8px;
            }
            i { width: 1.25rem; }
            svg {
                width: auto;
                height: auto;
                max-width: 1.25rem;
                max-height: 1.25rem;
                vertical-align: middle;
                path { fill: rgba(255, 255, 255, 0.3); }
            }
            &:hover {
                color: #eeeeee;
                svg path { fill: #eeeeee; }
            }
        }

        > ul {
            display: none;
        }
        > ul.open {
            display: block;
            clear: both;
        }
    }
    li.fsb-section {
        &:before {
            content: $fa-var-minus; /* FontAwesome Unicode */
            font-family: FontAwesome;
            display: block;
            height: 100%;
            float: left;
            font-size: 10px;
            color: rgba(255, 255, 255, 0.3);
        }
        > a {
            margin: 4px 0;
            display: block;
            padding: 0 10px;
            font-size: 13px;
            line-height: 13px;
            position: relative;
            text-align: left;
            padding-left: 5px;
            white-space: nowrap;
            color: rgba(255, 255, 255, 0.3);
            .title {
                display: inline-block;
                margin-left: 8px;
            }

            &:hover {
                color: #eeeeee;
                svg path { fill: #eeeeee; }
            }
        }
    }
    > ul > li > a {
    }
    > ul > li > ul {
        list-style: none;
        //padding: 0 0 0 10px;
        //> li {
        //    color: #0000c1;
        //}
        //> li > a {
        //    color: #0000eb;
        //}
    }
}