Add new skeletton with side menu and search bar inside the header

package.json

@@ -30,50 +30,51 @@
     "@angular/router": "6.1.0",
     "@turf/centroid": "^5.1.5",
     "@turf/helpers": "^6.1.4",
-    "angulartics2": "^6.2.0",
-    "bulma": "^0.7.1",
+    "angulartics2": "^6.3.1",
+    "bulma": "^0.7.2",
     "bulma-checkradio": "^2.1.0",
     "bulma-slider": "^2.0.0",
-    "bulma-tooltip": "^2.0.1",
+    "bulma-tooltip": "^2.0.2",
     "core-js": "^2.5.7",
     "font-awesome": "^4.7.0",
+    "hamburgers": "^1.1.3",
     "jwt-decode": "^2.2.0",
-    "lodash": "^4.17.10",
+    "lodash": "^4.17.11",
     "lodash.clonedeep": "^4.5.0",
     "mapbox-gl": "^0.47.0",
-    "ng-inline-svg": "^8.0.1",
+    "ng-inline-svg": "^8.2.1",
     "ngx-infinite-scroll": "^6.0.1",
-    "rxjs": "^6.2.0",
+    "rxjs": "^6.3.3",
     "xml2js": "^0.4.19",
     "zone.js": "^0.8.26"
   },
   "devDependencies": {
     "@angular-devkit/build-angular": "~0.6.8",
-    "@angular/cli": "^6.1.1",
+    "@angular/cli": "^6.2.8",
     "@angular/compiler-cli": "6.1.0",
     "@angular/language-service": "6.1.0",
-    "@types/jasmine": "^2.8.8",
-    "@types/jasminewd2": "~2.0.2",
+    "@types/jasmine": "^2.8.12",
+    "@types/jasminewd2": "^2.0.6",
     "@types/jwt-decode": "^2.2.1",
     "@types/lodash.clonedeep": "^4.5.4",
     "@types/mapbox-gl": "^0.47.0",
-    "@types/node": "^6.0.112",
-    "codelyzer": "^4.3.0",
+    "@types/node": "^6.14.2",
+    "codelyzer": "^4.5.0",
     "jasmine-core": "~2.8.0",
     "jasmine-spec-reporter": "~4.2.1",
-    "karma": "^2.0.2",
+    "karma": "^2.0.5",
     "karma-chrome-launcher": "~2.2.0",
     "karma-coverage-istanbul-reporter": "^1.4.3",
-    "karma-htmlfile-reporter": "^0.3.5",
+    "karma-htmlfile-reporter": "^0.3.7",
     "karma-jasmine": "^1.1.2",
     "karma-jasmine-html-reporter": "^0.2.2",
     "ng2-mock-component": "0.0.6",
-    "protractor": "^5.3.2",
-    "rxjs-tslint": "^0.1.4",
+    "protractor": "^5.4.1",
+    "rxjs-tslint": "^0.1.6",
     "sass-recursive-map-merge": "^1.0.1",
     "ts-node": "~4.1.0",
     "tslint": "~5.9.1",
-    "tslint-config-airbnb": "^5.9.2",
+    "tslint-config-airbnb": "^5.11.1",
     "typescript": "2.9.2"
   }
 }

src/app/core/components/footer/footer.component.html

