Skip to content

N
nexpie-grafana-theme
Commit 66657d24 by Daniel Lee
Options

sidemenu: responsive sidemenu view for smallest breakpoint 

For the smallest breakpoint, expands the sidemenu to be width 100% and
to be toggled on or off rather than visible all the time.
parent 15f46b85
Showing with 153 additions and 30 deletions
public/app/core/components/grafana_app.ts
...@@ -85,6 +85,16 @@ export function grafanaAppDirective(playlistSrv, contextSrv, $timeout, $rootScop ...@@ -85,6 +85,16 @@ export function grafanaAppDirective(playlistSrv, contextSrv, $timeout, $rootScop
} }
}); });
let sidemenuOpenSmallBreakpoint = scope.contextSrv.sidemenuSmallBreakpoint;
body.toggleClass('sidemenu-open--xs', sidemenuOpenSmallBreakpoint);
scope.$watch('contextSrv.sidemenuSmallBreakpoint', newVal => {
if (sidemenuOpenSmallBreakpoint !== scope.contextSrv.sidemenuSmallBreakpoint) {
sidemenuOpenSmallBreakpoint = scope.contextSrv.sidemenuSmallBreakpoint;
body.toggleClass('sidemenu-open--xs', scope.contextSrv.sidemenuSmallBreakpoint);
}
});
// tooltip removal fix // tooltip removal fix
// manage page classes // manage page classes
var pageClass; var pageClass;
......
public/app/core/components/sidemenu/sidemenu.html
...@@ -2,6 +2,12 @@ ...@@ -2,6 +2,12 @@
<img src="public/img/grafana_icon.svg"></img> <img src="public/img/grafana_icon.svg"></img>
</a> </a>
<a class="sidemenu__logo_small_breakpoint" ng-click="ctrl.toggleSideMenuSmallBreakpoint()">
<img src="public/img/grafana_icon.svg"></img>
<p class="sidemenu__close"><i class="fa fa-times"></i>&nbsp;Close</p>
</a>
<div class="sidemenu__top"> <div class="sidemenu__top">
<div ng-repeat="item in ::ctrl.mainLinks" class="sidemenu-item dropdown"> <div ng-repeat="item in ::ctrl.mainLinks" class="sidemenu-item dropdown">
<a href="{{::item.url}}" class="sidemenu-link" target="{{::item.target}}"> <a href="{{::item.url}}" class="sidemenu-link" target="{{::item.target}}">
......
public/app/core/components/sidemenu/sidemenu.ts
...@@ -11,6 +11,7 @@ export class SideMenuCtrl { ...@@ -11,6 +11,7 @@ export class SideMenuCtrl {
bottomNav: any; bottomNav: any;
loginUrl: string; loginUrl: string;
isSignedIn: boolean; isSignedIn: boolean;
smallBPSideMenuOpen = false;
/** @ngInject */ /** @ngInject */
constructor(private $scope, private $rootScope, private $location, private contextSrv, private $timeout) { constructor(private $scope, private $rootScope, private $location, private contextSrv, private $timeout) {
...@@ -28,6 +29,10 @@ export class SideMenuCtrl { ...@@ -28,6 +29,10 @@ export class SideMenuCtrl {
} }
this.$scope.$on('$routeChangeSuccess', () => { this.$scope.$on('$routeChangeSuccess', () => {
if (this.smallBPSideMenuOpen) {
this.contextSrv.setSideMenuForSmallBreakpoint(false, true);
this.smallBPSideMenuOpen = false;
}
this.loginUrl = 'login?redirect=' + encodeURIComponent(this.$location.path()); this.loginUrl = 'login?redirect=' + encodeURIComponent(this.$location.path());
}); });
} }
...@@ -39,6 +44,11 @@ export class SideMenuCtrl { ...@@ -39,6 +44,11 @@ export class SideMenuCtrl {
}); });
} }
toggleSideMenuSmallBreakpoint() {
this.smallBPSideMenuOpen = !this.smallBPSideMenuOpen;
this.contextSrv.setSideMenuForSmallBreakpoint(this.smallBPSideMenuOpen, false);
}
switchOrg() { switchOrg() {
this.$rootScope.appEvent('show-modal', { this.$rootScope.appEvent('show-modal', {
templateHtml: '<org-switcher dismiss="dismiss()"></org-switcher>', templateHtml: '<org-switcher dismiss="dismiss()"></org-switcher>',
......
public/app/core/services/context_srv.ts
...@@ -27,9 +27,10 @@ export class ContextSrv { ...@@ -27,9 +27,10 @@ export class ContextSrv {
isGrafanaAdmin: any; isGrafanaAdmin: any;
isEditor: any; isEditor: any;
sidemenu: any; sidemenu: any;
sidemenuSmallBreakpoint = false;
constructor() { constructor() {
this.sidemenu = store.getBool('grafana.sidemenu', false); this.sidemenu = store.getBool('grafana.sidemenu', true);
if (!config.buildInfo) { if (!config.buildInfo) {
config.buildInfo = {}; config.buildInfo = {};
...@@ -55,7 +56,11 @@ export class ContextSrv { ...@@ -55,7 +56,11 @@ export class ContextSrv {
toggleSideMenu() { toggleSideMenu() {
this.sidemenu = !this.sidemenu; this.sidemenu = !this.sidemenu;
store.set('grafana.sidemenu',this.sidemenu); store.set('grafana.sidemenu', this.sidemenu);
}
setSideMenuForSmallBreakpoint(show: boolean, persistToggle: boolean) {
this.sidemenuSmallBreakpoint = show;
} }
} }
......
public/sass/components/_sidemenu.scss
...@@ -4,25 +4,34 @@ ...@@ -4,25 +4,34 @@
flex-flow: column; flex-flow: column;
flex-direction: column; flex-direction: column;
width: $side-menu-width; width: $side-menu-width;
background: $navbarBackground;
z-index: $zindex-sidemenu; z-index: $zindex-sidemenu;
a:focus { a:focus {
text-decoration: none; text-decoration: none;
} }
}
.sidemenu-open { .sidemenu__logo_small_breakpoint {
.sidemenu { display: none;
background: $side-menu-bg;
position: initial;
height: auto;
box-shadow: $side-menu-shadow;
position: relative;
z-index: $zindex-sidemenu;
} }
.sidemenu__top,
.sidemenu__bottom { .sidemenu__close {
display: block; display: none;
}
}
@include media-breakpoint-up(sm) {
.sidemenu-open {
.sidemenu {
background: $side-menu-bg;
position: initial;
height: auto;
box-shadow: $side-menu-shadow;
position: relative;
z-index: $zindex-sidemenu;
}
.sidemenu__top,
.sidemenu__bottom {
display: block;
}
} }
} }
...@@ -41,21 +50,23 @@ ...@@ -41,21 +50,23 @@
position: relative; position: relative;
@include left-brand-border(); @include left-brand-border();
&.active, @include media-breakpoint-up(sm) {
&:hover { &.active,
background-color: $side-menu-item-hover-bg; &:hover {
@include left-brand-border-gradient(); background-color: $side-menu-item-hover-bg;
@include left-brand-border-gradient();
.dropdown-menu { .dropdown-menu {
margin: 0; margin: 0;
display: block; display: block;
opacity: 0; opacity: 0;
top: 0px; top: 0px;
// important to overlap it otherwise it can be hidden // important to overlap it otherwise it can be hidden
// again by the mouse getting outside the hover space // again by the mouse getting outside the hover space
left: $side-menu-width - 2px; 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; z-index: $zindex-sidemenu;
}
} }
} }
} }
...@@ -152,7 +163,7 @@ li.sidemenu-org-switcher { ...@@ -152,7 +163,7 @@ li.sidemenu-org-switcher {
} }
} }
.sidemenu__logo { .sidemenu__logo, .sidemenu__logo_small_breakpoint {
display: block; display: block;
padding: 0.4rem 1.0rem 0.4rem 0.65rem; padding: 0.4rem 1.0rem 0.4rem 0.65rem;
min-height: $navbarHeight; min-height: $navbarHeight;
...@@ -170,3 +181,84 @@ li.sidemenu-org-switcher { ...@@ -170,3 +181,84 @@ li.sidemenu-org-switcher {
} }
} }
@include media-breakpoint-down(xs) {
.sidemenu-open {
.navbar {
padding-left: 60px !important;
}
}
.sidemenu-open--xs {
.sidemenu {
width: 100%;
background: $side-menu-bg;
position: initial;
height: auto;
box-shadow: $side-menu-shadow;
position: relative;
z-index: $zindex-sidemenu;
}
.sidemenu__close {
display: block;
font-size: $font-size-md;
}
.sidemenu__top,
.sidemenu__bottom {
display: block;
}
}
.sidemenu {
.sidemenu__logo {
display: none;
}
.sidemenu__logo_small_breakpoint {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: baseline;
&:hover {
background: transparent;
}
}
.sidemenu__top {
padding-top: 0rem;
}
.side-menu-header {
padding-left: 10px;
}
.sidemenu-link {
text-align: left;
}
.sidemenu-icon {
display: none
}
.dropdown-menu--sidemenu {
display: block;
position: unset;
width: 100%;
float: none;
margin-top: 0.5rem;
margin-bottom: 0.5rem;
> li > a {
padding-left: 15px;
}
}
.sidemenu__bottom {
.dropdown-menu--sidemenu {
display: flex;
flex-direction: column-reverse;
}
}
}
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment