Move navbar to buefy component
Signed-off-by: Thomas Citharel <tcit@tcit.fr>
This commit is contained in:
Thomas Citharel
parent
abf3a58657
commit
525e379c67
@ -1,5 +1,5 @@
|
||||
<!DOCTYPE html>
|
||||
<html class="has-navbar-fixed-top">
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
|
||||
@ -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>
|
||||
|
||||
<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>
|
||||
|
||||
<div class="navbar-menu" :class="{ 'is-active': showNavbar }">
|
||||
<div class="navbar-end">
|
||||
<div class="navbar-item">
|
||||
<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 />
|
||||
</div>
|
||||
</b-navbar-item>
|
||||
|
||||
<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-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>
|
||||
</a>
|
||||
</template>
|
||||
|
||||
<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 }">
|
||||
<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-24x24" v-if="identity.avatar">
|
||||
<img class="is-rounded" :src="identity.avatar.url">
|
||||
<figure class="image is-32x32" v-if="identity.avatar">
|
||||
<img class="is-rounded" :src="identity.avatar.url" alt="" />
|
||||
</figure>
|
||||
</div>
|
||||
|
||||
<div class="media-content">
|
||||
<h3>{{ identity.displayName() }}</h3>
|
||||
<span>{{ identity.displayName() }}</span>
|
||||
</div>
|
||||
</a>
|
||||
</span>
|
||||
|
||||
<hr class="navbar-divider">
|
||||
</div>
|
||||
</b-navbar-item>
|
||||
|
||||
<a class="navbar-item">
|
||||
|
||||
<b-navbar-item>
|
||||
<router-link :to="{ name: 'UpdateIdentity' }">{{ $t('My account') }}</router-link>
|
||||
</a>
|
||||
</b-navbar-item>
|
||||
|
||||
<a class="navbar-item">
|
||||
<b-navbar-item>
|
||||
<router-link :to="{ name: ActorRouteName.CREATE_GROUP }">{{ $t('Create group') }}</router-link>
|
||||
</a>
|
||||
</b-navbar-item>
|
||||
|
||||
<a class="navbar-item" v-if="currentUser.role === ICurrentUserRole.ADMINISTRATOR">
|
||||
<b-navbar-item v-if="currentUser.role === ICurrentUserRole.ADMINISTRATOR">
|
||||
<router-link :to="{ name: AdminRouteName.DASHBOARD }">{{ $t('Administration') }}</router-link>
|
||||
</a>
|
||||
</b-navbar-item>
|
||||
|
||||
<a class="navbar-item" v-on:click="logout()">{{ $t('Log out') }}</a>
|
||||
</div>
|
||||
</div>
|
||||
<b-navbar-item v-on:click="logout()">{{ $t('Log out') }}</b-navbar-item>
|
||||
</b-navbar-dropdown>
|
||||
|
||||
<div class="navbar-item" v-else>
|
||||
<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-primary" :to="{ name: 'Login' }">{{ $t('Log in') }}</router-link>
|
||||
<router-link class="button is-light" :to="{ name: 'Login' }">{{ $t('Log in') }}</router-link>
|
||||
</div>
|
||||
</div>
|
||||
</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 {
|
||||
.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>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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"
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user