Responsive Navigation Header - Copy this Html, Tailwind Component to your project

@model Car_Rental_System.ViewModels.NavbarViewModel @if (Model.CurrentUrl == "/" || Model.CurrentUrl == "/Home" || Model.CurrentUrl == "/Home/Index") { <div class="container-fluid mb-5"> <div class="row border-top px-xl-5"> <div class="col-lg-3 d-none d-lg-block"> <a class="btn shadow-none d-flex align-items-center justify-content-between bg-primary text-white w-100" data-toggle="collapse" href="#navbar-vertical" style="height: 65px; margin-top: -1px; padding: 0 30px;"> <h6 class="m-0">Danh mục</h6> <i class="fa fa-angle-down text-dark"></i> </a> <nav class="collapse show navbar navbar-vertical navbar-light align-items-start p-0 border border-top-0 border-bottom-0" id="navbar-vertical"> <div class="navbar-nav w-100 overflow-hidden" style="height: 410px"> @foreach (var item in Model.Categories) { <a href="/Home/Shop?CategoryId=@item.Id" class="nav-item nav-link">@item.Name</a> } </div> </nav> </div> <div class="col-lg-9"> <nav class="navbar navbar-expand-lg bg-light navbar-light py-3 py-lg-0 px-0"> <a href="" class="text-decoration-none d-block d-lg-none"> <h1 class="m-0 display-5 font-weight-semi-bold"><span class="text-primary font-weight-bold border px-3 mr-1">E</span>Shopper</h1> </a> <button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#navbarCollapse"> <span class="navbar-toggler-icon"></span> </button> <div class="navbar-collapse collapse d-flex justify-content-between w-100"> <div class="navbar-nav py-0"> <a asp-action="Index" asp-controller="Home" class="nav-item nav-link">Trang chủ</a> <a asp-controller="Home" asp-action="Shop" class="nav-item nav-link">Sản phẩm</a> </div> @* <div class="navbar-nav ms-auto d-flex justify-content-center align-items-center"> <form id="dateForm" class="d-flex"> <div class="mb-0 me-2"> <input type="date" class="form-control" id="startDate" name="startDate" min="@DateTime.Today.ToString("yyyy-MM-dd")" /> </div> <div class="mb-0 me-2"> <input type="date" class="form-control" id="endDate" min="@DateTime.Today.ToString("yyyy-MM-dd")" name="endDate" /> </div> <button type="submit" class="btn btn-primary">Apply</button> </form> </div> *@ <ul class="navbar-nav"> @if (User.Identity.IsAuthenticated) { <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="userDropdown" role="button" data-bs-toggle="dropdown"> @User.Identity.Name </a> <ul class="dropdown-menu dropdown-menu-end"> <li> <a asp-action="Index" asp-controller="Profile" class="nav-item nav-link">Profile</a> </li> <li> <form method="post" asp-controller="Account" asp-action="Logout"> <button type="submit" class="dropdown-item">Logout</button> </form> </li> </ul> </li> } else { <li class="nav-item"> <a class="nav-link" asp-controller="Account" asp-action="Login">Login</a> </li> <li class="nav-item"> <a class="nav-link" asp-controller="Account" asp-action="Register">Register</a> </li> } </ul> </div> </nav> <div id="header-carousel" class="carousel slide" data-ride="carousel"> <div class="carousel-inner"> <div class="carousel-item active" style="height: 410px;"> <img class="img-fluid" src="img/2.jpg" alt="Image"> <div class="carousel-caption d-flex flex-column align-items-center justify-content-center"> <div class="p-3" style="max-width: 700px;"> <h4 class="text-light text-uppercase font-weight-medium mb-3">Giá thấp nhất thị trường </h4> <h3 class="display-4 text-white font-weight-semi-bold mb-4">Thủ tục nhanh chóng</h3> <a href="@Url.Action("Shop","Home")" class="btn btn-light py-2 px-3">Tìm hiểu nào</a> </div> </div> </div> <div class="carousel-item" style="height: 410px;"> <img class="img-fluid" src="img/1.jpg" alt="Image"> <div class="carousel-caption d-flex flex-column align-items-center justify-content-center"> <div class="p-3" style="max-width: 700px;"> <h4 class="text-light text-uppercase font-weight-medium mb-3">Giá thấp nhất thị trường </h4> <h3 class="display-4 text-white font-weight-semi-bold mb-4">Thủ tục nhanh chóng</h3> <a href="#service" class="btn btn-light py-2 px-3">Tìm hiểu nào</a> </div> </div> </div> </div> <a class="carousel-control-prev" href="#header-carousel" data-slide="prev"> <div class="btn btn-dark" style="width: 45px; height: 45px;"> <span class="carousel-control-prev-icon mb-n2"></span> </div> </a> <a class="carousel-control-next" href="#header-carousel" data-slide="next"> <div class="btn btn-dark" style="width: 45px; height: 45px;"> <span class="carousel-control-next-icon mb-n2"></span> </div> </a> </div> </div> </div> </div> } else { <div class="container-fluid"> <div class="row border-top px-xl-5"> <div class="col-lg-3 d-none d-lg-block"> <a class="btn shadow-none d-flex align-items-center justify-content-between bg-primary text-white w-100" data-toggle="collapse" href="#navbar-vertical" style="height: 65px; margin-top: -1px; padding: 0 30px;"> <h6 class="m-0">Danh mục</h6> <i class="fa fa-angle-down text-dark"></i> </a> <nav class="collapse position-absolute navbar navbar-vertical navbar-light align-items-start p-0 border border-top-0 border-bottom-0 bg-light" id="navbar-vertical" style="width: calc(100% - 30px); z-index: 1;"> <div class="navbar-nav w-100 overflow-hidden" style="height: 410px"> @foreach (var item in Model.Categories) { <a href="/Home/Shop?CategoryId=@item.Id" class="nav-item nav-link">@item.Name</a> } </div> </nav> </div> <div class="col-lg-9"> <nav class="navbar navbar-expand-lg bg-light navbar-light py-3 py-lg-0 px-0"> <a href="" class="text-decoration-none d-block d-lg-none"> <h1 class="m-0 display-5 font-weight-semi-bold"><span class="text-primary font-weight-bold border px-3 mr-1">E</span>Shopper</h1> </a> <button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#navbarCollapse"> <span class="navbar-toggler-icon"></span> </button> <div class="navbar-collapse collapse d-sm-inline-flex justify-content-between"> <div class="navbar-nav mr-auto py-0"> <a asp-action="Index" asp-controller="Home" class="nav-item nav-link">Trang chủ</a> <a asp-controller="Home" asp-action="Shop" class="nav-item nav-link">Sản phẩm</a> </div> <div class="navbar-nav ms-auto py-0"> @if (User.Identity.IsAuthenticated) { <span class="nav-item nav-link">Xin chào, @User.Identity.Name</span> <a asp-action="Index" asp-controller="Profile" class="nav-item nav-link">Profile</a> <form asp-action="Logout" asp-controller="Account" method="post" class="d-inline"> <button type="submit" class="btn btn-link nav-link p-0 border-0">Logout</button> </form> } else { <a asp-action="Login" asp-controller="Account" class="nav-item nav-link">Login</a> <a asp-action="Register" asp-controller="Account" class="nav-item nav-link">Register</a> } </div> </div> </nav> </div> </div> </div> } <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script> @section Scripts { <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> @* <script> document.addEventListener("DOMContentLoaded", function () { document.getElementById("startDate").addEventListener("change", function () { const startDate = document.getElementById("startDate").value; const endDateInput = document.getElementById("endDate"); // Thiết lập min của endDate là ngày sau startDate if (startDate) { const startDateObj = new Date(startDate); startDateObj.setDate(startDateObj.getDate() + 1); // Ngày kết thúc phải ít nhất là ngày sau startDate endDateInput.setAttribute("min", startDateObj.toISOString().split('T')[0]); } }); }); </script> *@ }