llhd/Views/Shared/Section/_Header.cshtml

<header>
    <nav class="navbar navbar-expand-lg navbar-light bg-white shadow-sm sticky-top">
        <div class="container">

            <a class="navbar-brand" asp-controller="Home" asp-action="Index">
                <img src="~/assets/image/logo/Logo update.png" width="120" />
            </a>

            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
                <span class="navbar-toggler-icon"></span>
            </button>

            <div class="collapse navbar-collapse" id="navbarNav">

                <ul class="navbar-nav mx-auto align-items-lg-center gap-lg-3">

                    <li class="nav-item">
                        <a class="nav-link nav-underline" asp-controller="Home" asp-action="Index">
                            Beranda
                        </a>
                    </li>

                    <li class="nav-item dropdown">
                        <a class="nav-link" asp-controller="Layanan" asp-action="Index">Layanan</a>

                        <ul class="dropdown-menu">
                            <li>
                                <a class="dropdown-item" href="/Layanan?jenis=pcu">
                                    PCU Air
                                </a>
                            </li>
                            <li>
                                <a class="dropdown-item" href="/Layanan?jenis=air">
                                    Pengujian Air
                                </a>
                            </li>
                            <li>
                                <a class="dropdown-item" href="/Layanan?jenis=udara">
                                    Pengujian Udara
                                </a>
                            </li>
                        </ul>
                    </li>

                    <li class="nav-item">
                        <a class="nav-link nav-underline" asp-controller="Regulasi" asp-action="Index">Regulasi</a>
                    </li>

                    <li class="nav-item">
                        <a class="nav-link nav-underline" asp-controller="Home" asp-action="Sertifikat">Sertifikat</a>
                    </li>

                    <li class="nav-item">
                        <a class="nav-link nav-underline" asp-controller="Home" asp-action="TentangKami">Tentang Kami</a>
                    </li>

                    <li class="nav-item">
                        <a class="nav-link nav-underline" asp-controller="Home" asp-action="Kontak">Kontak</a>
                    </li>

                    <li class="nav-item">
                        <a class="nav-link nav-underline" asp-controller="Home" asp-action="Faq">FAQ</a>
                    </li>

                    <li>
                        <button class="btn btn-link search-btn" data-bs-toggle="modal" data-bs-target="#searchModal">
                            <i class="bi bi-search"></i>
                        </button>
                    </li>

                </ul>

                <div class="d-flex">
                    <a href="https://akun.dinaslhdki.id/Identity/Account/Login?ReturnUrl=%2Fconnect%2Fauthorize%3Fclient_id%3Dlab-llhd%26redirect_uri%3Dhttps%253A%252F%252Fllhd.jakarta.go.id%252Fsignin-oidc%26response_type%3Dcode%26scope%3Dopenid%2520profile%2520email%2520roles%26code_challenge%3DROZFhIiIV8Fg4iVUWuIQbid6GXDa_jGSOqZKlmhU3N0%26code_challenge_method%3DS256%26response_mode%3Dform_post%26nonce%3D639063956776558493.ZTJjNjYxNzktODcyMC00NDdmLTgxODMtOTc3YzU1NmJkMGJiY2Q5ODg1MDMtMDZmOS00YTk2LThmM2YtNzI2ZjM5M2I5YjVj%26state%3DCfDJ8PaurvbSUKVMk3vpur3gVTRI_1HtqkzE3Ft0v1DW-t6Y10uXXwPx-sK1w0KA7UMZBOQgdlnQyyMJ4JeuYWtY0mOiiFlqizj2RDhZ934xfHNaqJMORnk08t2i4zCqJ0232v7LWviUqFkNsHYKUba4NLAJMkmPIhl8lgOZr_DrC-qAM6uCGJmD4wDyErxslcXYe4ljvW2InuPjWT4jKBq-qnKp6JsuEl6jmJBMt5fSSt2BqfFq4TDrHDZSB_xNHakU5l1m0QxLKH2lgoOe--p-eydQkxLzULMuxrIiI30nX_klk4cVioq6b-asGqqgbvsZVKGa3BilFjwV6_1Lntls2FcJaQ9_i69pLK5SAArWpPPNEGBLSVur-QysWvwnhYubGg%26x-client-SKU%3DID_NET9_0%26x-client-ver%3D8.0.1.0%26prompt%3D" class="btn btn-primary rounded-pill px-4">Login</a>
                </div>

            </div>

        </div>
    </nav>
</header>

<div class="modal fade" id="searchModal" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content search-modal">

            <div class="modal-body">

                <input type="text" id="searchInput"
                       class="form-control search-popup-input"
                       placeholder="Cari layanan, berita, regulasi..." />

                <div id="searchResult" class="mt-3"></div>

            </div>

        </div>
    </div>
</div>

<script>
let allData = [];

async function loadSearchData() {
    const regulasi = await fetch('/Regulasi/GetRegulasi').then(r => r.json());
    const berita = await fetch('/Berita/GetAll').then(r => r.json());

    allData = [
        ...regulasi.map(x => ({ ...x, type: 'regulasi' })),
        ...berita.map(x => ({ ...x, type: 'berita' })),
    ];
}

function searchData(keyword) {

    keyword = keyword.toLowerCase();

    const result = allData.filter(item =>
        item.judul.toLowerCase().includes(keyword)
    );

    renderResult(result);
}

function renderResult(data) {

    let html = "";

    if (data.length === 0) {
        html = "<p class='text-muted'>Tidak ditemukan</p>";
    }

    data.slice(0, 5).forEach(item => {

        let link = "#";

        if (item.type === "berita") {
            link = `/Berita/Detail?id=${item.id}`;
        }

        if (item.type === "regulasi") {
            link = item.file;
        }

        html += `
            <a href="${link}" class="search-item d-block p-2 mb-2 rounded">
                <strong>${item.judul}</strong><br>
                <small class="text-muted">${item.type}</small>
            </a>
        `;
    });

    document.getElementById("searchResult").innerHTML = html;
}

document.addEventListener("DOMContentLoaded", () => {

    loadSearchData();

    document.getElementById("searchInput").addEventListener("keyup", function () {
        const keyword = this.value;

        if (keyword.length < 2) {
            document.getElementById("searchResult").innerHTML = "";
            return;
        }

        searchData(keyword);
    });

});
</script>