wikijs/client/scss/components/sidebar.scss

.sidebar {
	background-color: mc('blue-grey', '900');
	color: mc('blue-grey', '50');
	width: 250px;
	max-width: 250px;
	min-height: calc(100vh - 120px);
  transition: background-color 1s ease;

	aside {
    padding: 1px 0 15px 0;

		&:last-child {
			padding-bottom: 20px;
		}

		.sidebar-label {
			padding: 8px;
			color: mc('blue-grey', '300');
			font-size: 13px;
			letter-spacing: 1px;
			text-transform: uppercase;
			background-color: mc('blue-grey', '800');
			margin: 0 0 15px 0;
      text-align: center;
      box-shadow: 0 0 5px rgba(0,0,0,0.3);
      transition: background-color 1s ease;

			i {
				margin-right: 5px;
			}

		}

		.sidebar-menu {

			li {
				display: block;

				a {
					display: flex;
					min-height: 30px;
					align-items: center;
					padding: 5px 20px;
					color: mc('blue-grey', '50');
					font-size: 14px;
					transition: all .4s ease;
					line-height: 14px;
          cursor: pointer;

          &.is-multiline {
            flex-wrap: wrap;
          }

          &.is-active {
            border-left: 5px solid mc('blue', '500');
            color: mc('blue', '300');
            padding-left: 15px;

            .is-small {
              color: mc('blue', '500');
            }

          }

					i {
						margin-right: 7px;
						color: mc('blue-grey', '300');
					}

					&:hover {
						color: mc('blue-grey', '400');
						text-decoration: none;
					}

          .is-small {
            flex: 1 0 100%;
            display: block;
            font-size: 11px;
            color: rgba(255,255,255,.5)
          }

				}

				> ul {
					border-top: 1px solid lighten(mc('blue-grey', '900'), 3%);
					border-bottom: 1px solid lighten(mc('blue-grey', '900'), 2%);
					background-color: darken(mc('blue-grey', '900'), 2%);
					margin-bottom: 10px;
					padding: 10px 0;

					li {
						padding-left: 10px;
						//border-left: 5px solid mc('blue-grey', '800');

						a {
							min-height: 24px;
							color: mc('blue-grey', '100');
						}

					}

				}

			}

		}

	}

  &.is-collapsed {
    width: 50px;

    aside {
      .sidebar-menu li a {
        padding: 10px 0;
        justify-content: center;

        i {
          margin: 0;
          font-size: 20px;
          transition: color .6s ease;
        }

        span {
          display: none;
        }

        &:hover {
          i {
            color: #FFF;
          }
        }
      }

    }

  }

}

/* THEME OVERRIDE - START */

@each $color, $colorvalue in $material-colors {
  .is-alternate-#{$color} .sidebar {
    background-color: mc($color, '900');
	  color: mc($color, '50');

    aside {
      .sidebar-label {
        color: mc($color, '300');
        background-color: mc($color, '800');
      }
      .sidebar-menu {
        li {
          a {
            color: mc($color, '50');

            &.is-active {
              border-left-color: mc($color, '500');
              color: mc($color, '300');

              .is-small {
                color: mc($color, '500');
              }
            }

            &:hover {
              color: mc($color, '400');
            }

            i {
              color: mc($color, '300');
            }
          }
          > ul {
            border-top-color: lighten(mc($color, '900'), 3%);
            border-bottom-color: lighten(mc($color, '900'), 2%);
            background-color: darken(mc($color, '900'), 2%);

            li a {
              color: mc($color, '100');
            }
          }
        }
      }
    }
  }
}

/* THEME OVERRIDE - END */