chore: Move sidemenu out of context service and use the logic we have in the…

chore: Move sidemenu out of context service and use the logic we have in the router already for hiding the sidemenu

public/app/core/services/context_srv.ts

@@ -28,7 +28,6 @@ export class ContextSrv {
   isSignedIn: any;
   isGrafanaAdmin: any;
   isEditor: any;
-  sidemenu = true;
   sidemenuSmallBreakpoint = false;
   hasEditPermissionInFolders: boolean;
 

public/app/routes/GrafanaCtrl.ts

@@ -75,27 +75,22 @@ export class GrafanaCtrl {
   }
 }
 
-function setViewModeBodyClass(body: JQuery, mode: KioskUrlValue, sidemenuOpen: boolean) {
+function setViewModeBodyClass(body: JQuery, mode: KioskUrlValue) {
   body.removeClass('view-mode--tv');
   body.removeClass('view-mode--kiosk');
   body.removeClass('view-mode--inactive');
 
   switch (mode) {
     case 'tv': {
-      body.removeClass('sidemenu-open');
       body.addClass('view-mode--tv');
       break;
     }
     // 1 & true for legacy states
     case '1':
     case true: {
-      body.removeClass('sidemenu-open');
       body.addClass('view-mode--kiosk');
       break;
     }
-    default: {
-      body.toggleClass('sidemenu-open', sidemenuOpen);
-    }
   }
 }
 
@@ -105,7 +100,6 @@ export function grafanaAppDirective(playlistSrv, contextSrv, $timeout, $rootScop
     restrict: 'E',
     controller: GrafanaCtrl,
     link: (scope, elem) => {
-      let sidemenuOpen;
       const body = $('body');
 
       // see https://github.com/zenorocha/clipboard.js/issues/155
@@ -113,9 +107,6 @@ export function grafanaAppDirective(playlistSrv, contextSrv, $timeout, $rootScop
 
       $('.preloader').remove();
 
-      sidemenuOpen = scope.contextSrv.sidemenu;
-      body.toggleClass('sidemenu-open', sidemenuOpen);
-
       appEvents.on('toggle-sidemenu-mobile', () => {
         body.toggleClass('sidemenu-open--xs');
       });
@@ -158,7 +149,7 @@ export function grafanaAppDirective(playlistSrv, contextSrv, $timeout, $rootScop
         $('#tooltip, .tooltip').remove();
 
         // check for kiosk url param
-        setViewModeBodyClass(body, data.params.kiosk, sidemenuOpen);
+        setViewModeBodyClass(body, data.params.kiosk);
 
         // close all drops
         for (const drop of Drop.drops) {
@@ -193,7 +184,7 @@ export function grafanaAppDirective(playlistSrv, contextSrv, $timeout, $rootScop
         }
 
         $timeout(() => $location.search(search));
-        setViewModeBodyClass(body, search.kiosk, sidemenuOpen);
+        setViewModeBodyClass(body, search.kiosk);
       });
 
       // handle in active view state class
@@ -213,7 +204,6 @@ export function grafanaAppDirective(playlistSrv, contextSrv, $timeout, $rootScop
         if (new Date().getTime() - lastActivity > inActiveTimeLimit) {
           activeUser = false;
           body.addClass('view-mode--inactive');
-          body.removeClass('sidemenu-open');
         }
       }
 
@@ -222,7 +212,6 @@ export function grafanaAppDirective(playlistSrv, contextSrv, $timeout, $rootScop
         if (!activeUser) {
           activeUser = true;
           body.removeClass('view-mode--inactive');
-          body.toggleClass('sidemenu-open', sidemenuOpen);
         }
       }
 

public/sass/components/_navbar.scss

@@ -157,15 +157,9 @@
 
 @include media-breakpoint-up(sm) {
   .navbar {
-    padding-left: 60px;
-  }
-
-  .sidemenu-open {
-    .navbar {
-      padding-left: 25px;
+    padding-left: 20px;
     margin-left: 0;
   }
-  }
 
   .navbar-page-btn {
     .gicon {

public/sass/components/_sidemenu.scss

@@ -16,41 +16,39 @@
   .sidemenu__close {
     display: none;
   }
-}
-
-// body class that hides sidemenu
-.sidemenu-hidden {
-  .sidemenu {
-    display: none;
-  }
-}
 
-@include media-breakpoint-up(sm) {
-  .sidemenu-open {
-    .sidemenu {
+  @include media-breakpoint-up(sm) {
     background: $side-menu-bg;
     height: auto;
     box-shadow: $side-menu-shadow;
     position: relative;
     z-index: $zindex-sidemenu;
   }
+}
 
-    .sidemenu__top,
-    .sidemenu__bottom {
-      display: block;
-    }
+// body class that hides sidemenu
+.sidemenu-hidden {
+  .sidemenu {
+    display: none;
   }
 }
 
 .sidemenu__top {
   padding-top: 3rem;
   flex-grow: 1;
-  display: none;
 }
 
 .sidemenu__bottom {
   padding-bottom: $spacer;
+}
+
+.sidemenu__top,
+.sidemenu__bottom {
   display: none;
+
+  @include media-breakpoint-up(sm) {
+    display: block;
+  }
 }
 
 .sidemenu-item {

public/sass/components/_view_states.scss

@@ -29,6 +29,21 @@
 .view-mode--tv {
   @extend .view-mode--inactive;
 
+  .sidemenu {
+    position: fixed;
+    background-color: transparent;
+    box-shadow: none;
+
+    .sidemenu__top,
+    .sidemenu__bottom {
+      display: none;
+    }
+  }
+
+  .navbar {
+    padding-left: $side-menu-width;
+  }
+
   .submenu-controls {
     display: none;
   }

public/sass/pages/_explore.scss

@@ -25,20 +25,13 @@
   }
 }
 
-.sidemenu-open {
-  .explore-toolbar-header {
-    padding: 0;
-    margin-left: 0;
-  }
-}
-
 .explore-toolbar {
   background: inherit;
   display: flex;
   flex-flow: row wrap;
   justify-content: flex-start;
   height: auto;
-  padding: 0px $dashboard-padding 0 25px;
+  padding: 0 $dashboard-padding;
   border-bottom: 1px solid #0000;
   transition-duration: 0.35s;
   transition-timing-function: ease-in-out;
@@ -73,11 +66,6 @@
   min-height: 55px;
   line-height: 55px;
   justify-content: space-between;
-  margin-left: $panel-margin * 3;
-}
-
-.explore-toolbar-header {
-  justify-content: space-between;
   align-items: center;
 }
 
@@ -134,20 +122,6 @@
 }
 
 @media only screen and (max-width: 803px) {
-  .sidemenu-open {
-    .explore-toolbar-header-title {
-      .navbar-page-btn {
-        margin-left: 0;
-      }
-    }
-  }
-
-  .explore-toolbar-header-title {
-    .navbar-page-btn {
-      margin-left: $dashboard-padding;
-    }
-  }
-
   .btn-title {
     display: none;
   }
@@ -161,14 +135,6 @@
 }
 
 @media only screen and (max-width: 544px) {
-  .sidemenu-open {
-    .explore-toolbar-header-title {
-      .navbar-page-btn {
-        margin-left: $dashboard-padding;
-      }
-    }
-  }
-
   .explore-toolbar-header-title {
     .navbar-page-btn {
       margin-left: $dashboard-padding;