Kevin Powell - Community•10mo ago

Grid with Toggleable Sidebar Issue

Well, copilot can't figure it out so maybe you guys can. I'm trying to create a sidebar that is toggleable, which seems like it should be pretty simple, but I get this weird behavior where the main takes a few seconds to readjust it's width. Here's the css

/* Main Layout Styles */
body {
    display: grid;
    /* sidebar takes 1 part, main content fills the rest */
    grid-template-columns: 250px auto;
    grid-template-rows: auto 1fr; /* top navigation auto-sized, rest takes remaining space */
    grid-template-areas:
        "topnav topnav"
        "sidebar main";
    height: 100vh; /* make the grid container fill the viewport height */
    transition: width 0.3s ease-in-out;
}

.top-navigation {
    grid-area: topnav;
}

.sidebar {
    grid-area: sidebar;
    background-color: white;
    font-size: 0.8rem;
    width: 250px;
    transition: width 0.3s ease-in-out;
    overflow: hidden;
    & button {
        font-size: 0.8rem !important;
    }
}

@media (max-width: 768px) {
    body,
    body:not(.sidebar-open) {
        grid-template-columns: 1fr !important;
        grid-template-areas:
            "topnav"
            "main";
    }
    .sidebar {
        display: none;
    }
}

main {
    grid-area: main;
}

body:not(.sidebar-open) {
    grid-template-columns: 0px auto;
}

body:not(.sidebar-open) .sidebar {
    width: 0px;
    border: none !important;
}

/* Main Layout Styles */
body {
    display: grid;
    /* sidebar takes 1 part, main content fills the rest */
    grid-template-columns: 250px auto;
    grid-template-rows: auto 1fr; /* top navigation auto-sized, rest takes remaining space */
    grid-template-areas:
        "topnav topnav"
        "sidebar main";
    height: 100vh; /* make the grid container fill the viewport height */
    transition: width 0.3s ease-in-out;
}

.top-navigation {
    grid-area: topnav;
}

.sidebar {
    grid-area: sidebar;
    background-color: white;
    font-size: 0.8rem;
    width: 250px;
    transition: width 0.3s ease-in-out;
    overflow: hidden;
    & button {
        font-size: 0.8rem !important;
    }
}

@media (max-width: 768px) {
    body,
    body:not(.sidebar-open) {
        grid-template-columns: 1fr !important;
        grid-template-areas:
            "topnav"
            "main";
    }
    .sidebar {
        display: none;
    }
}

main {
    grid-area: main;
}

body:not(.sidebar-open) {
    grid-template-columns: 0px auto;
}

body:not(.sidebar-open) .sidebar {
    width: 0px;
    border: none !important;
}

2 Replies

MarkBoots•10mo ago

you can transition the grid-template-columns like this https://codepen.io/MarkBoots/pen/PoLgdZa

Mark Boots

CodePen

PoLgdZa

...

swimmy jonesOP•10mo ago

This is super clean for the animation. I wound up needing overflow-x: hidden. Now it works like a champ. Thank you!

Gaming

Programming

Grid with Toggleable Sidebar Issue