From 525e379c6706230bdc5fcd074d4b3b7bca384712 Mon Sep 17 00:00:00 2001
From: Thomas Citharel <tcit@tcit.fr>
Date: Fri, 20 Sep 2019 18:22:25 +0200
Subject: [PATCH] Move navbar to buefy component

Signed-off-by: Thomas Citharel <tcit@tcit.fr>
---
 js/public/index.html         |   2 +-
 js/src/components/NavBar.vue | 156 +++++++++++++++++------------------
 js/src/views/Home.vue        |   1 -
 js/yarn.lock                 |   6 +-
 4 files changed, 82 insertions(+), 83 deletions(-)
diff --git a/js/public/index.html b/js/public/index.html
index 08101498c..43c959275 100644
--- a/js/public/index.html
+++ b/js/public/index.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html class="has-navbar-fixed-top">
+<html lang="en">
 
 <head>
   <meta charset="utf-8">
diff --git a/js/src/components/NavBar.vue b/js/src/components/NavBar.vue
index c10e350d4..7737feb88 100644
--- a/js/src/components/NavBar.vue
+++ b/js/src/components/NavBar.vue
@@ -1,86 +1,67 @@
 <template>
-  <nav class="navbar is-fixed-top" role="navigation" aria-label="main navigation">
-    <div class="container">
-      <div class="navbar-brand">
-        <router-link class="navbar-item" :to="{ name: 'Home' }"><logo /></router-link>
+  <b-navbar type="is-secondary" shadow wrapper-class="container">
+    <template slot="brand">
+      <b-navbar-item tag="router-link" :to="{ name: 'Home' }"><logo /></b-navbar-item>
+    </template>
+    <template slot="start">
+      <b-navbar-item tag="router-link" :to="{ name: EventRouteName.MY_EVENTS }">{{ $t('Events') }}</b-navbar-item>
+    </template>
+    <template slot="end">
+      <b-navbar-item tag="div">
+        <search-field />
+      </b-navbar-item>
 
-        <a
-          role="button"
-          class="navbar-burger burger"
-          aria-label="menu"
-          aria-expanded="false"
-          data-target="navbarBasicExample"
-          @click="showNavbar = !showNavbar" :class="{ 'is-active': showNavbar }"
-        >
-          <span aria-hidden="true"></span>
-          <span aria-hidden="true"></span>
-          <span aria-hidden="true"></span>
-        </a>
-      </div>
+      <b-navbar-dropdown v-if="currentUser.isLoggedIn" right>
+        <template slot="label" v-if="currentActor" class="navbar-dropdown-profile">
+          <figure class="image is-32x32" v-if="currentActor.avatar">
+            <img class="is-rounded" alt="avatarUrl" :src="currentActor.avatar.url">
+          </figure>
+          <span>{{ currentActor.preferredUsername }}</span>
+        </template>
 
-      <div class="navbar-menu" :class="{ 'is-active': showNavbar }">
-        <div class="navbar-end">
-          <div class="navbar-item">
-            <search-field />
-          </div>
-
-          <div class="navbar-item has-dropdown is-hoverable" v-if="currentUser.isLoggedIn">
-            <a
-              class="navbar-link"
-              v-if="currentActor"
-            >
-              <figure class="image is-24x24" v-if="currentActor.avatar">
-                <img alt="avatarUrl" :src="currentActor.avatar.url">
+        <b-navbar-item tag="span" v-for="identity in identities" v-if="identities.length > 0" :active="identity.id === currentActor.id">
+          <span @click="setIdentity(identity)">
+            <div class="media-left">
+              <figure class="image is-32x32" v-if="identity.avatar">
+                <img class="is-rounded" :src="identity.avatar.url" alt="" />
               </figure>
-              <span>{{ currentActor.preferredUsername }}</span>
-            </a>
-
-            <div class="navbar-dropdown is-boxed">
-              <div v-for="identity in identities" v-if="identities.length > 0">
-                <a class="navbar-item" @click="setIdentity(identity)" :class="{ 'is-active': identity.id === currentActor.id }">
-                   <div class="media-left">
-                      <figure class="image is-24x24" v-if="identity.avatar">
-                        <img class="is-rounded" :src="identity.avatar.url">
-                      </figure>
-                    </div>
-
-                    <div class="media-content">
-                      <h3>{{ identity.displayName() }}</h3>
-                    </div>
-                </a>
-
-                <hr class="navbar-divider">
-              </div>
-
-              <a class="navbar-item">
-                <router-link :to="{ name: 'UpdateIdentity' }">{{ $t('My account') }}</router-link>
-              </a>
-
-              <a class="navbar-item">
-                <router-link :to="{ name: ActorRouteName.CREATE_GROUP }">{{ $t('Create group') }}</router-link>
-              </a>
-
-              <a class="navbar-item" v-if="currentUser.role === ICurrentUserRole.ADMINISTRATOR">
-                <router-link :to="{ name: AdminRouteName.DASHBOARD }">{{ $t('Administration') }}</router-link>
-              </a>
-
-              <a class="navbar-item" v-on:click="logout()">{{ $t('Log out') }}</a>
             </div>
-          </div>
 
