tuliprox/frontend/scss/app/components/_sidebar.scss

@use "../../size" as size;

.tp__app-sidebar.expanded {
  width: var(--sidebar-width-expanded);
  min-width: var(--sidebar-width-expanded);

  .tp__app-sidebar__content {
  }

  .tp__app-header__logo {
     .svg-icon,
     img {
       width: 36px;
       height: 36px;
       object-fit: contain;
     }
  }
}

.tp__app-sidebar.collapsed {
  min-width: var(--sidebar-width-collapsed);
  max-width: var(--sidebar-width-collapsed);
  width: var(--sidebar-width-collapsed);

  .tp__app-sidebar__content {
    padding: var(--padding-mini) var(--padding-micro);
  }

  .tp__app-sidebar__header {
    justify-content: center;
    padding: 0;
  }

  .tp__app-header__logo {
    .svg-icon,
    img {
      min-width: 1.5rem;
      width: 1.5rem;
      height: 1.5rem;
      object-fit: contain;
    }
  }

  .svg-icon {
    min-width: 1.5rem;
    width: 1.5rem;
    height: 1.5rem;
  }

}

.tp__app-sidebar {
  display: flex;
  flex-flow: column;
  gap: var(--gap-default);
  min-height: 0;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  background-color: var(--app-header-background-color);
  box-shadow: 0 0 0 transparent;

  &__scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
    overscroll-behavior: contain;
  }

  .tp__menu-item {
    .icon-Live {
      transform: translateY(-2px);
    }
  }

  .tp__menu-item.active,
  .tp__icon-button.active {
    background-color: var(--menu-item-hover-background-color);
    color: var(--menu-item-hover-color);
  }

  &__content {
    display: flex;
    flex-flow: column;
    gap: var(--gap-default);

    &-space {
       height: var(--gap-default);
    }

    .tp__collapse-panel {
      margin-top: var(--gap-large);
    }
  }

  &__backdrop {
    display: none;
  }
}

@media (max-width: size.$mobile-breakpoint) {
  .tp__app-sidebar__backdrop {
    position: fixed;
    inset: 0;
    display: block;
    border: 0;
    padding: 0;
    background: var(--dialog-backdrop-color);
    z-index: 39;
    cursor: pointer;
  }

  .tp__app-sidebar.mobile {
    transition: width 0.2s ease;
    z-index: 40;

    &.expanded {
      position: fixed;
      inset: 0 auto 0 0;
      min-width: min(18rem, calc(100vw - 3rem));
      max-width: min(18rem, calc(100vw - 3rem));
      width: min(18rem, calc(100vw - 3rem));
      box-shadow: var(--popup-shadow);

      .tp__app-sidebar__content {
        padding: var(--padding-default);
      }
    }

    &.collapsed {
      position: relative;
      min-width: 0;
      max-width: 0;
      width: 0;
      overflow: visible;

      .tp__app-sidebar__content {
        display: none;
      }

      .tp__app-sidebar__scroll {
        display: none;
      }

      .tp__app-sidebar__header {
        position: absolute;
        top: var(--padding-micro);
        left: var(--padding-micro);
        z-index: 20;
        padding: 0;
        background: transparent;
      }
    }

    .tp__app-sidebar__header {
      justify-content: space-between;
      gap: var(--gap-small);
    }

    .tp__app-header__logo {
      .svg-icon,
      img {
        min-width: 1.5rem;
        width: 1.5rem;
        height: 1.5rem;
        object-fit: contain;
      }
    }
  }
}