Sliding sidenav (pushes main content)

Hey friends, I have a left-side navigation pane that on smaller screens should slide out from left to right like a drawer and push the main content to the right. Are there any tutorials on this kind of side nav? I've tried a few times but can never get this effect to work flawlessly using grid.
2 Replies
Zakum
Zakum2y ago
Layout wrapper:
<!-- root level/direct child of body -->
<div class="grid" class:show-nav={navIsOpen}>
<Navigation />
<main class="page-contents">
<slot />
<footer />
</main>
</div>
<!-- root level/direct child of body -->
<div class="grid" class:show-nav={navIsOpen}>
<Navigation />
<main class="page-contents">
<slot />
<footer />
</main>
</div>
.grid {
display: grid;
grid-template-columns: auto 1fr;
transition: all 0.3s ease;
}

@media (max-width: 800px) {
.grid {
transform: translateX(-250px);
grid-template-columns: auto 100%;
}
}
/* Slides the entire grid back into position when button is pressed */
.show-nav {
transform: translateX(0) !important;
}
.grid {
display: grid;
grid-template-columns: auto 1fr;
transition: all 0.3s ease;
}

@media (max-width: 800px) {
.grid {
transform: translateX(-250px);
grid-template-columns: auto 100%;
}
}
/* Slides the entire grid back into position when button is pressed */
.show-nav {
transform: translateX(0) !important;
}
found a solution, feel free to dm if anyone needs
Want results from more Discord servers?
Add your server