Kevin Powell - Community•2y ago

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•2y ago

Works on desktop when window is small enough for the hamburger menu to appear: https://cdn.discordapp.com/attachments/862600196704829443/1060153293587877978/Mozilla_Firefox_2023-01-04_03-06-46.mp4 Doesn't work on chrome's mobile device view: https://cdn.discordapp.com/attachments/862600196704829443/1060153294263169064/127.0.0.1_5173_-_Google_Chrome_2023-01-04_03-09-20.mp4

Zakum•2y 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

Gaming

Programming

Sliding sidenav (pushes main content)