.g-app {
  display: flex;
  margin: 0;
  height: 100vh;
  --sidebar-width: 240px;
  --topbar-height: 58px;
}
@media (max-width: 768px){
  .g-sidebar {
    width: 0 !important;
  }
  .g-main{
    width: 100% !important;
  }
}

.g-sidebar {
  overflow: hidden auto;
  transition: transform .3s ease-in-out, width .3s ease-in-out;
  background: var(--darker-color);
  width: var(--sidebar-width)
}

.g-main {
  display: flex;
  flex-direction: column;
  width: calc(100% - var(--sidebar-width))
}
.g-topbar{
  overflow: hidden;
  background: var(--main-color);
  height: var(--topbar-height);
}
.g-in-app{
  overflow: auto;
  height: unset !important;
  flex: 1;
}
.g-no-sidebar .g-sidebar{
  display: none;
}
.g-no-sidebar .g-main{
  width: 100% !important;
}
.g-no-topbar .g-topbar{
  display: none;
}