@import "../settings";

.left-navigation {
  height: 100%;
  overflow-y: auto;
  border-right: 1px solid #e0e0e0;
  background-color: #fff;

  .sitename {
    a {
      text-decoration: none;
      color: $color-normal;
      font-size: 25px;
      font-weight: 600;
    }
    border-bottom: 1px solid #e0e0e0;
  }

  nav {
    .menu-group {
      a {
        font-weight: bold;
        text-decoration: none;
        color: $color-normal;
        display: block;
        padding: 10px;

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

      &.active a {
        color: $color-active;
      }

      .menu-item {
        a, span {
          color: $color-normal;
          font-weight: 400;
          text-decoration: none;
          display: block;
          padding: 10px 10px 10px 45px;

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

        &.active a {
          color: $color-active;
        }

        &.disabled span {
          color: $color-disabled;
          cursor: not-allowed;
        }
      }
    }
  }
}
@import "../settings";

.left-navigation {
  height: 100%;
  overflow-y: auto;
  border-right: 1px solid #e0e0e0;
  background-color: #fff;

  .sitename {
    a {
      text-decoration: none;
      color: $color-normal;
      font-size: 25px;
      font-weight: 600;
    }
    border-bottom: 1px solid #e0e0e0;
  }

  nav {
    .menu-group {
      a {
        font-weight: bold;
        text-decoration: none;
        color: $color-normal;
        display: block;
        padding: 10px;
        background-color: rgba(0,0,0,0.0);
        transition: $default-transition-duration;

        &:hover {
          color: $color-hover;
          background-color: rgba(0,0,0,0.05);
        }
      }

      &.active > a {
        color: $color-active;

        &:before {
          content: "> ";
        }
      }

      .menu-item {
        a, span {
          color: $color-normal;
          font-weight: 400;
          text-decoration: none;
          display: block;
          padding: 10px 10px 10px 30px;

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

        &.active a {
          color: $color-active;

          &:before {
            content: "> ";
          }
        }

        &.disabled span {
          color: $color-disabled;
          cursor: not-allowed;
        }
      }
    }
  }
}
Improve the rendering of the navigation
Improve the rendering of the navigation

It was a little difficult to really see which element was hover
and which element was active.

This commit improve this rendering by adding:

* A background when the menu item is hover
* A `>` before the active element
* Decrease the left padding on group items
