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