sticky sidebar

This commit is contained in:
Tanishq Dubey 2024-10-20 20:22:31 -04:00
parent 3dbdd354b5
commit 6335751f0f

View File

@ -15,12 +15,13 @@
background-color: #f0f0f0; background-color: #f0f0f0;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
height: 100dvh; min-height: 100vh;
} }
.main-content { .main-content {
flex-grow: 1; flex-grow: 1;
padding: 20px; padding: 20px;
overflow-y: auto;
} }
.grid-container { .grid-container {
display: grid; display: grid;
@ -95,15 +96,14 @@
} }
.sidebar { .sidebar {
min-width: 20rem; width: 20rem;
background-color: #f0f0f0; background-color: #f0f0f0;
padding: 20px; padding: 20px;
box-sizing: border-box; box-sizing: border-box;
position: sticky; position: sticky;
top: 0; top: 0;
height: 100vh; height: 100vh;
overflow: hidden; overflow-y: auto;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: space-between; justify-content: space-between;
@ -160,6 +160,7 @@
height: auto; height: auto;
position: static; position: static;
padding: 10px; padding: 10px;
overflow-y: visible;
} }
.sidebar-nav ul { .sidebar-nav ul {
display: none; display: none;
@ -179,10 +180,7 @@
<div class="nav-toggle"></div> <div class="nav-toggle"></div>
<nav> <nav>
<ul> <ul>
<li><a href="#">Home</a></li> <li><a href="/">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
<!-- divider line -->
<li><hr></li> <li><hr></li>
<li>Powered by <a href="https://dws.rip">DWS</a></li> <li>Powered by <a href="https://dws.rip">DWS</a></li>
</ul> </ul>