Sidebar with ListView in ASP.NET MVC Sidebar control

<!-- sidebar element declaration -->
@{Html.EJS().Sidebar("default-sidebar").Type(Syncfusion.EJ2.Navigations.SidebarType.Over).Width("100%").ContentTemplate(@<div>
    <div class="title1"> Menu </div>
    <div class="closebtn">
        <!-- Button element declaration -->
        @Html.EJS().Button("close").CssClass("e-btn close-btn").Content("CLOSE SIDEBAR").IconCss("e-icons close-icon").Render()
    </div>
    <div id="listcontainer">
        <!-- Listview element declaration -->
        @Html.EJS().ListView("list").DataSource((IEnumerable<object>)ViewBag.dataSource).Render()
    </div>
    <div class="sub-title">
        * ListView component is placed inside the sidebar content area.
    </div>
</div>).Render();
}
<!-- end of sidebar element -->
<!--  Main Content declaration -->
<div>
    <div class="title2">Main content</div>
    <div class="sub-title"> Click the button to open/close the Sidebar.</div>
    <div style="padding:20px" class="center-align">
        <!-- Button element declaration -->
        @Html.EJS().Button("toggle").Content("Toggle Sidebar").IsToggle(true).CssClass("e-info").Render()
    </div>
</div>

<script type="text/javascript">

    document.addEventListener('DOMContentLoaded', function () {
        // Create instances for sidebar element
        var defaultSidebar = document.getElementById("default-sidebar").ej2_instances[0];
        // Toggle button to open and close the sidebar
        document.getElementById('toggle').onclick = function () {

            defaultSidebar.toggle();
        }
        // Close the sidebar
        document.getElementById('close').onclick = function () {
            defaultSidebar.hide();
        }
    });
</script>

<style>
    /* Listview element styles */
    #listcontainer {
        width: 100%;
    }

    #list {
        margin: 0 auto;
        width: 30%;
    }

    .e-listview .e-list-item {
        text-align: center;
        font-size: 14px;
        padding: 0;
    }
    /* Button element styles */
    .e-btn.close-btn :hover { /* csslint allow: adjoining-classes*/
        box-shadow: none;
        background: transparent;
    }

    .close-btn, .e-listview .e-list-item, #default-sidebar {
        background-color: rgb(20, 118, 210);
        color: #ffffff;
    }

    .close-icon::before {
        content: '\e945';
    }

    .close-btn {
        box-shadow: none;
    }

    .close-btn:hover {
        color: #fafafa;
    }

    .e-icons.close-icon { /* csslint allow: adjoining-classes*/
        line-height: 2.2;
    }

    .closebtn {
        top: 15px;
        line-height: 36px;
        height: 42px;
        color: black;
        position: absolute;
        right: 10px;
    }
    /* Sample level styles */
    .title1 {
        text-align: center;
        font-size: 20px;
        padding: 15px;
    }

    .title2 {
        text-align: center;
        font-size: 20px;
        padding: 15px;
    }

    .sub-title {
        text-align: center;
        font-size: 16px;
        padding: 10px;
    }

    .center-align {
        text-align: center;
        padding: 20px;
    }

    body {
        margin: 0;
    }

</style>

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;

namespace WebApplication.Controllers
{
    public partial class SidebarController : Controller
    {
        public IActionResult sidebar()
        {
            List<object> data = new List<object>();
            data.Add(new { text = "Home", id = "list-01" });
            data.Add(new { text = "Offers", id = "list-02" });
            data.Add(new { text = "Support", id = "list-03" });
            data.Add(new { text = "Logout", id = "list-04" });
            ViewBag.dataSource = data;
            return View();
        }
    }
}