I have implemented a navbar in my asp.net application views, using the following code snippet that I copied from the Bootstrap example page:
<nav class="navbar navbar-expand-md navbar-dark bg-dark">
<a class="navbar-brand" asp-controller="Home" asp-action="Index">Bata</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" asp-controller="Home" asp-action="Index">Home</a>
</li>
@if (signInManager.IsSignedIn(User) && User.IsInRole("Admin"))
{
<li class="nav-item">
<a class="nav-link" asp-action="ListUsers" asp-controller="Admin">User Management</a>
</li>
<li class="nav-item">
<a class="nav-link" asp-action="ListPurchases" asp-controller="Purchase">Purchases</a>
</li>
<li class="nav-item">
<a class="nav-link" asp-action="ListCurrencies" asp-controller="Admin">Currency Management</a>
</li>
<li class="nav-item">
<a class="nav-link" asp-action="List" asp-controller="unitItem">Inventory Management</a>
</li>
}
<li class="nav-item">
<a class="nav-link" asp-controller="Contact" action="Index">Contact</a>
</li>
</ul>
@await Component.InvokeAsync("CheckoutSummary")
@await Html.PartialAsync("LoginPartial")
<form class="form-inline mt-2 mt-md-0">
<input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>While the navbar displays correctly, I am facing an issue where the collapse button does not work when clicked. Despite the button reacting visually to the click event by turning orange, the collapsible functionality is not working as expected.
I have bundled the necessary Bootstrap and JavaScript files in my project like this, including the vendor files within the view:
{
"outputFileName": "wwwroot/vendor.min.css",
"inputFiles": [
"node_modules/bootstrap/dist/css/bootstrap.min.css",
"node_modules/bootstrap/dist/css/bootstrap.min.css.map",
"node_modules/bootstrap/dist/css/bootstrap.css.map",
],
"minify": { "enabled": true }
},
{
"outputFileName": "wwwroot/vendor.min.js",
"inputFiles": [
"node_modules/popper.js/dist/umd/popper.min.js",
"node_modules/bootstrap/dist/js/bootstrap.min.js",
"node_modules/bootstrap/dist/js/bootstrap.bundle.min.js",
"node_modules/bootstrap/dist/js/bootstrap.bundle.min.js.map",
"node_modules/jquery/dist/jquery.min.js"
],
"minify": { "enabled": false }
}I'm currently unsure why the collapse functionality of the button is not working. Is there something crucial that I might be missing in my implementation? Any guidance or suggestions would be greatly appreciated.