sticky sidebar
This commit is contained in:
parent
3dbdd354b5
commit
6335751f0f
@ -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>
|
||||||
|
Loading…
Reference in New Issue
Block a user