diff --git a/public/app/core/components/sidemenu/__snapshots__/SideMenu.test.tsx.snap b/public/app/core/components/sidemenu/__snapshots__/SideMenu.test.tsx.snap
index ec2fa845c6d..8d23cdc1565 100644
--- a/public/app/core/components/sidemenu/__snapshots__/SideMenu.test.tsx.snap
+++ b/public/app/core/components/sidemenu/__snapshots__/SideMenu.test.tsx.snap
@@ -2,16 +2,16 @@
exports[`Render should render component 1`] = `
Array [
-

-
,
+ ,
{
- let sidemenuOpen;
const body = $('body');
// see https://github.com/zenorocha/clipboard.js/issues/155
@@ -113,14 +107,6 @@ export function grafanaAppDirective(playlistSrv, contextSrv, $timeout, $rootScop
$('.preloader').remove();
- sidemenuOpen = scope.contextSrv.sidemenu;
- body.toggleClass('sidemenu-open', sidemenuOpen);
-
- appEvents.on('toggle-sidemenu', () => {
- sidemenuOpen = scope.contextSrv.sidemenu;
- body.toggleClass('sidemenu-open');
- });
-
appEvents.on('toggle-sidemenu-mobile', () => {
body.toggleClass('sidemenu-open--xs');
});
@@ -163,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) {
@@ -198,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
@@ -218,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');
}
}
@@ -227,7 +212,6 @@ export function grafanaAppDirective(playlistSrv, contextSrv, $timeout, $rootScop
if (!activeUser) {
activeUser = true;
body.removeClass('view-mode--inactive');
- body.toggleClass('sidemenu-open', sidemenuOpen);
}
}
diff --git a/public/sass/components/_navbar.scss b/public/sass/components/_navbar.scss
index a86b8c450a0..eef101c98b4 100644
--- a/public/sass/components/_navbar.scss
+++ b/public/sass/components/_navbar.scss
@@ -157,14 +157,8 @@
@include media-breakpoint-up(sm) {
.navbar {
- padding-left: 60px;
- }
-
- .sidemenu-open {
- .navbar {
- padding-left: 25px;
- margin-left: 0;
- }
+ padding-left: 20px;
+ margin-left: 0;
}
.navbar-page-btn {
diff --git a/public/sass/components/_sidemenu.scss b/public/sass/components/_sidemenu.scss
index f30bdb5c79e..c16e037c2ad 100644
--- a/public/sass/components/_sidemenu.scss
+++ b/public/sass/components/_sidemenu.scss
@@ -16,6 +16,14 @@
.sidemenu__close {
display: none;
}
+
+ @include media-breakpoint-up(sm) {
+ background: $side-menu-bg;
+ height: auto;
+ box-shadow: $side-menu-shadow;
+ position: relative;
+ z-index: $zindex-sidemenu;
+ }
}
// body class that hides sidemenu
@@ -25,32 +33,22 @@
}
}
-@include media-breakpoint-up(sm) {
- .sidemenu-open {
- .sidemenu {
- background: $side-menu-bg;
- height: auto;
- box-shadow: $side-menu-shadow;
- position: relative;
- z-index: $zindex-sidemenu;
- }
-
- .sidemenu__top,
- .sidemenu__bottom {
- display: block;
- }
- }
-}
-
.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 {
diff --git a/public/sass/components/_view_states.scss b/public/sass/components/_view_states.scss
index b92bd596193..e1ca3d44f83 100644
--- a/public/sass/components/_view_states.scss
+++ b/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;
}
diff --git a/public/sass/pages/_explore.scss b/public/sass/pages/_explore.scss
index 90579ff67ad..0358adb9787 100644
--- a/public/sass/pages/_explore.scss
+++ b/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;
@@ -72,11 +65,6 @@
font-size: 18px;
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;