@c8y/style/styles/layout/_c8y-top-drawer.less

Styles for Cumulocity IoT applications

/**
 * Top Drawer - Collapsible top navigation panel
 *
 * Note: Uses design tokens for spacing (@size-*), colors, and layout vars.
 *
 * Intentionally hardcoded values:
 * - Layout calc expressions (76px, 72px, 56px, etc.): Header height combinations
 * - Specific widths (170px, 273px, 272px): Drawer panel widths
 * - Heights (380px, 445px, 220px): Drawer content dimensions
 * - 6px, 12px: Off-grid positioning adjustments
 * - 10000px, 2000px: Large clip values for overflow management
 * - Transition duration (0.35s): Animation timing
 * - Z-index calculations: Stacking order
 * - 1px borders: Standard border widths
 * - 100vw/100vh: Full viewport dimensions
 */

.c8y-top-drawer, .c8y-global-context {
  position: sticky;
  z-index: (@zindex-action-bar - 2);
  margin: 0 calc(@size-base * -1);
  transform: translateY(calc(@size-24 * -1));
  max-width: 100vw;
  background-color: @component-background-default;
  color: @component-color-default;
  top: @headerHeight;
  box-shadow: var(--c8y-elevation-md-bottom), inset 0 0 0 1px @component-border-color;
  --c8y-nav-tabs-background-default: var(--c8y-level-1);
  --c8y-nav-tabs-background-active: var(--c8y-level-0);

  @media (max-width: @screen-xs-max) {
    .head-open & {
      top: calc(@headerHeight + 76);
    }
    .has-tabs & {
      top: calc(@headerHeight + 6px);
      transition: top 0.35s ease;
    }
    .has-tabs .head-open & {
      top: calc(@headerHeight * 2 + calc(@size-base * 1.5));
    }
  }
  @media (min-width: @screen-sm-min) {
    margin: 0 calc(@size-base * -1);
    top: calc(@headerHeight + 72px);
    clip: rect(0, 10000px, 2000px, 0);
    .horizontal-tabs.has-tabs & {
      top: calc(@headerHeight * 2 + 72px);
    }
  }
  @media (min-width: @grid-float-breakpoint) {
    transition: left @open-menu-time-type;
    .horizontal-tabs.has-tabs & {
      top: calc(@headerHeight * 2 + 56px);
    }
  }
  :fullscreen:not(:root) & {
    top: 0;
    margin: 0;
    transform: translateY(calc(@size-32 * -1));
  }
  .component-tabs.nav-tabs {
    padding-top: 0;
  }
  &--tabs {
    position: relative;
    padding-right: 0;
    background-color: var(--c8y-level-1);
    &::before {
      display: none;
    }
  }
  &--footer {
    padding: @size-24;
    padding-left: var(--c8y-nav-tabs-vertical-width);
    background-color: var(--c8y-level-1);
  }
  &__tabs-container {
    border-bottom: 1px solid @component-border-color;
    max-height: calc(100vh - 380px);
    height: 445px;
    min-height: 220px;
  }
}

.c8y-global-context {
  position: fixed;
  z-index: (@zindex-action-bar - 2);
  width: calc(100% - @size-32);
  clip: rect(0, 10000px, 2000px, calc(@size-16 * -1));
  --c8y-nav-tabs-vertical-width: 170px;
  transition: width @open-menu-time-type;
  .page-tabs-vertical .nav-tabs > div > a {
    align-items: flex-start;
  }
  .c8y-top-drawer--footer {
    --c8y-nav-tabs-vertical-width: @{size-24};
  }
}

@media (min-width: @grid-float-breakpoint) {
  .c8y-global-context {
    --c8y-nav-tabs-vertical-width: 273px;
    .c8y-top-drawer--footer {
      --c8y-nav-tabs-vertical-width: 273px;
    }
  }
}
body:has(.mcontainer.open) {
  @media (min-width: @grid-float-breakpoint) {
    .c8y-global-context {
      width: calc(100% - 272px);
    }
  }
}