<div class="sidebar-wrapper col-md-2 fl">
    <input type="text"
           class="mt-25"
           placeholder="Menüde Ara"
           id="search" onkeyup="search()" />

    <ul class="nav d-block" id="panelMenu">
        <li class="nav-item">
            <a href="/Panel/Index">
                <p>Genel Site Ayarlar</p>
            </a>
        </li>
        <li class="nav-item">
            <a href="/Panel/Grafik">
                <p>Raporlar</p>
            </a>
        </li>
        <li class="nav-item">
            <a href="/Panel/Cupons" class="nav-link">
                <p>Kuponlar</p>
            </a>
        </li>
        <li class="nav-item">
            <a href="/Panel/Slider" class="nav-link">
                <p>Slider</p>
            </a>
        </li>
        <li class="nav-item">
            <a href="/Panel/SliderAdd">
                <p>Slider Ekle</p>
            </a>
        </li>
    </ul>
</div>
<script>
    const search = () => {
        const val = document.getElementById('search').value;
        let cont = document.querySelectorAll('.sidebar-wrapper  .nav-item > a > p');

        if (val != null && val != undefined && val != '') {
            for (let i = 0; i < cont.length; i++) {
                if (!cont[i].textContent.toLowerCase().includes(val.toLowerCase())) {
                    cont[i].parentNode.parentNode.classList = 'nav-item hide'
                } else {
                    cont[i].parentNode.parentNode.classList = 'nav-item'
                }
            }
        } else {
            for (let i = 0; i < cont.length; i++) {
                cont[i].parentNode.parentNode.classList = 'nav-item'
            }
        }
    }
</script>
<style>
    html body {
        background-color: #464646 !important;
    }

    .sidebar-wrapper {
        background-color: #000;
        height: -webkit-fill-available;
        min-height: 100%;
    }

        .sidebar-wrapper .nav-item {
            float: left;
            width: 100%;
        }

            .sidebar-wrapper .nav-item > a {
                float: left !important;
                padding: 10px 15px !important;
                font-size: 15px !important;
                font-weight: 500 !important;
                color: #fff !important;
            }

    .nav-item > a > p {
        margin-bottom: 0;
    }

    .mainmenuwrapper {
        margin-bottom: 30px;
    }

    .sidebar-wrapper #search {
        width: 100%;
        height: 34px;
        padding: 6px 12px;
        background-color: #fff;
        background-image: none;
        border: 1px solid #ccc;
        border-radius: 4px;
        -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
        box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
        -webkit-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
        -o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
        transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
    }
</style>