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

// stylelint-disable no-descending-specificity -- false positives from :global() function form conversion; each .grw-sidebar block targets different mode classes
@use '@growi/core-styles/scss/bootstrap/init' as bs;
@use 'styles/variables' as var;
@use 'styles/mixins';

.grw-sidebar {
  top: 0;
}


// TODO: commonize reload button style
.grw-sidebar {
  :global(.grw-sidebar-content-header) {
    :global(.grw-btn-reload) {
      font-size: 16px;
    }
  }
}

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

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

    :global(.sidebar-contents-container) {
      border-color: var(--bs-border-color);
      border-style: solid;
      border-width : 1px 1px 1px 0;
    }

    // open
    :global(.sidebar-contents-container.open) {
      position: absolute;
      left: var.$grw-sidebar-nav-width;
      min-height: 50vh;
      max-height: calc(100vh - var.$grw-sidebar-nav-width * 2);
      border-radius: 0 4px 4px 0 ;
      :global(.simple-scrollbar) {
        max-height: inherit;
      }
    }
  }
}

// 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(:global(.open)) {
      transform: translateX(-100%);
    }
    &:global(.open) {
      z-index: bs.$zindex-modal;
      transform: translateX(0);
    }
  }
}


.grw-sidebar {

  // overwrite simplebar-react css
  :global(.simplebar-scrollbar::before) {
    background-color:var(--bs-gray-500);
  }

}

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

    :global(.sidebar-contents-container) {
      background-color: color-mix(in srgb, var(--grw-highlight-100), var(--bs-body-bg));
    }
  }

  // frosted glass effect in collapsed mode
  .grw-sidebar {
    &:global(.grw-sidebar-collapsed) {
      :global(.sidebar-contents-container) {
        background-color: rgba(var(--grw-highlight-100-rgb), .8);
        backdrop-filter: blur(20px);
      }
    }
  }
}

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

    :global(.sidebar-contents-container) {
      background-color: color-mix(in srgb, var(--grw-highlight-800), var(--bs-body-bg));
    }
  }

  // frosted glass effect in collapsed mode
  .grw-sidebar {
    &:global(.grw-sidebar-collapsed) {
      :global(.sidebar-contents-container) {
        background-color: rgba(var(--grw-highlight-800-rgb), .8);
        backdrop-filter: blur(20px);
      }
    }
  }
}