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"