pinakes/crates/pinakes-ui/assets/styles/_layout.scss

@use 'variables' as *;
@use 'mixins' as *;

// App layout

.app {
  @include flex(row, flex-start, stretch);
  height: 100vh;
  overflow: hidden;
}

// Sidebar

.sidebar {
  width: $sidebar-width;
  min-width: $sidebar-width;
  max-width: $sidebar-width;
  background: $bg-1;
  border-right: 1px solid $border;
  @include flex(column);
  flex-shrink: 0;
  user-select: none;
  overflow-y: auto;
  overflow-x: hidden;
  z-index: $z-dropdown;
  transition: width $transition-slow, min-width $transition-slow,
    max-width $transition-slow;

  &.collapsed {
    width: $sidebar-collapsed-width;
    min-width: $sidebar-collapsed-width;
    max-width: $sidebar-collapsed-width;

    .nav-label,
    .sidebar-header .logo,
    .sidebar-header .version,
    .nav-badge,
    .nav-item-text,
    .sidebar-footer .status-text,
    .user-name,
    .role-badge,
    .user-info .btn,
    .sidebar-import-header span,
    .sidebar-import-file {
      display: none;
    }

    .nav-item {
      justify-content: center;
      padding: $space-4;
      border-left: none;
      border-radius: $radius-sm;

      &.active {
        border-left: none;
      }
    }

    .nav-icon {
      width: auto;
      margin: 0;
    }

    .sidebar-header {
      padding: 12px $space-4;
      justify-content: center;
    }

    .nav-section {
      padding: 0 $space-2;
    }

    .sidebar-footer {
      padding: $space-4;

      .user-info {
        justify-content: center;
        padding: $space-2;
      }
    }

    .sidebar-import-progress {
      padding: 6px;
    }
  }
}

.sidebar-header {
  padding: $space-8 $space-8 20px;
  @include flex(row, flex-start, baseline, $space-4);

  .logo {
    font-size: $font-size-2xl;
    font-weight: $font-weight-bold;
    letter-spacing: $letter-spacing-tight;
    color: $text-0;
  }

  .version {
    font-size: $font-size-sm;
    color: $text-2;
  }
}

.sidebar-toggle {
  @include button-ghost;
  color: $text-2;
  padding: $space-4;
  font-size: $font-size-4xl;
  width: 100%;
  text-align: center;

  &:hover {
    color: $text-0;
  }
}

.sidebar-spacer {
  flex: 1;
}

.sidebar-footer {
  padding: $space-6;
  border-top: 1px solid $border-subtle;
  overflow: visible;
  min-width: 0;
}

// Navigation

.nav-section {
  padding: 0 $space-4;
  margin-bottom: $space-1;
}

.nav-label {
  padding: $space-4 $space-4 $space-2;
  font-size: $font-size-sm;
  font-weight: $font-weight-semibold;
  @include text-uppercase;
  color: $text-2;
}

.nav-item {
  @include flex(row, flex-start, center, $space-4);
  padding: 6px $space-4;
  border-radius: $radius-sm;
  cursor: pointer;
  color: $text-1;
  font-size: $font-size-lg;
  font-weight: 450;
  transition: color $transition-base, background $transition-base;
  border: none;
  background: none;
  width: 100%;
  text-align: left;
  border-left: 2px solid transparent;
  margin-left: 0;

  &:hover {
    color: $text-0;
    background: $overlay-light;
  }

  &.active {
    color: $accent-text;
    border-left-color: $accent;
    background: $accent-dim;
  }
}

.nav-item-text {
  flex: 1;
  @include text-truncate;
  min-width: 0;
}

.sidebar:not(.collapsed) .nav-item-text {
  overflow: visible;
}

.nav-icon {
  width: 18px;
  text-align: center;
  font-size: 14px;
  opacity: 0.7;
}

.nav-badge {
  margin-left: auto;
  font-size: $font-size-sm;
  font-weight: $font-weight-semibold;
  color: $text-2;
  background: $bg-3;
  padding: 1px $space-3;
  border-radius: $radius-xl;
  min-width: 20px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

// Status indicator

.status-indicator {
  @include flex(row, center, center, 6px);
  font-size: $font-size-base;
  font-weight: $font-weight-medium;
  min-width: 0;
  overflow: visible;
}

.sidebar:not(.collapsed) .status-indicator {
  justify-content: flex-start;
}

.status-dot {
  @include status-dot;

  &.connected {
    background: $success;
  }

  &.disconnected {
    background: $error;
  }

  &.checking {
    background: $warning;
    @include pulse;
  }
}

.status-text {
  color: $text-2;
  @include text-truncate;
  min-width: 0;
}

.sidebar:not(.collapsed) .status-text {
  overflow: visible;
}

// Main content

.main {
  flex: 1;
  @include flex(column);
  overflow: hidden;
  min-width: 0;
}

.header {
  height: $header-height;
  min-height: $header-height;
  border-bottom: 1px solid $border-subtle;
  @include flex(row, flex-start, center, 12px);
  padding: 0 20px;
  background: $bg-1;
}

.page-title {
  font-size: $font-size-xl;
  font-weight: $font-weight-semibold;
  color: $text-0;
}

.header-spacer {
  flex: 1;
}

.content {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
  scrollbar-width: thin;
  scrollbar-color: $overlay-strong transparent;
}

// Import progress

.sidebar-import-progress {
  padding: $space-5 $space-6;
  background: $bg-2;
  border-top: 1px solid $border-subtle;
  font-size: $font-size-base;
}

.sidebar-import-header {
  @include flex(row, flex-start, center, 6px);
  margin-bottom: $space-2;
  color: $text-1;
}

.sidebar-import-file {
  color: $text-2;
  font-size: $font-size-sm;
  @include text-truncate;
  margin-bottom: $space-2;
}

.sidebar-import-progress .progress-bar {
  height: 3px;
}

// User info

.user-info {
  @include flex(row, flex-start, center, 6px);
  font-size: $font-size-md;
  overflow: hidden;
  min-width: 0;
}

.user-name {
  font-weight: $font-weight-medium;
  color: $text-0;
  @include text-truncate;
  max-width: 90px;
  flex-shrink: 1;
}

.role-badge {
  display: inline-block;
  padding: 1px $space-3;
  border-radius: $radius-sm;
  font-size: $font-size-sm;
  font-weight: $font-weight-semibold;
  text-transform: uppercase;

  &.role-admin {
    background: $role-admin-bg;
    color: $role-admin-text;
  }

  &.role-editor {
    background: $role-editor-bg;
    color: $role-editor-text;
  }

  &.role-viewer {
    background: $role-viewer-bg;
    color: $role-viewer-text;
  }
}