path: root/client/src/app/menu/menu.component.scss

@import '_variables';
@import '_mixins';

$menu-link-icon-size: 22px;
$menu-link-icon-margin-right: 18px;

@mixin menu-link {
  display: flex;
  align-items: center;
  padding-left: $menu-lateral-padding;
  color: pvar(--menuForegroundColor);
  cursor: pointer;
  font-size: 16px;
  white-space: normal;
  word-break: break-word;
  padding-right: 20px;
  transition: background-color .1s ease-in-out;

  &.active {
    background-color: rgba(255, 255, 255, 0.15);
  }

  &:hover, &.focus-visible {
    background-color: rgba(255, 255, 255, 0.10);
  }

  my-global-icon {
    @include apply-svg-color(#808080);

    display: flex;
    width: $menu-link-icon-size;
    height: $menu-link-icon-size;
    margin-right: $menu-link-icon-margin-right;
  }
}

.menu-wrapper {
  position: fixed;
  height: calc(100vh - #{$header-height});
  padding: 0;
  width: $menu-width;
  z-index: z(menu);
  scrollbar-color: pvar(--actionButtonColor) pvar(--menuBackgroundColor);
}

menu {
  @include ellipsis;

  background-color: pvar(--menuBackgroundColor);
  color: pvar(--menuForegroundColor);

  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;

  &:focus, &:hover {
    overflow-y: auto;
  }

  @media not all and (hover: hover) and (pointer: fine) {
    overflow-y: auto;
  }

  &.is-logged-in {
    .panel-block {
      margin-bottom: 20px;
    }

    .block-title {
      margin-bottom: 15px;
    }
  }
}

.top-menu {
  flex-grow: 1;
  width: $menu-width;
}

.logged-in-block {
  margin-bottom: 20px;
  background-color: rgba(255, 255, 255, 0.15);

  > div:first-child {
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: left;

    .logged-in-more {
      $main-radius: 25px;

      margin-left: 13px;
      border-radius: $main-radius;
      transition: all .1s ease-in-out;
      cursor: pointer;

      *, & {
        line-height: 1;
      }

      &.show {
        background-color: rgba(255, 255, 255, 0.20);
        box-shadow: inset 0 3px 5px rgba(0, 0, 0, .325);
      }

      @mixin display-hints($is-mobile: false) {
        background-color: rgba(255, 255, 255, 0.15);

        @if $is-mobile {
          .dropdown-toggle-indicator {
            display: inherit !important;
          }
          .dropdown-toggle:first-child {
            padding-right: 30px !important;
          }
        }
      }

      &:hover {
        @include display-hints;
      }

      /* smartphones and touchscreens */
      @media (hover: none) and (pointer: coarse) {
        @include display-hints($is-mobile: true);

        /* fill space when on mobile */
        max-width: calc(100% - 80px);
        .dropdown-toggle {
          max-width: 100%;
        }
        .logged-in-info {
          max-width: calc(100% - 45px) !important;
        }

      }

      .dropdown-toggle-indicator {
        position: relative;
        width: 0;
        display: none;

        span {
          position: absolute;
          right: -35px;
          top: -8px;
          color: grey;
          width: $main-radius;
        }
      }

      .dropdown-toggle {
        &::after {
          border: none;
        }
      }

      .dropdown-toggle:first-child {
        display: inline-flex;
        align-items: center;
        padding: 5px 7px;
      }

      img {
        @include avatar(34px);

        margin-right: 10px;
      }

      .logged-in-info {
        max-width: 105px;

        flex-grow: 1;

        .logged-in-display-name,
        .logged-in-username {
          @include ellipsis;
        }

        .logged-in-display-name {
          font-size: 16px;
          font-weight: $font-semibold;
          color: pvar(--menuForegroundColor);

          @include disable-default-a-behaviour;
        }

        .logged-in-username {
          font-size: 13px;
          color: #C6C6C6;
          margin-top: 3px;
        }
      }
    }

    my-notification {
      margin-left: auto;
      margin-right: 15px;
    }
  }

  .logged-in-menu {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    border-top: 1px solid var(--greyForegroundColor);

    a {
      @include menu-link;
      @include disable-default-a-behaviour;

      $icon-size: 13px;
      $additional-margin: ($menu-link-icon-size - $icon-size) / 2;

      font-size: 14px;
      width: 100%;
      min-height: 35px;

      my-global-icon {
        width: $icon-size;
        height: $icon-size;

        // Keep aligned with other icons
        margin-left: $additional-margin;

        &[iconName="channel"] {
          margin-top: -2px;
        }
      }

      &.active,
      &:hover,
      &:focus-visible {
        my-global-icon {
          @include apply-svg-color(var(--menuForegroundColor));
        }
      }

      &.active {
        $border-left-width: 4px;

        font-weight: $font-semibold;
        border-left: $border-left-width solid var(--mainColor);

        my-global-icon {
          margin-left: $additional-margin - $border-left-width;
        }
      }
    }
  }
}

.login-buttons-block {
  margin: 30px 25px 35px 25px;

  .login-button {
    @include peertube-button-link;
    @include orange-button;

    display: block;
    width: 100%;
    margin-bottom: 10px;
  }

  .create-account-button {
    @include peertube-button-link;

    display: block;
    width: 100%;

    color: #fff;
    background-color: rgba(255, 255, 255, 0.25);

    &:hover {
      background-color: rgba(255, 255, 255, 0.28);
    }
  }
}

.in-my-library,
.on-instance,
.footer-block {
  margin-bottom: 15px;

  .block-title {
    text-transform: uppercase;
    font-weight: $font-bold; // Bold
    font-size: 13px;
    margin-bottom: 25px;
    margin-left: 26px;

    @include ellipsis;

    margin-right: 30px;
  }

  a {
    @include menu-link;
    @include disable-default-a-behaviour;

    min-height: 40px;

    my-global-icon {
      &[iconName="playlists"] {
        height: 24px;
        width: 24px;

        margin-right: 16px;
      }

      &[iconName="videos"] {
        position: relative;
        right: -1px;
      }
    }
  }
}

.footer {
  width: $menu-width;
  padding-bottom: 15px;

  .bottom-links {
    display: flex;
    flex-direction: column;
    padding: 0 $menu-lateral-padding;
  }

  $footer-links-base-opacity: .8;

  .footer-links {
    &, > div {
      display: flex;
      flex-wrap: wrap;
    }

    a, span[role=button] {
      display: inline-block;
      text-decoration: none;
      color: pvar(--menuForegroundColor);
      opacity: $footer-links-base-opacity;
      white-space: nowrap;
      font-size: 90%;
      font-weight: 500;
      line-height: 1.4rem;
      margin-right: 8px;

      &.inline-global-icon {
        display: inline-flex;
        align-items: center;
        white-space: nowrap;
        height: 1.4rem;

        my-global-icon {
          @include apply-svg-color(pvar(--menuForegroundColor));

          display: flex;
          width: auto;
          height: 90%;
          margin-right: .2rem;
        }
      }
    }
  }

  .footer-copyleft small a {
    @include disable-default-a-behaviour;

    color: pvar(--menuForegroundColor);
    opacity: $footer-links-base-opacity - .2;
  }
}

.dropdown {
  z-index: #{z('menu') + 1} !important;
}

.dropdown-menu {
  width: calc(100% + 40px);
}

.dropdown-item {
  @include dropdown-with-icon-item;

  cursor: pointer;
  display: flex;
  align-items: center;

  i.glyphicon-menu-right {
    opacity: .4;
  }

  my-global-icon {
    &[iconName="cog"],
    &[iconName="sign-out"] {
      position: relative;
      right: -2px;
      height: 20px;
      width: 20px;
    }
  }

  my-global-icon.not-displayed {
    display: none;
  }

  &:hover {
    my-global-icon.hover-display-toggle.not-displayed {
      display: inherit;
    }
    my-global-icon.hover-display-toggle {
      display: none;
    }

    &.settings-sensitive {
      my-global-icon ::ng-deep svg {
        margin-top: 2px !important;
      }
    }
  }
}

.more-settings {
  text-transform: uppercase;
  font-size: 80%;
  color: #6c757d;
}

@media screen and (max-width: $mobile-view) {
  .menu-wrapper {
    width: 100% !important;

    menu {
      overflow-y: auto;
    }
  }

  .top-menu, .footer {
    width: 100% !important;
  }

  .dropdown-menu {
    width: calc(100vw - 30px);
  }

  .dropdown-item:hover, .dropdown-item:active {
    &.settings-sensitive my-global-icon ::ng-deep svg {
      margin-top: 0px !important;
    }
  }
}