make aside menu sticky

This commit is contained in:
Jonas Duri 2023-12-08 19:48:40 +01:00
parent c05f5dd642
commit 2923b48feb
2 changed files with 43 additions and 36 deletions

View File

@ -1,37 +1,39 @@
<aside id="menu"> <div>
<h2>Components</h2> <aside id="menu">
<nav> <h2>Components</h2>
<ul> <nav>
<li><a href="#GridSystem">Grid System</a></li> <ul>
<li><a href="#Navigation">Navigation</a></li> <li><a href="#GridSystem">Grid System</a></li>
<li><a href="#NavigationList">Navigation List</a></li> <li><a href="#Navigation">Navigation</a></li>
<li><a href="#Lists">Lists</a></li> <li><a href="#NavigationList">Navigation List</a></li>
<li><a href="#Typography">Typography</a></li> <li><a href="#Lists">Lists</a></li>
<li><a href="#Tables">Tables</a></li> <li><a href="#Typography">Typography</a></li>
<li> <li><a href="#Tables">Tables</a></li>
<a href="#SpecialElements">Special Elements</a> <li>
<ul> <a href="#SpecialElements">Special Elements</a>
<li><a href="#Blockquote">Blockquote</a></li> <ul>
<li><a href="#Misc">Misc</a></li> <li><a href="#Blockquote">Blockquote</a></li>
</ul> <li><a href="#Misc">Misc</a></li>
</li> </ul>
<li><a href="#Forms">Forms</a></li> </li>
<li><a href="#Progress">Progress Bar</a></li> <li><a href="#Forms">Forms</a></li>
<li><a href="#Buttons">Buttons</a></li> <li><a href="#Progress">Progress Bar</a></li>
<li><a href="#Cards">Cards</a></li> <li><a href="#Buttons">Buttons</a></li>
<li><a href="#Timeline">Timeline</a></li> <li><a href="#Cards">Cards</a></li>
<li><a href="#Alerts">Alerts</a></li> <li><a href="#Timeline">Timeline</a></li>
<li><a href="#Media">Media</a></li> <li><a href="#Alerts">Alerts</a></li>
<li><a href="#Figure">Image with caption</a></li> <li><a href="#Media">Media</a></li>
<li><a href="#highlightjs">Supports Highlight.js</a></li> <li><a href="#Figure">Image with caption</a></li>
</ul> <li><a href="#highlightjs">Supports Highlight.js</a></li>
</nav> </ul>
</nav>
<h2>Documentation</h2> <h2>Documentation</h2>
<nav> <nav>
<ul> <ul>
<li><a href="#DocVariables">Variables</a></li> <li><a href="#DocVariables">Variables</a></li>
<li><a href="#DocTypography">Typography</a></li> <li><a href="#DocTypography">Typography</a></li>
</ul> </ul>
</nav> </nav>
</aside> </aside>
</div>

View File

@ -102,5 +102,10 @@
.components-grid { .components-grid {
grid-template-columns: 3fr 9fr; grid-template-columns: 3fr 9fr;
} }
.components-grid aside {
position: sticky;
top: calc(var(--global-space) * 2);
}
} }
</style> </style>