weseek__growi/apps/app/src/components/Sidebar/Sidebar.module.scss

@use '@growi/core/scss/bootstrap/init' as bs;

@use '~/styles/mixins';

@use './variables' as var;

.grw-sidebar :global {
  top: 0;
  border-right : 1px solid var(--bs-border-color);

  .grw-sidebar-inner {
    border-top : 1px solid var(--bs-border-color);
  }

  .grw-sidebar-content-header {
    .grw-btn-reload {
      font-size: 18px;
    }
  }

  .sidebar-contents-container {
    backdrop-filter: blur(20px);
  }
}


// Dock Mode
.grw-sidebar {
  &:global {
    &.grw-sidebar-dock {
      position: sticky;
    }
  }
}

// Collapsed Mode
.grw-sidebar {
  &:global {
    &.grw-sidebar-collapsed {
      position: sticky;

      &.open {
        .sidebar-contents-container {
          position: absolute;
          left: var.$grw-sidebar-nav-width;
          min-height: 50vh;
          max-height: calc(100vh - var.$grw-sidebar-nav-width * 2);
        }
      }
    }
  }
}

// Drawer Mode
.grw-sidebar {
  &:global {
    &.grw-sidebar-drawer {
      position: fixed;
      z-index: bs.$zindex-fixed + 2;
      width: 348px;

      // apply transition
      transition-property: transform;
      @include mixins.apply-navigation-transition();

      &:not(.open) {
        transform: translateX(-100%);
      }
      &.open {
        transform: translateX(0);
      }
    }
  }
}


@include bs.color-mode(light) {
  .grw-sidebar :global {
    --bs-border-color: var(--grw-highlight-200);

    .sidebar-contents-container {
      background-color: rgba(var(--grw-highlight-100-rgb), .5);
    }
  }
}

@include bs.color-mode(dark) {
  .grw-sidebar :global {
    --bs-color: var(--bs-gray-400);
    --bs-border-color: var(--grw-highlight-800);

    .sidebar-contents-container {
      background-color: rgba(var(--grw-highlight-800-rgb), .5);
    }
  }
}