-          <div class="navbar-item" v-else>
-            <div class="buttons">
-              <router-link class="button is-primary" v-if="config && config.registrationsOpen" :to="{ name: 'Register' }">
-                <strong>{{ $t('Sign up') }}</strong>
-              </router-link>
-
-              <router-link class="button is-primary" :to="{ name: 'Login' }">{{ $t('Log in') }}</router-link>
+            <div class="media-content">
+              <span>{{ identity.displayName() }}</span>
             </div>
-          </div>
+          </span>
+
+          <hr class="navbar-divider">
+        </b-navbar-item>
+
+
+          <b-navbar-item>
+            <router-link :to="{ name: 'UpdateIdentity' }">{{ $t('My account') }}</router-link>
+          </b-navbar-item>
+
+          <b-navbar-item>
+            <router-link :to="{ name: ActorRouteName.CREATE_GROUP }">{{ $t('Create group') }}</router-link>
+          </b-navbar-item>
+
+          <b-navbar-item v-if="currentUser.role === ICurrentUserRole.ADMINISTRATOR">
+            <router-link :to="{ name: AdminRouteName.DASHBOARD }">{{ $t('Administration') }}</router-link>
+          </b-navbar-item>
+
+          <b-navbar-item v-on:click="logout()">{{ $t('Log out') }}</b-navbar-item>
+      </b-navbar-dropdown>
+
+      <b-navbar-item v-else tag="div">
+        <div class="buttons">
+          <router-link class="button is-primary" v-if="config && config.registrationsOpen" :to="{ name: 'Register' }">
+            <strong>{{ $t('Sign up') }}</strong>
+          </router-link>
+
+          <router-link class="button is-light" :to="{ name: 'Login' }">{{ $t('Log in') }}</router-link>
         </div>
-      </div>
-    </div>
-  </nav>
+      </b-navbar-item>
+    </template>
+  </b-navbar>
 </template>
 
 <script lang="ts">
@@ -97,6 +78,7 @@ import SearchField from '@/components/SearchField.vue';
 import { ActorRouteName } from '@/router/actor';
 import { AdminRouteName } from '@/router/admin';
 import { RouteName } from '@/router';
+import {EventRouteName} from "@/router/event";
 
 @Component({
   apollo: {
@@ -133,6 +115,7 @@ export default class NavBar extends Vue {
 
   ActorRouteName = ActorRouteName;
   AdminRouteName = AdminRouteName;
+  EventRouteName = EventRouteName;
 
   @Watch('currentActor')
   async initializeListOfIdentities() {
@@ -167,6 +150,7 @@ export default class NavBar extends Vue {
   }
 
   async setIdentity(identity: IPerson) {
+    console.log('setIdentity');
     return await changeIdentity(this.$apollo.provider.defaultClient, identity);
   }
 }
@@ -175,10 +159,26 @@ export default class NavBar extends Vue {
 @import "../variables.scss";
 
 nav {
-  border-bottom: solid 1px #0a0a0a;
+  /*border-bottom: solid 1px #0a0a0a;*/
 
-  .navbar-item img {
-    max-height: 2.5em;
+  .navbar-dropdown .navbar-item {
+    cursor: pointer;
+
+    span {
+      display: inherit;
+    }
+
+    &.is-active {
+      background: $secondary;
+    }
+
+    img {
+      max-height: 2.5em;
+    }
+  }
+
+  .navbar-item.has-dropdown a.navbar-link figure {
+    margin-right: 0.75rem;
   }
 }
 </style>
diff --git a/js/src/views/Home.vue b/js/src/views/Home.vue
index 5e10d1595..880ba76c0 100644
--- a/js/src/views/Home.vue
+++ b/js/src/views/Home.vue
@@ -24,7 +24,6 @@
         <span>{{ $t('Create') }}</span>
         <b-icon icon="menu-down"></b-icon>
       </button>
-.organizerActor.id
       <b-dropdown-item aria-role="listitem">
         <router-link :to="{ name: RouteName.CREATE_EVENT }">{{ $t('Event') }}</router-link>
       </b-dropdown-item>
diff --git a/js/yarn.lock b/js/yarn.lock
index afb21515f..5a3bff89e 100644
--- a/js/yarn.lock
+++ b/js/yarn.lock
@@ -2193,9 +2193,9 @@ browserslist@^4.0.0, browserslist@^4.3.4, browserslist@^4.5.4, browserslist@^4.6
     node-releases "^1.1.29"
 
 buefy@^0.8.2:
-  version "0.8.2"
-  resolved "https://registry.yarnpkg.com/buefy/-/buefy-0.8.2.tgz#26bfc931c8c7fbe5a90d4b814a8205501eee816a"
-  integrity sha512-fS4sXYE0ge7fN5tP9k67j1fSCS/yxbTrnEhJ5MBt89gcbmVe5x8/SAXdADjx5W4SdERtjKjE9mzoIoRb+ZC29Q==
+  version "0.8.4"
+  resolved "https://registry.yarnpkg.com/buefy/-/buefy-0.8.4.tgz#0c62d559e63aee8a18876ff90056f9a8b90f686f"
+  integrity sha512-hDUUKbKxQmtYlo/IPH9H+ewEN6KulpDxfNFIPvO5z3ukYqEG29psW6oFbJGisZDEIYGxqE2jMPcBOOjm8LxJVQ==
   dependencies:
     bulma "0.7.5"
 
