Merge branch 'open-api-clients' into develop

[github/Chocobozzz/PeerTube.git] / client / src / app / menu / menu.component.scss

diff --git a/client/src/app/menu/menu.component.scss b/client/src/app/menu/menu.component.scss
index 9241e8059a0e03a1da0b5b4f50e585bc099d5ac9..cb5f907232f04ccb1155574d3f4395fc8ee647e5 100644 (file)
--- a/client/src/app/menu/menu.component.scss
+++ b/client/src/app/menu/menu.component.scss
@@ -6,7 +6,8 @@
   height: calc(100vh - #{$header-height});
   padding: 0;
   width: $menu-width;
-  z-index: 10000;
+  z-index: z(menu);
+  scrollbar-color: var(--actionButtonColor) var(--menuBackgroundColor);
 }
 
 menu {
@@ -16,7 +17,7 @@ menu {
   margin: 0;
   padding: 0;
   height: 100%;
-  overflow: auto;
+  overflow-x: hidden;
   color: var(--menuForegroundColor);
   display: flex;
   flex-direction: column;
@@ -69,28 +70,29 @@ menu {
         font-size: 13px;
         color: #C6C6C6;
         max-width: 140px;
+        cursor: pointer;
       }
     }
 
     .logged-in-more {
       margin-right: 20px;
 
-      my-global-icon {
-        @include apply-svg-color(var(--mainBackgroundColor));
-
+      my-global-icon.dropdown-toggle {
         cursor: pointer;
 
         &::after {
           border: none;
         }
+
+        ::ng-deep {
+          @include apply-svg-color(var(--menuForegroundColor));
+        }
       }
 
       .dropdown-item {
         @include dropdown-with-icon-item;
 
         my-global-icon {
-          @include apply-svg-color(var(--mainForegroundColor));
-
           width: 22px;
           height: 22px;
 
@@ -144,15 +146,19 @@ menu {
     margin-bottom: 45px;
 
     a {
+      @include disable-default-a-behaviour;
+
       display: flex;
       align-items: center;
       padding-left: $menu-lateral-padding;
       color: var(--menuForegroundColor);
       cursor: pointer;
-      height: 40px;
+      min-height: 40px;
       font-size: 16px;
       transition: background-color .1s ease-in-out;
-      @include disable-default-a-behaviour;
+      white-space: normal;
+      word-break: break-word;
+      padding-right: 20px;
 
       &.active {
         background-color: rgba(255, 255, 255, 0.15);
@@ -225,7 +231,6 @@ menu {
           height: 24px;
 
           background-image: url('../../assets/images/menu/keyboard.png');
-          background-color: #fff;
           filter: invert(100%);
         }