Merge pull request #11123 from grafana/mobile_menu_polish

changed background for mobile menu background on light theme,

public/sass/_variables.dark.scss

@@ -259,6 +259,7 @@ $navbar-button-border: #2f2f32;
 // Sidemenu
 // -------------------------
 $side-menu-bg: $black;
+$side-menu-bg-mobile: $side-menu-bg;
 $side-menu-item-hover-bg: $dark-2;
 $side-menu-shadow: 0 0 20px black;
 $side-menu-link-color: $link-color;

public/sass/_variables.light.scss

@@ -200,6 +200,7 @@ $input-invalid-border-color: lighten($red, 5%);
 // Sidemenu
 // -------------------------
 $side-menu-bg: $dark-2;
+$side-menu-bg-mobile: rgba(0, 0, 0, 0); //$gray-6;
 $side-menu-item-hover-bg: $gray-1;
 $side-menu-shadow: 5px 0px 10px -5px $gray-1;
 $side-menu-link-color: $gray-6;

public/sass/components/_sidemenu.scss

@@ -71,7 +71,7 @@
         // important to overlap it otherwise it can be hidden
         // again by the mouse getting outside the hover space
         left: $side-menu-width - 2px;
-        @include animation("dropdown-anim 150ms ease-in-out 100ms forwards");
+        @include animation('dropdown-anim 150ms ease-in-out 100ms forwards');
         z-index: $zindex-sidemenu;
       }
     }
@@ -193,9 +193,13 @@ li.sidemenu-org-switcher {
 
 @include media-breakpoint-down(xs) {
   .sidemenu-open--xs {
+    li {
+      font-size: $font-size-lg;
+    }
+
     .sidemenu {
       width: 100%;
-      background: $side-menu-bg;
+      background: $side-menu-bg-mobile;
       position: initial;
       height: auto;
       box-shadow: $side-menu-shadow;
@@ -214,6 +218,9 @@ li.sidemenu-org-switcher {
     .sidemenu__bottom {
       display: block;
     }
+    .sidemenu-item {
+      border-right: 2px solid transparent;
+    }
   }
 
   .sidemenu {