.layout {
    display: grid;
    grid-template-columns: var(--sp-sidebar-width) 1fr;
    grid-template-rows: var(--sp-sidebar-width) 1fr;
    gap: 0 0 ;
    grid-auto-flow: row;
    grid-template-areas:
    "sidebar header"
    "sidebar main"
    "sidebar footer";
}

//body[data-sidebar-size="collapsed"] {
//     grid-template-columns: 70px 1fr;
//}
//
//.sidebar {
//    grid-area: sidebar;
//    height: 100vh;
//}
//
//.header {
//    grid-area: header;
//}
//
//.main {
//    grid-area: main;
//}
//
//.footer {
//    grid-area: footer;
//}