photoprism/frontend/src/component/app-navigation.vue

80 lines
2.4 KiB
Vue
Raw Normal View History

<template>
<div class="app-navigation">
<b-navbar toggleable="md" type="dark" variant="dark">
<b-navbar-toggle target="nav_collapse"></b-navbar-toggle>
<b-navbar-brand href="#">PhotoPrism</b-navbar-brand>
<b-collapse is-nav id="nav_collapse">
<b-navbar-nav>
<b-nav-item href="#">Browse</b-nav-item>
<b-nav-item href="#">Import</b-nav-item>
<b-nav-item href="#">Export</b-nav-item>
</b-navbar-nav>
<!-- Right aligned nav items -->
<b-navbar-nav class="ml-auto">
<b-nav-form>
<b-form-input size="sm" class="mr-sm-2" type="text" placeholder="Search"/>
<b-button size="sm" class="my-2 my-sm-0" type="submit">Search</b-button>
</b-nav-form>
<b-nav-item-dropdown text="Lang" right>
<b-dropdown-item href="#">EN</b-dropdown-item>
<b-dropdown-item href="#">ES</b-dropdown-item>
<b-dropdown-item href="#">RU</b-dropdown-item>
<b-dropdown-item href="#">FA</b-dropdown-item>
</b-nav-item-dropdown>
<b-nav-item-dropdown right>
<!-- Using button-content slot -->
<template slot="button-content">
User
</template>
<b-dropdown-item href="#">Profile</b-dropdown-item>
<b-dropdown-item href="#">Signout</b-dropdown-item>
</b-nav-item-dropdown>
</b-navbar-nav>
</b-collapse>
</b-navbar>
</div>
</template>
<script>
export default {
data() {
return {};
},
methods: {
toggleLeftSidenav() {
this.$refs.leftSidenav.toggle();
},
open(ref) {
},
close(ref) {
},
login() {
this.$refs.loginDialog.open();
},
register() {
this.$refs.registerDialog.open();
},
logout() {
this.$session.logout();
},
}
};
</script>
<style scoped>
</style>