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
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;
}
