Я работаю над своим стилем представления, и представление разделяет страницу mainLayout, то есть имеет тот же стиль.
В моем представлении админки у меня есть вертикальная панель навигации, и я хочу сохранить эту панель навигации независимо от того, какой вид был нажат. Кроме того, он есть, но когда я нажимаю, например, ссылку «Доступные пользователи», она покрывает некоторые навигационные панели. Кроме того, у меня есть кнопка переключения, которая больше не работает.
Вот визуальное описание того, что я получил: 
Это моя страница макета администратора:
<div id="wrapper">
<div class="container-fluid position-sticky">
<!-- Vertical navbar -->
<div class="vertical-nav bg-dark" id="sidebar">
<div class="py-4 px-3 mb-4 bg-light">
<div class="media d-flex align-items-center">
<div class="media-body">
<!--To Do: user's name-->
<h3 style="font-size:small; color: black;">
<i class="ni ni-circle-08"></i>
welcome<br />
<b>
@currentUser.UserName.ToString()
</b>
</h3>
<button type="button" class="btn-icon-clipboard" data-clipboard-text="atom" title="Copy to clipboard">
<div>
<i class="ni ni-atom"></i>
<span>atom</span>
</div>
</button>
</div>
</div>
</div>
<p class="text-gray font-weight-bold text-uppercase px-3 small pb-4 mb-0">Main</p>
<ul class="nav flex-column bg-white mb-0">
<li class="nav-item">
<a href="#" class="nav-link text-dark bg-dark">
<i class="fa fa-th-large mr-3 text-primary fa-fw"></i>
profile
</a>
</li>
<li class="nav-item">
<i class="fa fa-address-card mr-3 text-primary fa-fw"> </i>
@Html.ActionLink("My Profile", "GetAllUsers", "Admin", new { @class = "nav-link text-dark bg-dark" }, new { @i = "fa fa-address-card mr-3 text-primary fa-fw" })
</li>
<li class="nav-item">
<a href="#" class="nav-link text-dark bg-dark ">
<i class="fa fa-cubes mr-3 text-primary fa-fw"></i>
@Html.ActionLink("Available Customers", "GetAllRidersDetailes", "Admin", new { @class = "nav-link text-dark bg-dark" }, new { @i = "fa fa-cubes mr-3 text-primary fa-fw" })
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link text-dark bg-dark ">
<i class="fa fa-cubes mr-3 text-primary fa-fw"></i>
@Html.ActionLink("Available Drivers", "GetAllDriversDetailes", "Admin", new { @class = "nav-link text-dark bg-dark" }, new { @i = "fa fa-cubes mr-3 text-primary fa-fw" })
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link text-dark bg-dark">
<i class="fa fa-picture-o mr-3 text-primary fa-fw"></i>
Gallery
</a>
</li>
</ul>
</div>
<!-- End vertical navbar -->
<!-- Page content holder -->
<div class="page-content p-5" id="content">
<!-- Toggle button -->
<button id="sidebarCollapse" type="button" class="btn btn-light bg-white rounded-pill shadow-sm px-4 mb-4">
<i class="fa fa-bars mr-2"></i>
</button>
</div>
</div>
</div>
<script type="text/javascript">
$(function () {
// Sidebar toggle behavior
$('#sidebarCollapse').on('click', function () {
$('#sidebar, #content').toggleClass('active');
});
});
</script>
<div>
@RenderBody()
</div>
}
Это мой Таблицы Вид:
@model IEnumerable<RidesApp.Models.DriversModel>
@{
ViewBag.Title = "GetAllDriversDetailes";
Layout = "~/Views/Shared/AdminsLayout.cshtml";
}
<h2>Available Drivers</h2>
<p>
@Html.ActionLink("Create New", "CreateDriver")
</p>
<div class="container-fluid position-sticky table-responsive">
<table class="table-sm table-hover table-bordered table-striped position-sticky mx-auto w-auto" style="margin: 0px auto; width:auto;">
<tr class="table-secondary" style="text-align:center; font-weight:bolder; color:darkblue; ">
<th scope="col">
@Html.DisplayNameFor(model => model.driverId)
</th>
<th scope="col">
@Html.DisplayNameFor(model => model.firstName)
</th>
<th scope="col">
@Html.DisplayNameFor(model => model.lastName)
</th>
<th scope="col">
@Html.DisplayNameFor(model => model.email)
</th>
<th scope="col">
@Html.DisplayNameFor(model => model.phoneNumber)
</th>
<th scope="col">
@Html.DisplayNameFor(model => model.Address)
</th>
<th scope="col">
@Html.DisplayNameFor(model => model.city)
</th>
<th scope="col">
@Html.DisplayNameFor(model => model.state)
</th>
<th scope="col">
@Html.DisplayNameFor(model => model.car)
</th>
<th scope="col">
@Html.DisplayNameFor(model => model.driverslicense)
</th>
<th scope="col">
@Html.DisplayNameFor(model => model.PasswordHash)
</th>
<th scope="col">
@Html.DisplayNameFor(model => model.profileImg)
</th>
<th scope="col">
@Html.DisplayNameFor(model => model.licenseImg)
</th>
<th></th>
</tr>
@foreach (var item in Model)
{
<tr class="justify-content-center" style="color:#e7e7e7;">
<td scope="row">
@Html.DisplayFor(modelItem => item.driverId)
</td>
<td scope="row">
@Html.DisplayFor(modelItem => item.firstName)
</td>
<td scope="row">
@Html.DisplayFor(modelItem => item.lastName)
</td>
<td scope="row">
@Html.DisplayFor(modelItem => item.email)
</td>
<td scope="row">
@Html.DisplayFor(modelItem => item.phoneNumber)
</td>
<td scope="row">
@Html.DisplayFor(modelItem => item.Address)
</td>
<td scope="row">
@Html.DisplayFor(modelItem => item.city)
</td>
<td scope="row">
@Html.DisplayFor(modelItem => item.state)
</td>
<td scope="row">
@Html.DisplayFor(modelItem => item.car)
</td>
<td scope="row">
@Html.DisplayFor(modelItem => item.driverslicense)
</td>
<td scope="row">
@Html.DisplayFor(modelItem => item.PasswordHash)
</td>
<td scope="row">
@Html.DisplayFor(modelItem => item.profileImg)
<div class="panel panel-primary">
<div class="panel-body">
<img id ="proImg"src="@Url.Action("GetProfileImage", "Admin", new { id = item.driverId })" , class="img-fluid" />
</div>
</div>
</td>
<td>
@Html.DisplayFor(modelItem => item.licenseImg)
<div class="panel panel-primary">
<div class="panel-body">
<img id="licImg" src="@Url.Action("GetLicenseImage", "Admin", new { id = item.driverId })" , class="img-fluid" />
</div>
</div>
</td>
<td>
@Html.ActionLink("Edit", "EditDriver", new { id = item.driverId }) |
@Html.ActionLink("Details", "DisplayDrivers", new { id = item.driverId }) |
@Html.ActionLink("Delete", "DeleteDriver", new { id = item.driverId }, new { onclick = "return confirm('Are You Sure You Want To Delete?');" })
</td>
</tr>
}
</table>
</div>
Буду признателен за вашу помощь. Спасибо.