diff --git a/public/app/core/components/sidemenu/SideMenu.test.tsx b/public/app/core/components/sidemenu/SideMenu.test.tsx index f7b7df69cfc..6352833490a 100644 --- a/public/app/core/components/sidemenu/SideMenu.test.tsx +++ b/public/app/core/components/sidemenu/SideMenu.test.tsx @@ -2,7 +2,6 @@ import React from 'react'; import { shallow } from 'enzyme'; import { SideMenu } from './SideMenu'; import appEvents from '../../app_events'; -import { contextSrv } from 'app/core/services/context_srv'; jest.mock('../../app_events', () => ({ emit: jest.fn(), @@ -26,7 +25,6 @@ jest.mock('app/core/services/context_srv', () => ({ isGrafanaAdmin: false, isEditor: false, hasEditPermissionFolders: false, - toggleSideMenu: jest.fn(), }, })); @@ -54,20 +52,6 @@ describe('Render', () => { }); describe('Functions', () => { - describe('toggle side menu', () => { - const wrapper = setup(); - const instance = wrapper.instance() as SideMenu; - instance.toggleSideMenu(); - - it('should call contextSrv.toggleSideMenu', () => { - expect(contextSrv.toggleSideMenu).toHaveBeenCalled(); - }); - - it('should emit toggle sidemenu event', () => { - expect(appEvents.emit).toHaveBeenCalledWith('toggle-sidemenu'); - }); - }); - describe('toggle side menu on mobile', () => { const wrapper = setup(); const instance = wrapper.instance() as SideMenu; diff --git a/public/app/core/components/sidemenu/SideMenu.tsx b/public/app/core/components/sidemenu/SideMenu.tsx index 1428ae181f5..b0ef053f746 100644 --- a/public/app/core/components/sidemenu/SideMenu.tsx +++ b/public/app/core/components/sidemenu/SideMenu.tsx @@ -1,31 +1,21 @@ import React, { PureComponent } from 'react'; import appEvents from '../../app_events'; -import { contextSrv } from 'app/core/services/context_srv'; import TopSection from './TopSection'; import BottomSection from './BottomSection'; -import { store } from 'app/store/store'; +import config from 'app/core/config'; + +const homeUrl = config.appSubUrl || '/'; export class SideMenu extends PureComponent { - toggleSideMenu = () => { - // ignore if we just made a location change, stops hiding sidemenu on double clicks of back button - const timeSinceLocationChanged = new Date().getTime() - store.getState().location.lastUpdated; - if (timeSinceLocationChanged < 1000) { - return; - } - - contextSrv.toggleSideMenu(); - appEvents.emit('toggle-sidemenu'); - }; - toggleSideMenuSmallBreakpoint = () => { appEvents.emit('toggle-sidemenu-mobile'); }; render() { return [ -
+ Grafana -
, + ,
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 [ -
Grafana -
, + ,
{ - 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;