-<footer class="footer" role="contentinfo">
-  <div class="container">
-    <div class="content">
-      <div class="columns">
-        <div class="column is-2 has-text-centered">
-          <ul>
-            <li>
-              <a href="https://download.data.grandlyon.com/catalogue/srv/fre/rss.search?sortBy=publicationDate&amp;georss=simplepoint&amp;data"
-                title="RSS Feed (new window)" i18n-title="@@footer.rss" target="_blank">
-                <i class="social-network-link fas fa-rss-square"></i>
-              </a>
-            </li>
-            <li class="left-border">
-              <a href="http://www.facebook.com/legrandlyon" title="Facebook (new window)" i18n-title="@@footer.facebook" target="_blank">
-                <i class="social-network-link fab fa-facebook-square"></i>
-              </a>
-            </li>
-            <li class="left-border">
-              <a href="https://twitter.com/grandlyon" title="Twitter (new window)" i18n-title="@@footer.twitter" target="_blank">
-                <i class="social-network-link fab fa-twitter-square"></i>
-              </a>
-            </li>
-          </ul>
-        </div>
-        <div class="column is-7 has-text-centered">
-          <ul>
-            <li>
-              <a class="accessibility-link" [routerLink]="['/', AppRoutes.accessibility.uri]" i18n="@@footer.accessibility">Accessibility</a>
-            </li>
-            <li class="left-border">
-              <a class="site-map-link" [routerLink]="['/', AppRoutes.siteMap.uri]"  i18n="@@footer.sitemap">Site Map</a>
-            </li>
-            <li class="left-border">
-              <a class="legal-mentions-link" [routerLink]="['/', AppRoutes.legalNotices.uri]"  i18n="@@footer.notices">Legal Notices</a>
-            </li>
-            <li class="left-border">
-              <a [routerLink]="['/', AppRoutes.contact.uri]" i18n="@@footer.contactus">Contact Us</a>
-            </li>
-          </ul>
-        </div>
-        <div class="column is-3 has-text-centered">
-          <ul>
-            <li>
-              <a href="https://www.grandlyon.com/" target="_blank">
-                <img i18n-title="@@footer.metropole.site.title" title="Access the Lyon Metropolis website (new window)" class="plus-logo"
-                  src="./assets/img/footer-plus.png" alt="Accéder au site de la Métropole de Lyon (nouvelle fenêtre)">
-              </a>
-            </li>
-            <li>
-              <a class="metropolis-website-link" i18n-title="@@footer.metropole.site.title" title="Access the Lyon Metropolis website (new window)"
-                href="https://www.grandlyon.com/" target="_blank" i18n="@@footer.metropole.site">
-                A Lyon Metropolis website
-              </a>
-            </li>
-          </ul>
-        </div>
-      </div>
-    </div>
-  </div>
-</footer>
\ No newline at end of file

src/app/core/components/header/header.component.html

-<header role="banner">
-  <nav class="navbar">
-    <div class="navbar-brand">
-      <a class="navbar-item" [routerLink]="['/', AppRoutes.home.uri]">
-        <img class="logo-smart-data-grand-lyon" src="./assets/img/logo-smart-data-grand-lyon.png" alt="Données métropolitaines du Grand Lyon">
-      </a>
-      <div class="navbar-item is-hidden-touch">
-        <img class="logo-smart-data-grand-lyon" width="112" height="28" src="./assets/img/logo-grand-lyon.png" alt="Grand Lyon, la métropole">
-      </div>
-      <div role="button" class="navbar-burger burger" [ngClass]="{'is-active': burgerActive}" (click)="burgerActive = !burgerActive">
-        <span></span>
-        <span></span>
-        <span></span>
-      </div>
-    </div>
-    <div class="navbar-menu" [ngClass]="{'is-active': burgerActive === true}">
-      <div class="navbar-start">
-        <a class="navbar-item home-link" [routerLink]="['/', AppRoutes.home.uri]" routerLinkActive="active-link" i18n="@@header.home">
-          Home
-        </a>
-        <a class="navbar-item research-link" [routerLink]="['/', AppRoutes.research.uri]" routerLinkActive="active-link"
-          i18n="@@header.data">
-          Data
-        </a>
-        <a class="navbar-item approach-link" [routerLink]="['/', AppRoutes.approach.uri]" routerLinkActive="active-link"
-          i18n="@@header.approach">
-          Approach
-        </a>
-        <a class="navbar-item approach-link" [routerLink]="['/', AppRoutes.actors.uri]" routerLinkActive="active-link" i18n="@@header.actors">
-          Actors
-        </a>
-      </div>
-      <div class="navbar-end">
-        <div class="navbar-item">
-          <a href preventDefault class="flag-logo" (click)="changeLanguage('en')"><img src="./assets/img/uk-flag.png"
-              title="English" i18n-title="@@header.logoEnglish" alt="Drapeau français"></a>
-          <a href preventDefault class="flag-logo" (click)="changeLanguage('fr')"><img src="./assets/img/france-flag.png"
-              title="French" i18n-title="@@header.logoFrench" alt="Drapeau du Royaume-Uni"></a>
-        </div>
-        <div class="navbar-item">
-          <span *ngIf="!userIsSignedIn">
-          <a [routerLink]="['/', AppRoutes.signin.uri]" routerLinkActive="active-link" i18n="@@header.signIn">
-            Sign In
-          </a>
-          or
-          <a [routerLink]="['/', AppRoutes.signup.uri]" routerLinkActive="active-link" i18n="@@header.signUp">
-            Sign Up
-          </a>
-        </span>
-          <span class="username" *ngIf="userIsSignedIn">{{ username }}</span>
-          <a href preventDefault (click)="signOut()" *ngIf="userIsSignedIn" i18n="@@header.signOut">Sign Out</a>
-        </div>
-      </div>
-    </div>
-  </nav>
-</header>
\ No newline at end of file

src/app/core/components/index.ts

-import { HeaderComponent } from './header/header.component';
+import { HeaderComponent } from './main/header/header.component';
 import { MainComponent } from './main/main.component';
-import { FooterComponent } from './footer/footer.component';
+import { FooterComponent } from './main/footer/footer.component';
 import { NotificationsComponent } from './notifications/notifications.component';
 import { ErrorComponent } from './error/error.component';
 import { LoginComponent } from './login/login.component';
 import { ContactComponent } from './contact/contact.component';
 import { SignUpComponent } from './sign-up/sign-up.component';
+import { SideMenuComponent } from './main/side-menu/side-menu.component';
 
 export { HeaderComponent, MainComponent, FooterComponent, NotificationsComponent,
   ErrorComponent, LoginComponent, ContactComponent, SignUpComponent };
@@ -20,4 +21,5 @@ export const CoreComponents = [
   ContactComponent,
   LoginComponent,
   SignUpComponent,
+  SideMenuComponent,
 ];

src/app/core/components/main/footer/footer.component.html

+<footer class="footer" role="contentinfo">
+  <div class="columns is-desktop">
+    <div class="column is-narrow links">
+        <div>
+          <a class="accessibility-link" [routerLink]="['/', AppRoutes.accessibility.uri]" i18n="@@footer.accessibility">
+            Accessibility</a>
+        </div>
+        <div>
+          <a class="site-map-link" [routerLink]="['/', AppRoutes.siteMap.uri]" i18n="@@footer.sitemap">Site Map</a>
+        </div>
+        <div >
+          <a class="legal-mentions-link" [routerLink]="['/', AppRoutes.legalNotices.uri]" i18n="@@footer.notices">Legal
+            Notices</a>
+        </div>
+        <div>
+          <a [routerLink]="['/', AppRoutes.contact.uri]" i18n="@@footer.contactus">Contact Us</a>
+        </div>
+
+    </div>
+    <div class="column is-narrow">
+      <ul>
+        <li>
+          <a href="https://download.data.grandlyon.com/catalogue/srv/fre/rss.search?sortBy=publicationDate&amp;georss=simplepoint&amp;data"
+            title="RSS Feed (new window)" i18n-title="@@footer.rss" target="_blank">
+            <i class="social-network-link fas fa-rss-square"></i>
+          </a>
+        </li>
+        <li class="left-border">
+          <a href="http://www.facebook.com/legrandlyon" title="Facebook (new window)" i18n-title="@@footer.facebook"
+            target="_blank">
+            <i class="social-network-link fab fa-facebook-square"></i>
+          </a>
+        </li>
+        <li class="left-border">
+          <a href="https://twitter.com/grandlyon" title="Twitter (new window)" i18n-title="@@footer.twitter" target="_blank">
+            <i class="social-network-link fab fa-twitter-square"></i>
+          </a>
+        </li>
+      </ul>
+    </div>
+    <div class="column metropole">
+      <ul>
+        <li>
+          <a href="https://www.grandlyon.com/" target="_blank">
+            <img i18n-title="@@footer.metropole.site.title" title="Access the Lyon Metropolis website (new window)"
+              class="plus-logo" src="./assets/img/footer-plus.png" alt="Accéder au site de la Métropole de Lyon (nouvelle fenêtre)">
+          </a>
+        </li>
+        <li>
+          <a class="metropolis-website-link" i18n-title="@@footer.metropole.site.title" title="Access the Lyon Metropolis website (new window)"
+            href="https://www.grandlyon.com/" target="_blank" i18n="@@footer.metropole.site">
+            A Lyon Metropolis website
+          </a>
+        </li>
+      </ul>
+    </div>
+  </div>
+</footer>

