[Summary view] [Print] [Text view]

   1  // Sidebar
   2  
   3  .sidebar-wrapper {
   4    z-index: $zindex-sidebar;
   5    min-height: calc(100vh - 66px);
   6    overflow: hidden;
   7    background-color: var(--template-sidebar-bg);
   8    box-shadow: 0 0 20px -10px var(--template-bg-dark-50);
   9  
  10    .sidebar-sticky {
  11      position: sticky;
  12      top: 0;
  13    }
  14  
  15    .item {
  16      position: relative;
  17      display: flex;
  18      flex-wrap: wrap;
  19      list-style-type: none;
  20  
  21      a,
  22      .menu-dashboard,
  23      .menu-quicktask {
  24        color: $white;
  25        text-decoration: none;
  26  
  27        &:hover {
  28          color: var(--template-text-light);
  29          text-decoration: none;
  30          background-color: var(--template-bg-dark-65);
  31        }
  32      }
  33  
  34      > a {
  35        position: relative;
  36        display: flex;
  37        flex-grow: 1;
  38        align-items: center;
  39        min-height: 40px;
  40  
  41        [class^="#{$jicon-css-prefix}-"],
  42        [class*=" #{$jicon-css-prefix}-"],
  43        [class^="#{$fa-css-prefix}-"],
  44        [class*=" #{$fa-css-prefix}-"] {
  45          margin: 0 .85rem;
  46          transform: scale(1.2);
  47        }
  48      }
  49  
  50      &-level-2 > a {
  51        padding-inline-start: 3rem;
  52      }
  53  
  54      &-level-3 > a {
  55        padding-inline-start: 3.75rem;
  56      }
  57    }
  58  
  59    @include media-breakpoint-up(sm) {
  60      flex: 1 0 $sidebar-width;
  61      max-width: $sidebar-width;
  62      transition: all .3s ease-in-out;
  63    }
  64  
  65    @include media-breakpoint-down(sm) {
  66      &.sidebar-menu {
  67        top: auto;
  68      }
  69    }
  70  
  71    .sidebar-toggle {
  72      background: var(--template-bg-dark-60);
  73  
  74      a {
  75        color: $white;
  76      }
  77  
  78      .sidebar-item-title {
  79        white-space: nowrap;
  80      }
  81    }
  82  }
  83  
  84  // Sidebar navigation
  85  .main-nav {
  86    width: $sidebar-width;
  87    padding: 0;
  88    font-size: .95rem;
  89  
  90    @include media-breakpoint-down(sm) {
  91      width: 100%;
  92    }
  93  
  94    // All list items
  95    li {
  96  
  97      .menu-dashboard,
  98      .menu-quicktask {
  99        > a {
 100          display: inline-flex;
 101          align-items: center;
 102          justify-content: center;
 103          width: 40px;
 104          height: 100%;
 105        }
 106      }
 107    }
 108  
 109    // 2nd level items
 110    ul {
 111      width: 100%;
 112      padding: 0;
 113      background-color: var(--template-bg-dark-75);
 114    }
 115  
 116    .divider {
 117      height: 1px;
 118      margin: 0 0 0 48px;
 119      list-style: none;
 120      background-color: var(--template-bg-dark-60);
 121    }
 122  
 123    .menuitem-group {
 124      margin-top: .65rem;
 125      font-size: .75rem;
 126      padding-inline-start: 3rem;
 127  
 128      .sidebar-item-title {
 129        color: var(--template-bg-dark-30);
 130      }
 131    }
 132  
 133    // Dropdown indicator
 134    .has-arrow {
 135      .sidebar-item-title {
 136        margin-inline-end: auto;
 137      }
 138  
 139      &::after {
 140        display: flex;
 141        align-items: center;
 142        justify-content: center;
 143        width: 2rem;
 144        font-family: "Font Awesome 5 Free";
 145        font-weight: 900;
 146  
 147        [dir="ltr"] & {
 148          content: "\f054";
 149        }
 150  
 151        [dir="rtl"] & {
 152          content: "\f053";
 153        }
 154      }
 155    }
 156  
 157    a.mm-active {
 158      background-color: var(--template-bg-dark-70);
 159    }
 160  
 161    a.mm-active + .menu-quicktask {
 162      background-color: var(--template-bg-dark-60);
 163    }
 164  
 165    .mm-active > .has-arrow::after {
 166      content: "\f078";
 167    }
 168  
 169    .mm-collapse {
 170      display: none;
 171  
 172      &.mm-collapsed,
 173      &.mm-show {
 174        display: block;
 175      }
 176    }
 177  
 178    .mm-collapsing {
 179      position: relative;
 180      height: 0;
 181      overflow: hidden;
 182      transition: all .35s ease;
 183    }
 184  
 185    .badge {
 186      align-self: center;
 187      margin: 0 .3rem .25rem;
 188      background-color: var(--template-bg-dark-60);
 189    }
 190  }
 191  
 192  // Sidebar Closed
 193  .closed {
 194    .sidebar-wrapper {
 195      flex: 1 0 $sidebar-width-closed;
 196      max-width: $sidebar-width-closed;
 197      overflow: visible;
 198    }
 199  
 200    .sidebar-item-title,
 201    .has-arrow::after,
 202    .menu-dashboard {
 203      display: none;
 204    }
 205  
 206    .main-nav,
 207    .main-nav li {
 208      max-width: 3rem;
 209    }
 210  
 211    .main-nav a:hover {
 212      position: relative;
 213      max-width: 3rem;
 214    }
 215  
 216    .main-nav a:hover .sidebar-item-title {
 217      position: absolute;
 218      inset-inline-start: 100%;
 219      display: flex;
 220      align-items: center;
 221      height: 100%;
 222      padding: 0 1rem;
 223      white-space: nowrap;
 224      pointer-events: none;
 225      background-color: var(--template-bg-dark-60);
 226      border-end-start-radius: 0;
 227      border-end-end-radius: $border-radius;
 228      border-start-end-radius: $border-radius;
 229      border-start-start-radius: 0;
 230    }
 231  
 232    .main-nav > li > ul {
 233      height: 0;
 234      padding: 0;
 235      visibility: hidden;
 236    }
 237  }
 238  
 239  @include media-breakpoint-up(sm) {
 240    .toggler-burger {
 241      display: none;
 242    }
 243  }
 244  
 245  // Mobile
 246  @include media-breakpoint-down(sm) {
 247    #menu-collapse {
 248      display: none;
 249      background: var(--template-bg-dark-50);
 250    }
 251  
 252    .toggler-burger {
 253      position: fixed;
 254      right: 0;
 255      bottom: 0;
 256      z-index: $zindex-mobile-toggle;
 257      padding: 10px 15px;
 258  
 259      [dir="rtl"] & {
 260        right: auto;
 261        left: 0;
 262      }
 263  
 264      &:focus {
 265        box-shadow: none;
 266      }
 267  
 268      .navbar-toggler-icon::before {
 269        display: inline-block;
 270        font: normal normal 900 28px/1 "Font Awesome 5 Free";
 271        color: var(--toggle-color);
 272        content: "\f00d";
 273      }
 274  
 275      &.collapsed {
 276        .navbar-toggler-icon::before {
 277          content: "\f0c9";
 278        }
 279      }
 280    }
 281  
 282    .sidebar-menu {
 283      display: none;
 284  
 285      &.show,
 286      &.collapsing {
 287        position: fixed;
 288        bottom: 55px;
 289        z-index: $zindex-mobile-menu;
 290        display: block;
 291        width: 100%;
 292        min-height: auto;
 293        max-height: calc(100vh - 72px);
 294        overflow-y: auto;
 295      }
 296    }
 297  }