programandoarg/pg_rails

html, body {
  height: 100%;
}

/* Style & Colors */
$text-color: $gray-300;
$text-hover-color: $gray-100;
$chevron-color: 200,200,200,.5;

.with-sidebar > :first-child {
  @extend .bg-primary;
  color: #{$text-color};
  a {
    --#{$prefix}link-color-rgb: #{$text-color};
    --#{$prefix}link-hover-color-rgb: #{$text-hover-color};
  }
}
.dropdown-toggle { outline: 0; }

.btn-toggle {
  --#{$prefix}btn-color: #{$text-color};
  --#{$prefix}btn-hover-color: #{$text-hover-color};
  --#{$prefix}btn-active-color: #{$text-hover-color};
  padding: .25rem .5rem;
  font-weight: 600;
  // color: rgba(0, 0, 0, .65);
  background-color: transparent;
}
.btn-toggle:hover,
.btn-toggle:focus {
  // color: rgba(0, 0, 0, .85);
  // background-color: #d2f4ea;
}

.btn-toggle[aria-expanded="true"] {
  // color: rgba(0, 0, 0, .85);
}

.btn-toggle-nav a {
  padding: .1875rem .5rem;
  margin-top: .125rem;
  margin-left: 1.25rem;
}
.btn-toggle-nav a:hover,
.btn-toggle-nav a:focus {
  // background-color: #d2f4ea;
}

#sidebar li a.active {
  font-weight: bold;
  --bs-link-color-rgb: white!important;
}
// Los small-items están deprecados
#sidebar {
  &.opened {
    .sidebar--small-items {
      display: none;
    }
    .sidebar--large-items {
      display: block;
    }
  }
  &:not(.opened) {
    .sidebar--small-items {
      display: block;
    }
    .sidebar--large-items {
      // display: none;
    }
  }
}
.offcanvas {
  --bs-offcanvas-width: 250px;
}
/* Layout */
.with-sidebar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s1);
  height: 100%;
}

.with-sidebar > :first-child {
  // display: none!important;
  flex-basis: 0px;
  transition: flex-basis 0.5s;

  // Para que al cerrar y abrir no se vean los textos por fuera de la sidebar
  clip-path: inset(0 0 0 0);
  // flex-grow: 1;

  &.opened {
    // display: block!important;
    flex-basis: 10em;
  }
  & > * {
    width: 9em;
    position:fixed;
  }
}

.with-sidebar > :last-child {
  flex-basis: 0;
  flex-grow: 999;
  min-inline-size: 50%;
}

.btn-toggle::before {
  width: 1.25em;
  line-height: 0;
  content: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='rgba%28#{$chevron-color}%29' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5 14l6-6-6-6'/%3e%3c/svg%3e");
  transition: transform .35s ease;
  transform-origin: .5em 50%;
}
.btn-toggle[aria-expanded="true"]::before {
  transform: rotate(90deg);
}