SOURCE

window.$jm = (function () {
    var _menu = null;
    var option = {
        color: "#fff",
        bgColor: "#242424",
        borderColor: "#484848"
    }

    var init = function (elem, elems) {
        if (elem === '' || elem === null || elem === undefined
            || elems == '' || elems === null || elems === undefined) return;
        let _elem = document.getElementsByClassName('menu');
        if (_elem === null || _elem === undefined || _elem.length === 0) return;
        _elem = _elem[0];

        elems.forEach((_e)=>{
            let _id = _e.hasOwnProperty('id')? _e.id:ate.now().toString();
            let _icon = _e.hasOwnProperty('icon')? _e.icon:'';
            let _title = _e.hasOwnProperty('title')? _e.title:'';

            if(_e.hasOwnProperty('subnodes')){
                let _d = document.createElement("div");
                _d.classList.add("submenu-title");

                let _i = document.createElement("i");
                _i.classList.add('menu-icon');
                _i.classList.add('fa');
                _i.classList.add('fa-'+_icon);
                let _t = document.createElement("span");
                _t.classList.add('menu-title');
                _t.innerText = _title;
                _d.appendChild(_i);
                _d.appendChild(_t);
                _elem.appendChild(_d);

                //let _d1 = document.createElement('div');
                let _ul = document.createElement('ul');
                //_d1.appendChild(_ul);
                _ul.classList.add("submenu");
                _e.subnodes.forEach((_item)=>{
                    console.log(_item)
                    let _li = document.createElement('li');
                    _li.classList.add("submenu-item");

                    let _i = document.createElement('i');
                    _i.innerText = _item.title;
                    _i.setAttribute('id',_item.id);
                    _li.appendChild(_i);
                    _ul.appendChild(_li);
                })
                _elem.appendChild(_ul);

                
                
            }else{
                let _d = document.createElement("div");
                let _i = document.createElement("i");
                _i.classList.add('menu-icon');
                _i.classList.add('fa');
                _i.classList.add('fa-'+_icon);
                let _t = document.createElement("span");
                _t.classList.add('menu-title');
                _t.innerText = _title;
                _d.appendChild(_i);
                _d.appendChild(_t);
                _elem.appendChild(_d);
            }
            
        })
    }

    var render = ()=>{}

    return { init,render }
}());

window.onload = function () { 
    var options = [
        {id:"id1",title:'title1',icon:"dashboard"},
        {id:"id2",title:'title2',icon:"dashboard",subnodes:[
            {id:"id-2-1",title:"title2-1"},
            {id:"id-2-2",title:"title2-2"}
        ]},
        {id:"id3",title:'title3',icon:"dashboard"},
        {id:"id4",title:'title4',icon:"dashboard"},
        {id:"id5",title:'title5',icon:"dashboard"}
    ];
    $jm.init('menu',options);
}

<div class="container">
    <div class="sidebar">
        <div class="menu"></div>
    </div>
    <div class="content"></div>
</div>

@import url("https://netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css");

*{
    margin:0;
    padding:0;
    box-sizing: border-box;
}

body{
    position: relative;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.container{
    flex: 0 1 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.container .sidebar{
    width: 20vw;
    height: 100vh;
    background:#242424;
}
.container .sidebar .menu{
    display: block;
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 100%;
}




.container .content{
    width: 80vw;
    height: 100vh;
    background:#34f;
}