summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorSebastien Douheret <sebastien.douheret@iot.bzh>2017-05-31 10:35:23 +0200
committerSebastien Douheret <sebastien.douheret@iot.bzh>2017-05-31 10:50:41 +0200
commit7a5db7b760787842823f80b6921f35ae6d27b4fc (patch)
tree7fcfe778870e02de262cd2a9a9fa0873aa5f0904
parente207f66af028c1b930df383c2d6376266ea13fe5 (diff)
Fix navbar menu when width is small
Signed-off-by: Sebastien Douheret <sebastien.douheret@iot.bzh>
-rw-r--r--webapp/src/app/app.component.html16
-rw-r--r--webapp/src/app/app.component.ts3
2 files changed, 14 insertions, 5 deletions
diff --git a/webapp/src/app/app.component.html b/webapp/src/app/app.component.html
index 4faedea..b02dbe2 100644
--- a/webapp/src/app/app.component.html
+++ b/webapp/src/app/app.component.html
@@ -1,14 +1,20 @@
<nav class="navbar navbar-fixed-top navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
- <a class="navbar-brand" href="#">Cross Development System Dashboard</a>
+ <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#myNavbar"
+ [attr.aria-expanded]="!isCollapsed" (click)="isCollapsed = !isCollapsed;" [ngClass]="{'collapsed': isCollapsed}">
+ <span class="icon-bar"></span>
+ <span class="icon-bar"></span>
+ <span class="icon-bar"></span>
+ </button>
+ <a class="navbar-brand" href="#">X(cross) Development System Dashboard</a>
</div>
- <div class="navbar-collapse collapse menu2">
+ <div class="collapse navbar-collapse" [ngClass]="{'in': !isCollapsed}" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
- <li><a routerLink="/config"><i class="fa fa-2x fa-cog" title="Open configuration page"></i></a></li>
- <li><a routerLink="/devel"><i class="fa fa-2x fa-play-circle" title="Open build page"></i></a></li>
- <li><a routerLink="/home"><i class="fa fa-2x fa-home" title="Back to home page"></i></a></li>
+ <li><a routerLink="/config"><i class="fa fa-2x fa-cog" title="Open configuration page" (click)="isCollapsed=true;"></i></a></li>
+ <li><a routerLink="/devel"><i class="fa fa-2x fa-play-circle" title="Open build page" (click)="isCollapsed=true;"></i></a></li>
+ <li><a routerLink="/home"><i class="fa fa-2x fa-home" title="Back to home page" (click)="isCollapsed=true;"></i></a></li>
</ul>
</div>
</div>
diff --git a/webapp/src/app/app.component.ts b/webapp/src/app/app.component.ts
index d0f9c6e..40cfb24 100644
--- a/webapp/src/app/app.component.ts
+++ b/webapp/src/app/app.component.ts
@@ -9,6 +9,9 @@ import { Router } from '@angular/router';
})
export class AppComponent implements OnInit, OnDestroy {
+
+ isCollapsed: boolean = true;
+
private defaultLanguage: string = 'en';
// I initialize the app component.