ilscipio/scipio-erp

:root{
  --sidebar-width : #{$sidebar-width};
}

.scp-container {
  display: grid;
  grid-template-columns: var(--sidebar-width) 1fr;
  grid-template-rows: auto;
  gap: 0px 0px;
  grid-template-areas: "sidebar content";
  transition: 0.3s ease-in grid-template-columns;


  .menu-list{
    overflow:hidden;

    li:not(.nav-title){
      opacity:1;
      transition: 0.3s linear all;
    }

  }

  .scp-content {max-width: calc(100vw - var(--sidebar-width) - #{$main-container-padding});}

  &.is-active {
    --sidebar-width : #{$sidebar-width-closed};

    grid-template-columns: var(--sidebar-width) 1fr;

    .menu-list{
      &:not(.is-hovered){
        border-right:none !important;
      }

      li:not(.nav-title){
        opacity:0;
      }
    }

    .scp-content {max-width: calc(100vw - var(--sidebar-width) - #{$main-container-padding});}

    .sidebar-toggle i{
      transform: rotate(180deg);
    }
  }

}

body{
  &.page-noauth {
    .scp-container {
      grid-template-areas: "content";
      grid-template-columns: 1fr;
    }
  }
}

@include touch {
  .scp-container{
    grid-template-areas: "content";
    transition: 0.3s linear all;
    grid-template-columns: 1fr;

    .sidebar-toggle {
      display:none;
    }

    &.is-active {
      grid-template-areas: "sidebar";
      grid-template-columns: 1fr;

      .scp-sidebar {display:flex !important;}

      .menu-list{
        width:100vw;
        li:not(.nav-title){
          opacity:1;
        }
      }

    }


    .scp-content {max-width: calc(100vw - #{$main-container-padding})}
  }
}

.scp-sidebar {
  grid-area: sidebar;
  background: $sidebar-background;
  position:relative;
}
.scp-content {
  grid-area: content;
  transition: 0.3s ease-in all;
  padding: $main-container-padding;
}