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

@use 'sass:math';
@use '_variables' as *;
@use '_mixins' as *;

$menu-link-icon-size: 22px;
$menu-link-icon-margin-right: 18px;
$footer-links-base-opacity: .8;

.menu-link {
  @include disable-default-a-behaviour;
  @include padding-left($menu-lateral-padding);
  @include padding-right(20px);

  display: flex;
  align-items: center;

  color: pvar(--menuForegroundColor);
  cursor: pointer;
  font-size: 16px;
  white-space: normal;
  word-break: break-word;
  transition: background-color .1s ease-in-out;
  line-height: $line-height-normal;

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

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

  my-global-icon {
    @include apply-svg-color(#808080);
    @include margin-right($menu-link-icon-margin-right);

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

.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;
  }
}

my-notification {
  @include margin-left(auto);
  @include margin-right(15px);
}

.logged-in-more {
  @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 {
        max-width: 88% !important;
      }
    }
  }

  $main-radius: 25px;

  @include margin-left(13px);

  flex: 1;
  border-radius: $main-radius;
  transition: all .1s ease-in-out;
  cursor: pointer;
  line-height: 1;

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

  &: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: #808080;
      width: $main-radius;
    }
  }

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

  .dropdown-toggle:first-child {
    display: flex;
    align-items: center;
    padding: 5px 7px;
    border-radius: $main-radius;
  }
}

my-actor-avatar {
  @include 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 {
  @include disable-default-a-behaviour;

  font-size: 16px;
  font-weight: $font-semibold;
  color: pvar(--menuForegroundColor);
}

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

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

  a {
    $icon-size: 13px;
    $additional-margin: math.div($menu-link-icon-size - $icon-size, 2);

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

    my-global-icon {
      // Keep aligned with other icons
      @include margin-left($additional-margin);

      width: $icon-size;
      height: $icon-size;
    }

    &.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 {
        @include margin-left($additional-margin - $border-left-width);
      }
    }
  }
}

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

  > a {
    display: block;
    width: 100%;

    &:not(:last-child) {
      margin-bottom: 10px;
    }
  }
}

.create-account-button {
  color: #fff;
  background-color: rgba(255, 255, 255, 0.25);

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

.menu-block,
.footer-block {
  margin-bottom: 15px;

  .block-title {
    @include ellipsis;
    @include margin-left(26px);
    @include margin-right(30px);

    text-transform: uppercase;
    font-weight: $font-bold; // Bold
    font-size: 13px;
    margin-bottom: 25px;
  }

  a {
    min-height: 40px;
  }
}

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

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

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

  a,
  span[role=button] {
    @include margin-right(8px);

    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;
  }
}

.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;
  }

  &:hover {
    .hover-display-toggle {
      display: none;
    }

    .hover-display-toggle[hidden] {
      display: inherit !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: 0 !important;
    }
  }
}

my-global-icon {
  &[iconName=playlists] {
    @include margin-right(16px);

    height: 24px;
    width: 24px;
  }

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

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

  &[iconName='sign-out'] {
    position: relative;
    right: -2px;
    height: 20px;
    width: 20px;
  }
}