After implementing the sidebar its fridge my other page and didn’t able to scroll the page in Asp.net Core MVC. I think the problem is coming from the _layout.cshtml file. as it has a container which render my other page. Please help me to solve this problem.
Here is My _Layout.cshtm File. The header is the side bar.
<header>
<div class="sidebar">
<div class="logo_content">
<div class="logo">
<i class="bx bxl-c-plus-plus"></i>
<div class="logo_name">dgInfoSys</div>
</div>
<i class="bx bx-menu" id="btn"></i>
</div>
<ul class="nav_list">
<li>
<i class="bx bx-search-alt"></i>
<input class="text" placeholder="Search...">
<span class="tooltip">Search</span>
</li>
<li>
<a href="#">
<i class="bx bx-grid-alt"></i>
<span class="links_name">Dashboard</span>
</a>
<span class="tooltip">Dashboard</span>
</li>
<li>
<a href="#">
<i class="bx bx-user"></i>
<span class="links_name">User</span>
<i class="bx bxs-chevron-down htmlcss-arrow arrow "></i>
</a>
<span class="tooltip">User</span>
</li>
<li>
<a href="#">
<i class="bx bxs-user-badge"></i>
<span class="links_name">Super Admin</span>
</a>
<span class="tooltip">Super Admin</span>
</li>
<li>
<a href="#">
<i class="bx bx-line-chart"></i>
<span class="links_name">Analytics</span>
</a>
<span class="tooltip">Analytics</span>
</li>
<li>
<a asp-controller="BTBTable" asp-action="Index">
<i class="bx bxs-report"></i>
<span class="links_name">Files</span>
</a>
<span class="tooltip">Files</span>
</li>
<li>
<a href="#">
<i class="bx bx-cog"></i>
<span class="links_name">Setting</span>
</a>
<span class="tooltip">Setting</span>
</li>
</ul>
<div class="profile_content">
<div class="profile">
<div class="profile_details">
@*<img src="" alt="" />*@
<div class="name_job">
<div class="name">Masum Rayhan</div>
<div class="job">Developer</div>
</div>
</div>
<i class="bx bx-log-out" id="log_out"></i>
</div>
</div>
</div>
</header>
<div id="main">
<span style="font-size:30px;cursor:pointer" onclick="openNav()">☰
</span>
</div>
<div class="container">
<main role="main" class="pb-3">
@RenderBody()
</main>
</div>
And side bar css is given below:
@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
body {
position: relative;
min-height: 100vh;
width: 100%;
overflow: hidden;
}
.sidebar {
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 78px;
/*width: 240px;*/
background: #11101d;
padding: 6px 14px;
transition: all 0.5s ease;
}
.sidebar.active {
width: 240px;
}
.sidebar .logo_content .logo {
color: #fff;
display: flex;
height: 50px;
width: 100%;
align-items: center;
opacity: 0;
pointer-events: none;
transition: all 0.5s ease;
}
.sidebar.active .logo_content .logo {
opacity: 1;
pointer-events: none;
}
.logo_content .logo i {
font-size: 28px;
margin-right: 5px;
}
.logo_content .logo .logo_name {
font-size: 20px;
font-weight: 400;
}
.sidebar #btn {
position: absolute;
color: #fff;
left: 50%;
top: 6px;
font-size: 20px;
height: 50px;
width: 50px;
text-align: center;
line-height: 50px;
transform: translateX(-50%);
}
.sidebar.active #btn {
left: 90%;
}
.sidebar ul {
margin-top: 20px;
}
.sidebar ul li {
position: relative;
height: 50px;
width: 100%;
margin: 0 5px;
list-style: none;
line-height: 50px;
}
.sidebar ul li .tooltip {
position: absolute;
left: 122px;
height: 35px;
width: 122px;
top: 50%;
transform: translate(-50%, -50%);
border-radius: 6px;
line-height: 35px;
text-align: center;
background: #fff;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
transition: 0s;
opacity: 0;
pointer-events: none;
}
.sidebar.active ul li .tooltip {
display: none;
}
.sidebar ul li:hover .tooltip {
transition: all 0.5s ease;
opacity: 1;
top: 50%
}
.sidebar ul li input {
position: absolute;
height: 100%;
width: 100%;
left: 0;
top: 0;
border-radius: 12px;
outline: none;
border: none;
background: #1d1b31;
padding-left: 50px;
font-size: 18px;
color: #fff;
}
.sidebar ul li .bx-search {
position: absolute;
z-index: 99;
color: #fff;
font-size: 22px;
transition: all 0.5s ease;
}
.sidebar ul li .bx-search:hover {
background: #fff;
color: #1d1b31;
}
.sidebar ul li a {
color: #fff;
display: flex;
align-items: center;
text-decoration: none;
transition: all 0.4s ease;
border-radius: 12px;
white-space: nowrap;
}
.sidebar ul li a:hover {
color: #11101d;
background: #fff;
}
.sidebar ul li a i {
height: 50px;
min-width: 50px;
border-radius: 12px;
line-height: 50px;
text-align: center;
}
.sidebar .links_name {
opacity: 0;
pointer-events: none;
transition: all 0.5s ease;
}
.sidebar.active .links_name {
opacity: 1;
pointer-events: auto;
}
.sidebar .profile_content {
position: absolute;
color: #fff;
bottom: 0;
left: 0;
width: 100%;
}
.sidebar .profile_content .profile {
position: relative;
padding: 10px 6px;
height: 60px;
background: none;
transition: all 0.4s ease;
}
.sidebar.active .profile_content .profile {
background: #1d1b31;
}
.profile_content .profile .profile_details {
display: flex;
align-items: center;
opacity: 0;
pointer-events: none;
white-space: nowrap;
}
.sidebar.active .profile .profile_details {
opacity: 1;
pointer-events: auto;
}
.profile .profile_details img {
height: 45px;
width: 45px;
object-fit: cover;
border-radius: 12px;
}
.profile .profile_details .name_job {
margin-left: 10px;
}
.profile .profile_details .name {
font-size: 15px;
font-weight: 400;
}
.profile .profile_details .job {
font-size: 12px;
}
.profile #log_out {
position: absolute;
bottom: 5px;
left: 50%;
transform: translateX(-50%);
min-width: 50px;
line-height: 50px;
font-size: 20px;
border-radius: 12px;
text-align: center;
transition: all 0.4s ease;
background: #1d1b31;
}
.sidebar.active .profile #log_out {
left: 80%
}
.sidebar.active .profile #log_out {
background: none;
}
.home_content {
position: absolute;
height: 100%;
width: calc(100% -78px);
left: 78px;
transition: all 0.5s ease;
}
.home_content .text {
font-size: 25px;
font-weight: 500;
color: #1d1b31;
margin: 12px;
}
.sidebar.active ~ .home_content {
width: calc(100% -240px);
left: 240px;
}