Skip to content

Instantly share code, notes, and snippets.

@evan4

evan4/toolbar

Created January 28, 2019 10:10
Show Gist options
  • Save evan4/1f1bd636d0d211b9a07419df3708da11 to your computer and use it in GitHub Desktop.
Save evan4/1f1bd636d0d211b9a07419df3708da11 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
toolbar
<template>
<div>
<!-- #4c3e39 - цвет -->
<v-toolbar
v-show="!loading"
clipped-left class="top-menu" style="z-index: 10">
<v-toolbar-side-icon to="/left_menu" @click="set_drawer_left_menu()"></v-toolbar-side-icon>
<v-layout style="height: 64px; margin: 0 24px" justify-space-between row>
<v-flex class="mr-2" style="background-color: #4C3F39; text-align: center" xs6>
<img style="height: 100%; padding: 12px 0" src="logo.png" alt="">
</v-flex>
<v-flex xs6>
<div style="height: 100%; padding: 12px 0" class="mr-4 top-socials">
<h3>Социальные сети</h3>
<v-layout row justify-space-between>
<v-menu offset-y @click.stop v-model="menu_vk">
<div slot="activator" class="cursor-pointer"><i style="font-size: 18px" class="fab fa-vk"></i></div>
<v-list left class="link-it">
<v-list-tile>
<v-list-tile-title>Сообщество</v-list-tile-title>
</v-list-tile>
<v-list-tile class="link-no-padding">
<v-list-tile-title>
<v-menu open-on-hover offset-x nudge-top="56">
<v-list-tile slot="activator">
<v-list-tile-title>Размещение вакансий</v-list-tile-title>
</v-list-tile>
<v-list class="link-it-dropdown">
<v-list-tile>
<v-list-tile-title>Москва</v-list-tile-title>
</v-list-tile>
<v-list-tile>
<v-list-tile-title>Санкт-Петербург</v-list-tile-title>
</v-list-tile>
<v-list-tile>
<v-list-tile-title>Екатеринбург</v-list-tile-title>
</v-list-tile>
</v-list>
</v-menu>
</v-list-tile-title>
</v-list-tile>
</v-list>
</v-menu>
<div class="cursor-pointer"><i style="font-size: 18px" class="fab fa-odnoklassniki-square"></i></div>
<div class="cursor-pointer"><i style="font-size: 18px" class="fab fa-facebook"></i></div>
<div class="cursor-pointer"><i style="font-size: 18px" class="fab fa-instagram"></i></div>
<div class="cursor-pointer"><i style="font-size: 18px" class="fab fa-twitter-square"></i></div>
<v-menu offset-y @click.stop v-model="menu_telegram">
<div slot="activator" class="cursor-pointer"><i style="font-size: 18px" class="fab fa-telegram"></i></div>
<v-list left class="link-it">
<v-list-tile>
<v-list-tile-title>Сообщество</v-list-tile-title>
</v-list-tile>
<v-list-tile class="link-no-padding">
<v-list-tile-title>
<v-menu open-on-hover offset-x nudge-top="56">
<v-list-tile slot="activator">
<v-list-tile-title>Размещение вакансий</v-list-tile-title>
</v-list-tile>
<v-list class="link-it-dropdown">
<v-list-tile>
<v-list-tile-title>Москва</v-list-tile-title>
</v-list-tile>
<v-list-tile>
<v-list-tile-title>Санкт-Петербург</v-list-tile-title>
</v-list-tile>
<v-list-tile>
<v-list-tile-title>Екатеринбург</v-list-tile-title>
</v-list-tile>
</v-list>
</v-menu>
</v-list-tile-title>
</v-list-tile>
</v-list>
</v-menu>
<div class="cursor-pointer"><i style="font-size: 18px" class="fab fa-youtube"></i></div>
<div class="cursor-pointer"><i style="font-size: 18px" class="fab fa-yandex"></i></div>
</v-layout>
</div>
</v-flex>
</v-layout>
<div class="city mr-4" style="min-width: 250px" flat :dark="dark" :light="light">
<v-autocomplete :items="cities" label="Выберите ваш город" color="none">
<v-slide-x-reverse-transition>
</v-slide-x-reverse-transition>
</v-autocomplete>
</div>
<v-tooltip class="mr-2" bottom>
<v-btn class="ml-0 mr-0 mb-0" slot="activator" icon>
<i class="fas fa-university fa-2x"></i>
</v-btn>
<span>
Обучение
</span>
</v-tooltip>
<router-link class="mr-2" to="/dialog_suggestions">
<v-tooltip bottom>
<v-btn class="ml-0 mr-0 mb-0" @click="dialog_fixes = true" slot="activator" icon>
<i class="fas fa-wrench fa-2x"></i>
</v-btn>
<span>
Исправления / Предложения
</span>
</v-tooltip>
</router-link>
<router-link class="mr-2" to="/contacts_jobni">
<v-tooltip bottom>
<v-layout slot="activator" style="min-width: 40px" align-center justify-center @click="dialogs_managers = true">
<img style="height: 40px; width: 40px; border-radius: 50%" src="sanya.jpg">
</v-layout>
<span>Связаться с нами</span>
</v-tooltip>
</router-link>
<router-link class="mr-2" to="/dialog_notifications">
<v-tooltip class="mr-2" bottom>
<v-badge overlap slot="activator">
<span slot="badge">32</span>
<v-btn class="mb-0 ml-0 mr-0" @click="dialog_notifications = true" icon>
<i class="far fa-bell fa-2x"></i>
</v-btn>
</v-badge>
<span>
Уведомления
</span>
</v-tooltip>
</router-link>
<router-link class="mr-2" to="/dialog_chat_worker">
<v-tooltip bottom>
<v-badge overlap slot="activator">
<span slot="badge">32</span>
<v-btn class="mb-0 ml-0 mr-0" @click="dialog_all_chats_worker = true" icon>
<i class="fas fa-envelope fa-2x"></i>
</v-btn>
</v-badge>
<span>
Чаты соискателя
</span>
</v-tooltip>
</router-link>
<router-link class="mr-2" to="/dialog_chat_employer">
<v-tooltip class="mr-2" bottom>
<v-badge overlap slot="activator">
<span slot="badge">32</span>
<v-btn class="mb-0 ml-0 mr-0" @click="dialog_all_chats_employer = true" icon>
<i class="fas fa-envelope fa-2x"></i>
</v-btn>
</v-badge>
<span>
Чаты работодателя
</span>
</v-tooltip>
</router-link>
<div style="margin-right: 12px">
<v-menu bottom offset-y v-model="menu_profile" :nudge-left="175">
<v-list-tile-avatar avatar slot="activator" >
<!-- <v-list-tile-avatar avatar @click="top_right_menu = true" slot="activator" > -->
<img src="sanya.jpg">
</v-list-tile-avatar>
<!-- <v-list class="top-menu-profile pa-0 auto" v-if="top_right_menu"> -->
<v-list class="top-menu-profile pa-0 auto">
<v-list-tile v-if="is_authorization === true">
<v-list-tile-title><span style="width: 32px; display: inline-block">ID:</span> 253245345</v-list-tile-title>
<div class="pr-2">
<v-btn class="ma-0" style="float: right"><i class="fas fa-copy"></i></v-btn>
</div>
</v-list-tile>
<v-list-tile v-if="is_authorization === true" @click.stop="">
<v-list-tile-title><span style="width: 32px; display: inline-block">REF:</span> 25327</v-list-tile-title>
<div class="pr-2">
<v-btn class="ma-0" style="float: right"><i class="fas fa-copy"></i></v-btn>
</div>
</v-list-tile>
<v-divider v-if="is_authorization === true" class="mx-2"></v-divider>
<v-list-tile v-if="is_authorization === true">
<v-list-tile-title>Реферальная программа</v-list-tile-title>
</v-list-tile>
<v-list-tile v-if="is_authorization === true">
<v-list-tile-title>Cashback</v-list-tile-title>
</v-list-tile>
<v-divider v-if="is_authorization === true" class="mx-2"></v-divider>
<router-link v-if="is_authorization === false" to="/authorization">
<v-list-tile>
<v-list-tile-title>Авторизация</v-list-tile-title>
</v-list-tile>
</router-link>
<router-link v-if="is_authorization === false" to="/registration">
<v-list-tile>
<v-list-tile-title>Регистрация</v-list-tile-title>
</v-list-tile>
</router-link>
<router-link v-if="is_authorization === false" to="/recovery_pass">
<v-list-tile>
<v-list-tile-title>Восстановление пароля</v-list-tile-title>
</v-list-tile>
</router-link>
<router-link v-if="is_authorization === true" to="/change_pass">
<v-list-tile>
<v-list-tile-title>Смена пароля</v-list-tile-title>
</v-list-tile>
</router-link>
<router-link v-if="is_authorization === true" to="/change_email">
<v-list-tile>
<v-list-tile-title>Смена почты</v-list-tile-title>
</v-list-tile>
</router-link>
<v-divider v-if="is_authorization === true" class="mx-2"></v-divider>
<v-list-tile v-if="is_authorization === true">
<v-list-tile-title>Профиль</v-list-tile-title>
</v-list-tile>
<v-list-tile v-if="is_authorization === true" @click="dark = !dark, light = !light">
<v-list-tile-title>Смена темы</v-list-tile-title>
</v-list-tile>
<v-divider v-if="is_authorization === true" class="mx-2"></v-divider>
<v-list-tile @click="exit()" v-if="is_authorization === true">
<v-list-tile-title>Выход</v-list-tile-title>
</v-list-tile>
</v-list>
</v-menu>
</div>
<v-toolbar-side-icon v-show="show_right_menu" @click.native="setVisibleRightMenu()" to="/right"></v-toolbar-side-icon>
</v-toolbar>
<div class="v-overlay v-overlay--active" v-show="drawer" @click="set_drawer()" style="z-index: 5"></div>
<div
style="position: absolute; z-index: 4; margin: 0 auto; top: 64px; width: 100%">
<main_search
@loaded="loaded"
v-show="!loading"
v-if="main_search"></main_search>
<card v-if="show_card" :change="get_change_card"></card>
</div>
<rotate-square2
style="position: fixed; top: 50%; left: 50%; width: 80px; height: 80px;"
v-if="loading"></rotate-square2>
</div>
</template>
<script>
import main_search from "../main_search/search"
import card from "../cards/main_card"
import {RotateSquare2} from 'vue-loading-spinner';
export default {
props: [],
components: {
main_search,
card,
RotateSquare2
},
data: () => ({
loading: true,
current_version: "12.7.1",
dark: false,
light: true,
// Топ меню
menu_vk: false,
menu_telegram: false,
cities: ["item 1", "item 2", "item 3"],
menu_profile: false,
//
// Затемнение при клике на меню
drawer: null,
// Для отображения правого меню
show_right_menu: true,
}),
updated() {
// alert("updated")
},
methods: {
loaded: function(){
this.loading = false;
},
// Открытие правого меню
setVisibleRightMenu() {
this.$store.dispatch('SET_V_RIGHT_MENU');
if (this.$store.getters.get_drawer_left_menu) {
this.$store.dispatch('set_drawer_left_menu');
}
if (this.$store.getters.get_drawer_left_menu || this.$store.getters.GET_V_RIGHT_MENU) {
this.drawer = true
} else {
this.drawer = false
}
},
// Открытие левого меню
set_drawer_left_menu() {
this.$store.dispatch('set_drawer_left_menu');
if (this.$store.getters.GET_V_RIGHT_MENU) {
this.$store.dispatch('SET_V_RIGHT_MENU');
}
if (this.$store.getters.get_drawer_left_menu || this.$store.getters.GET_V_RIGHT_MENU) {
this.drawer = true
} else {
this.drawer = false
}
},
// Проверка версии сайта
check_version(e) {
if (this.check_version != e) {
alert("Нажмите f5");
}
},
// Выход с сайта
exit() {
this.$store.dispatch('set_authorization', false);
},
// Затемнение
set_drawer() {
if (this.$store.getters.get_drawer_left_menu) {
this.$store.dispatch('set_drawer_left_menu');
}
if (this.$store.getters.GET_V_RIGHT_MENU) {
this.$store.dispatch('SET_V_RIGHT_MENU');
}
if (this.$store.getters.get_drawer_left_menu || this.$store.getters.GET_V_RIGHT_MENU) {
this.drawer = true
} else {
this.drawer = false
}
}
},
computed: {
// Авторизован ли?
is_authorization() {
return this.$store.getters.get_authorization;
},
// Отображение главного поиска
main_search() {
return this.$store.getters.get_main_search
},
// Отображение карточек
show_card() {
return this.$store.getters.get_show_card
},
// Изменение карточки
get_change_card() {
return this.$store.getters.get_change_card
},
},
watch: {
// Слежка за авторизацией
authorization: function() {
},
},
created(){
console.log('created');
},
mounted() {
console.log(new Date());
// axios
// .get('URL')
// .then(response => (check_version(response.data)));
// this.main_search = this.$store.getters.get_main_search;
}
}
</script>
<style>
.spinner[data-v-fa81853e]:after{
background: #FFC107;
}
</style>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment