Переместить вкладку поиска листовок в боковое меню

Question

У меня есть листовка с опцией поиска атрибутов для 4 полей.Я настроил значок поиска с моими собственными изображениями, как показано.

Код CSS:

.leaflet-control-search:nth-child(2n) .search-button {
    background: url(images/road2.png) no-repeat 2px 2px #fff;
}

.leaflet-control-search:nth-child(3n) .search-button {
    background: url(images/category.png) no-repeat 2px 2px #fff;
}

.leaflet-control-search:nth-child(4n) .search-button {
    background: url(images/status.png) no-repeat 2px 2px #fff;
}

.leaflet-control-search:nth-child(5n) .search-button {
    background: url(images/Date.png) no-repeat 2px 2px #fff;
}

Код JS:

map.addControl(new L.Control.Search({
    layer: Points,
    propertyName: 'Subcategor',
    moveToLocation: function(latlng, title, map) {
        console.log(latlng);
        map.setView(latlng, 16);
    }
}));


map.addControl(new L.Control.Search({
    layer: Points,
    propertyName: 'Status',
    moveToLocation: function(latlng, title, map) {
        console.log(latlng);
        map.setView(latlng, 16);
    }
}));


map.addControl(new L.Control.Search({
    layer: Points,
    propertyName: 'Date Detec',
    moveToLocation: function(latlng, title, map) {
        console.log(latlng);
        map.setView(latlng, 16);
    }
}));

Теперь яхочу переместить эти функции поиска в боковое меню, но не могу понять это.Я загрузил стиль меню с здесь :