src/app/core/components/footer/footer.component.scss → src/app/core/components/main/footer/footer.component.scss

-@import '../../../../scss/variables';
+@import '../../../../../scss/variables';
+@import '../../../../../scss/init_bulma.scss';
 
-.footer {
+footer.footer {
   padding-top: 1em;
   padding-bottom: 1em;
-  margin-top: 1em;
+  background-color: $dark-blue;
+
   a {
     color: white;
+    font-size: $size-6;
+  }
+
+  .metropole {
+    text-align: right;
+  }
+  @media screen and (max-width: $desktop) {
+    div.column {
+      text-align: center;
+    }
   }
 }
 
+.links div {
+  display: inline-block;
+  a {
+    padding-right: 0.5rem;
+    padding-left: 0.5rem;
+  }
+  &:not(:first-of-type) {
+    a {
+      border-left: 1px solid white;
+    }
+  }
+}
 
-img, .social-network-link {
+img,
+.social-network-link {
   vertical-align: middle;
 }
 
@@ -27,6 +52,7 @@ img, .social-network-link {
 ul {
   padding-left: 0;
   margin: 0;
+
   li {
     display: inline;
   }
@@ -36,6 +62,6 @@ ul {
   height: 0.875rem;
 }
 
-.metropolis-website-link:hover {
+.metropolis-website-link:hover, .links a:hover {
   text-decoration: underline;
-}
\ No newline at end of file
+}

src/app/core/components/footer/footer.component.ts → src/app/core/components/main/footer/footer.component.ts

 import { Component, OnInit } from '@angular/core';
-import { AppRoutes } from '../../../routes';
+import { AppRoutes } from '../../../../routes';
 
 @Component({
   selector: 'app-footer',

src/app/core/components/main/header/header.component.html

+<header role="banner">
+  <div class="navbar">
+    <div class="navbar-brand">
+      <div class="navbar-item icon-hamburger">
+        <div class="hamburger hamburger--collapse-r" [ngClass]="{'is-active': isBurgerActive}" (click)="toggleBurger()">
+          <div class="hamburger-box">
+            <div class="hamburger-inner"></div>
+          </div>
+        </div>
+      </div>
+      <div class="navbar-item logo-data">
+        <a [routerLink]="['/', AppRoutes.home.uri]">
+          <span class=""><span class="has-text-danger">data</span>.grandlyon.com</span>
+        </a>
+      </div>
+    </div>
+    <div class="navbar-menu search-bar">
+      <div class="navbar-item">
+        <app-search-bar class="search-bar"></app-search-bar>
+      </div>
+    </div>
+ 
+    <div class="navbar-menu">
+      <div class="navbar-item is-hidden-touch">
+        <img class="logo-smart-data-grand-lyon" width="112" height="28" src="./assets/img/logo-grand-lyon.png" alt="Grand Lyon, la métropole">
+      </div>
+
+    </div>
+  </div>
+</header>

src/app/core/components/header/header.component.scss → src/app/core/components/main/header/header.component.scss

+@import '../../../../../scss/variables';
+@import '../../../../../scss/init_bulma';
+
 .flag-logo {
   line-height: 0;
+
   img {
     width: 1.25rem;
     cursor: pointer;
@@ -7,22 +11,65 @@
   }
 }
 
-.navbar-brand {
-  width: 100%;
-}
 .navbar {
   flex-wrap: wrap;
+  justify-content: space-between;
+
 }
 
 .navbar-brand {
   justify-content: space-between;
   background-color: white;
 }
+
+.logo-data {
+  &:hover {
+    cursor: pointer;
+  }
+  a {
+    color: $main;
+  }
+  a:hover {
+    color: $main;
+    text-decoration: unset;
+  }
+  span {
+    font-size: $size-4;
+  }
+}
+
+// When mobile, we center the logo
+@media screen and (max-width: $desktop) {
+  .navbar-item {
+    flex: 1;
+  }
+  .icon-hamburger > div {
+    margin-right: auto;
+  }
+  .logo-data a {
+    transform: translateX(-50%);
+  }
+}
+
+app-search-bar {
+  width: 100%;
+}
+
 .navbar-menu {
   padding: 0.5rem 2rem;
+  flex-grow: unset;
+}
+
+.navbar-menu.search-bar {
+  flex-grow: 1;
+  justify-content: center;
+
+  .navbar-item {
+    flex-basis: 50%;
+  }
 }
 
 .username {
   margin-right: 1rem;
   font-weight: bold;
-}
\ No newline at end of file
+}

src/app/core/components/main/header/header.component.ts

+import { Component, OnInit, Output, EventEmitter } from '@angular/core';
+import { AppRoutes } from '../../../../routes';
+import { DatasetResearchService } from '../../../../geosource/services';
+import { Router } from '@angular/router';
+
+@Component({
+  selector: 'app-header',
+  templateUrl: './header.component.html',
+  styleUrls: ['./header.component.scss'],
+})
+export class HeaderComponent implements OnInit {
+
+  @Output() burgerStatus = new EventEmitter<boolean>();
+  isBurgerActive = false;
+
+  AppRoutes = AppRoutes;
+
+  constructor(
+    private _datasetResearchService: DatasetResearchService,
+    private _router: Router,
+  ) { }
+
+  ngOnInit() {
+    this._datasetResearchService.searchChange$.subscribe(() => {
+      // Redirect to Dataset list if this is not the current page
+      if (this._router.url.split('/').pop() !== AppRoutes.datasets.uri) {
+        this._router.navigate(['/', AppRoutes.research.uri, AppRoutes.datasets.uri]);
+      }
+    });
+  }
+
+  toggleBurger() {
+    this.isBurgerActive = !this.isBurgerActive;
+    this.burgerStatus.emit(this.isBurgerActive);
+  }
+}

src/app/core/components/main/main.component.html

-<app-header class="site-header"></app-header>
+<div class="grid-layout">
+  <app-header class="site-header" (burgerStatus)="changeBurgerStatus($event)">
+  </app-header>
 
-<main class="site-content" role="main">
-  <router-outlet></router-outlet>
-</main>
+  <app-side-menu class="side-menu" [ngClass]="{'is-active': sidebarOpened}">
 
-<app-footer class="site-footer"></app-footer>
\ No newline at end of file
+  </app-side-menu>
+
+  <main class="site-content" role="main" [ngClass]="{'is-wide': !sidebarOpened}">
+    <router-outlet></router-outlet>
+  </main>
+
+  <app-footer class="site-footer"></app-footer>
+</div>

src/app/core/components/main/main.component.scss

+@import '../../../../scss/variables.scss';
+@import '../../../../scss/init_bulma.scss';
+
+.grid-layout {
+  display: grid;
+  min-height: 100vh;
+  grid-template-columns: 1fr;
+  grid-template-rows: auto 1fr auto;
+  overflow: hidden;
+}
+
+.site-header {
+  grid-row: 1;
+  grid-column: 1;
+}
+
+.side-menu {
+  grid-row: 2;
+  grid-column: 1;
+  width: $width-menu;
+  transform: translateX(-100%);
+  z-index: 200;
+  /* 1 */
+  transition: transform .2s linear;
+  /* 2 */
+  will-change: transform;
+  background-color: $dark-blue;
+  /* 3 */
+}
+
+.side-menu.is-active {
+  transform: translateX(0);
+  /* 4 */
+}
+
+.site-content {
+  grid-row: 2;
+  grid-column: 1;
+
+  @media screen and (min-width: $desktop) {
+    transition: all 200ms cubic-bezier(0.7, 0, 0.3, 1);
+    margin-left: $width-menu;
+    width: calc(100% - $width-menu);
+  }
+
+  &.is-wide {
+    margin-left: 0;
+    width: 100%;
+  }
+
+}
+
+.site-footer {
+  grid-row: 3;
+  grid-column: 1;
+}

src/app/core/components/main/main.component.ts

@@ -7,9 +7,14 @@ import { Component, OnInit } from '@angular/core';
 })
 export class MainComponent implements OnInit {
 
-  constructor() { }
+  sidebarOpened = false;
+
+  constructor() {}
 
   ngOnInit() {
   }