@burh/nuxt-core 1.0.18 → 1.0.20

package/components/layouts/burh-ds/navbar/GlobalNavbar.vue

@@ -1,535 +1,535 @@
-<template>
-  <base-nav
-    v-model="showMenu"
-    container-classes="container-fluid container-fluid--bu"
-    class="border-bottom navbar-animated navbar-horizontal navbar-main"
-    :class="navbarColor"
-    expand="lg"
-  >
-
-  <!-- SLOT BRAND -->
-    <div slot="brand" class="navbar-wrapper">
-      <nuxt-link class="navbar-brand d-flex" to="/">
-        <img :src="logoFull" class="navbar-brand-img navbar-brand-img--full" alt="BURH: Suas vagas">
-      </nuxt-link>
-    </div>
-
-  <!-- SLOT DEFAULT -->
-    <template>
-       <div class="navbar-collapse-header">
-         <div class="row">
-           <div class="col-6 collapse-brand">
-             <nuxt-link to="/">
-               <img :src="logoFull" class="navbar-brand-img navbar-brand-img--full" alt="BURH: Suas vagas">
-             </nuxt-link>
-           </div>
-           <div class="col-6 collapse-close">
-             <button type="button" class="navbar-toggler" @click="showMenu = false">
-               <span></span>
-               <span></span>
-             </button>
-           </div>
-         </div>
-       </div>
-    <!-- Search form -->
-        <form slot="brand" v-if="navbarSearch" class="navbar-search form-inline mr-sm-auto" v-on:submit.prevent="search()"
-              :class="{'navbar-search-light': type === 'default', 'navbar-search-dark': type === 'light'}"
-              id="navbar-search-main">
-          <div class="form-group mb-0">
-            <div class="input-group input-group-alternative input-group-merge">
-              <div class="input-group-prepend">
-                <span class="input-group-text"><i class="fas fa-search"></i></span>
-              </div>
-              <input class="form-control form-control--focus" placeholder="Procurar vaga de emprego" type="text" v-model='menuSearch' :class='clazz'>
-            </div>
-          </div>
-          <button type="button" class="close" data-action="search-close" data-target="#navbar-search-main"
-                  aria-label="Close">
-            <span aria-hidden="true">×</span>
-          </button>
-        </form>
-    </template>
-
-      <!-- NOTIFICATIONS -->
-    <ul class="navbar-nav navbar-nav--menu align-items-center ml-md-auto">
-      <base-dropdown v-if="notifications.show && currentUser != null"
-                     class="nav-item"
-                     tag="li"
-                     title-classes="nav-link"
-                     title-tag="a"
-                     icon="nav-icon ni ni-bell-55"
-                     menu-classes="dropdown-menu-xl dropdown-menu-right py-0 overflow-hidden">
-        <template>
-          <!-- Dropdown header -->
-          <div class="px-3 py-3">
-            <h6 class="text-sm text-muted m-0">Você tem <strong class="text-primary">{{unreadNotifications(notifications.items)}}</strong> avisos não lidos.</h6>
-          </div>
-          <!-- List group -->
-          <div class="list-group list-group-flush">
-            <a v-for="notification in notifications.items" v-bind:key="notification.id" href="#!" class="list-group-item list-group-item-action" :class="{ 'bg-gray': !notification.read }">
-              <div class="row align-items-center">
-                <div class="col-auto">
-                  <!-- Avatar -->
-                  <img alt="A" :src="notification.avatar" class="avatar rounded-circle">
-                </div>
-                <div class="col ml--2">
-                  <div class="d-flex justify-content-between align-items-center">
-                    <div>
-                      <h4 class="mb-0 text-sm">{{notification.from}}</h4>
-                    </div>
-                    <div class="text-right text-muted">
-                      <small>{{fromNow(notification.time)}}</small>
-                    </div>
-                  </div>
-                  <p class="text-sm mb-0">{{notification.title}}</p>
-                </div>
-              </div>
-            </a>
-
-          </div>
-          <!-- View all -->
-          <a href="#!" class="dropdown-item text-center text-primary font-weight-bold py-3">Ver todos</a>
-        </template>
-      </base-dropdown>
-
-      <base-dropdown v-if="currentUser != null && currentCompany != null" menu-classes="dropdown-menu-lg dropdown-menu-dark bg-default dropdown-menu-right"
-                     class="nav-item"
-                     tag="li"
-                     title="Aplicativos"
-                     title-tag="a"
-                     title-classes="nav-link"
-                     icon="nav-icon ni ni-ungroup">
-        <template>
-          <div class="row shortcuts px-4">
-            <a href="#!" class="col-4 shortcut-item">
-                    <span class="shortcut-media avatar rounded-circle bg-gradient-red">
-                      <i class="ni ni-calendar-grid-58"></i>
-                    </span>
-              <small>Calendar</small>
-            </a>
-            <a href="#!" class="col-4 shortcut-item">
-                    <span class="shortcut-media avatar rounded-circle bg-gradient-orange">
-                      <i class="ni ni-email-83"></i>
-                    </span>
-              <small>Email</small>
-            </a>
-            <a href="#!" class="col-4 shortcut-item">
-                    <span class="shortcut-media avatar rounded-circle bg-gradient-info">
-                      <i class="ni ni-credit-card"></i>
-                    </span>
-              <small>Payments</small>
-            </a>
-            <a href="#!" class="col-4 shortcut-item">
-                    <span class="shortcut-media avatar rounded-circle bg-gradient-green">
-                      <i class="ni ni-books"></i>
-                    </span>
-              <small>Reports</small>
-            </a>
-            <a href="#!" class="col-4 shortcut-item">
-                    <span class="shortcut-media avatar rounded-circle bg-gradient-purple">
-                      <i class="ni ni-pin-3"></i>
-                    </span>
-              <small>Maps</small>
-            </a>
-            <a href="#!" class="col-4 shortcut-item">
-                    <span class="shortcut-media avatar rounded-circle bg-gradient-yellow">
-                      <i class="ni ni-basket"></i>
-                    </span>
-              <small>Shop</small>
-            </a>
-          </div>
-        </template>
-      </base-dropdown>
-
-      <template v-if="currentUser != null">
-        <li class="nav-item">
-          <a href="#" class="nav-link" v-on:click.prevent="$router.push('/')">Início</a>
-        </li>
-        <li class="nav-item" v-if="currentCompany == null">
-          <a href="#" class="nav-link" v-on:click.prevent="$router.push('/meu-burh')">Meu Burh</a>
-        </li>
-      </template>
-
-      <template v-if="currentUser == null">
-        <!-- <li class="nav-item">
-          <a href="#" class="nav-link">Como funciona?</a>
-        </li> -->
-        <li class="nav-item">
-          <a href="https://business.burh.com.br/" class="nav-link">Empresas / Anunciar Vagas</a>
-        </li>
-        <!-- <li class="nav-item">
-          <a href="https://blog.burh.com.br/" target="_BLANK" class="nav-link">Blog</a>
-        </li> -->
-        <li class="nav-item">
-          <hr class="d-lg-none mt-3 mb-4">
-          <button class="btn btn-primary btn-block mb-0 mt-0" @click="toLogin()">
-            Entrar
-          </button>
-        </li>
-      </template>
-    </ul>
-
-    <!-- SLOT USER -->
-    <div slot="user" v-if="currentUser != null">
-      <base-dropdown menu-on-right
-                class="nav-item"
-                tag="li"
-                title-tag="a"
-                title-classes="nav-link pr-0">
-        <a href="#" class="nav-link pr-0" @click.prevent slot="title-container">
-          <div class="media align-items-center">
-
-            <span class="avatar avatar-sm rounded-circle">
-
-              <img
-                v-if="currentCompany == null && currentUser.avatar != null && currentUser.avatar != ''"
-                :alt="currentUser.name.charAt(0) + currentUser.last_name.split(' ')[0].charAt(0)"
-                :src="currentUser.avatar">
-
-              <img
-                v-if="currentCompany != null && currentCompany.logo != null && currentCompany.logo != ''"
-                :alt="currentCompany.name.charAt(0)"
-                :src="currentCompany.logo">
-
-              <template v-if="currentCompany == null && currentUser.avatar == null || currentUser.avatar == ''">
-                {{currentUser.name.charAt(0)}}{{currentUser.last_name.split(' ')[0].charAt(0)}}
-              </template>
-
-              <template v-if="currentCompany != null && (currentCompany.logo == null || currentCompany.logo.trim() == '')">
-                {{currentCompany.name.charAt(0)}}
-              </template>
-
-            </span>
-
-            <div class="media-body ml-2 d-none d-lg-block">
-              <span class="mb-0 text-sm font-weight-bold">
-                <template v-if="currentCompany == null">
-                  {{currentUser.name}} {{currentUser.last_name.charAt(0)}}.
-                </template>
-                <template v-if="currentCompany != null">
-                  {{currentCompany.name}}
-                </template>
-              </span>
-            </div>
-          </div>
-        </a>
-        <template>
-          <h6 class="dropdown-header">Entrar como</h6>
-          <template v-if="currentCompany != null">
-
-            <a href="#" class="dropdown-item" @click.prevent="changeToUserMode($event);">
-              <span class="avatar avatar-sm rounded-circle">
-                <img
-                  v-if="currentCompany == null && currentUser.avatar != null && currentUser.avatar != ''"
-                  :alt="currentUser.name.charAt(0) + currentUser.last_name.split(' ')[0].charAt(0)"
-                  :src="currentUser.avatar">
-
-                <template v-if="currentCompany == null && currentUser.avatar == null || currentUser.avatar == ''">
-                  {{currentUser.name.charAt(0)}}{{currentUser.last_name.split(' ')[0].charAt(0)}}
-                </template>
-              </span>
-              <span>{{currentUser.name}}</span>
-            </a>
-          </template>
-
-          <a v-for="company in notCurrentCompany()" :key="company.id" href="javascrit:void(0)" class="dropdown-item" @click.prevent="changeToCompanyMode(company);">
-            <span class="avatar avatar-sm rounded-circle">
-
-              <img
-                v-if="company.logo != null && company.logo != ''"
-                :alt="company.name.charAt(0)"
-                :src="company.logo">
-
-              <template v-if="!company.company_mode && company.logo == null || company.logo == ''">
-                {{company.name.charAt(0)}}
-              </template>
-            </span>
-            <span>{{company.name}}</span>
-          </a>
-
-          <template v-if="currentCompany != null">
-            <div class="dropdown-divider"></div>
-            <h6 class="dropdown-header">Minha empresa</h6>
-            <a href="#!" class="dropdown-item">Anunciar Vaga</a>
-            <a href="#!" class="dropdown-item">Perfil da Empresa</a>
-            <a href="#!" class="dropdown-item">Editar Empresa</a>
-            <a href="#!" class="dropdown-item d-flex align-items-center w-100">
-              <span>Blog de RH</span> <badge rounded type="primary" class="ml-auto">Novo</badge>
-            </a>
-
-            <div class="dropdown-divider"></div>
-            <h6 class="dropdown-header">Configurações</h6>
-            <a href="#!" class="dropdown-item">Sua Conta</a>
-            <a href="#!" class="dropdown-item">Equipe</a>
-            <a href="#!" class="dropdown-item">Avisos & Notificações</a>
-            <a href="#!" class="dropdown-item">Seu Plano</a>
-          </template>
-
-          <template v-if="currentCompany == null">
-            <div class="dropdown-divider"></div>
-            <h6 class="dropdown-header">Meu Burh</h6>
-            <a href="#" class="dropdown-item" v-on:click.prevent="$router.push(`/${currentUser.slug}`)">Meu perfil</a>
-            <a href="#" class="dropdown-item" v-on:click.prevent="$router.push('/configuracoes')">Configurações</a>
-          </template>
-
-          <div class="dropdown-divider"></div>
-          <a href="#!" class="dropdown-item" v-on:click.prevent="logout()">
-            <i class="fas fa-door-open"></i>
-            <span>Sair</span>
-          </a>
-        </template>
-      </base-dropdown>
-    </div>
-
-    <slot></slot>
-  </base-nav>
-</template>
-<script>
-  import { CollapseTransition } from 'vue2-transitions';
-  // import BaseNav from '@/components/argon-core/Navbar/BaseNav.vue';
-  import BaseNav from '@/components/burh-ds/Navbar/BaseNav.vue';
-  import Modal from '@/components/argon-core/Modal.vue';
-  import moment from 'moment';
-  import 'moment/locale/pt-br';
-  import * as _ from 'lodash';
-  export default {
-    components: {
-      CollapseTransition,
-      BaseNav,
-      Modal
-    },
-    props: {
-      type: {
-        type: String,
-        default: 'default', // default|light
-        description: 'Look of the dashboard navbar. Default (Green) or light (gray)'
-      },
-      logoMini: {
-        type: String,
-        default: '/img/content/carreiras/logo-laponia.jpg',
-        description: 'Logo for scrolled navbar'
-      },
-      menuOptions: {
-        type: String,
-        default: null,
-        description: ''
-      },
-      logoFull: {
-        type: String,
-        default: () => '/img/brand/burh-imagotipo.svg',
-        description: 'Brand da navbar'
-      },
-      companySlug: String,
-      currentUser: {
-        type: Object,
-        default: () => null,
-        description: 'Usuário logado atual'
-      },
-      currentCompany: {
-        type: Object,
-        default: () => null,
-        description: 'Empresa selecionada atual'
-      },
-      notifications: {
-        type: Object,
-        default: () => {
-          return {
-            show: false,
-            items: []
-          }
-        }
-      },
-      navbarSearch: {
-          type: Boolean,
-          description: 'get props objects to stay dynamic',
-          default: () => true
-        },
-      navbarColor: {
-        type: String,
-        default: () => 'bg-white navbar-light', //
-        description: 'Cor do navbar [atual]'
-      },
-    },
-    computed: {
-      routeName() {
-        const { name } = this.$route;
-        return this.capitalizeFirstLetter(name);
-      },
-      clazz: function() {
-        var clzz = 'control-form';
-        if (this.focusSearchControl == false) {
-          clzz += ' only-text';
-        }
-        return clzz;
-      }
-    },
-    data() {
-      return {
-        showMenu: false,
-        activeNotifications: false,
-        showMenu: false,
-        searchModalVisible: false,
-        searchQuery: '',
-        menuSearch: '',
-        focusSearchControl: false,
-        baseURL: process.env.baseAppUrl,
-        isTyping: false
-      };
-    },
-    methods: {
-      toLogin() {
-        this.$router.push('/entrar?rollback=' + this.$route.fullPath);
-      },
-      search() {
-        // this.$router.push({
-        //   path: `/busca?term=${this.menuSearch}&page=1`
-        // });
-        window.location = `/busca?term=${this.menuSearch}&page=1`;
-      },
-
-      capitalizeFirstLetter(string) {
-        return string.charAt(0).toUpperCase() + string.slice(1);
-      },
-      toggleNotificationDropDown() {
-        this.activeNotifications = !this.activeNotifications;
-      },
-      closeDropDown() {
-        this.activeNotifications = false;
-      },
-      toggleSidebar() {
-        this.$sidebar.displaySidebar(!this.$sidebar.showSidebar);
-      },
-      hideSidebar() {
-        this.$sidebar.displaySidebar(false);
-      },
-      handleSCroll (event) {
-        // let header = document.querySelector('[data-menu="fixed"]');
-        // let page = document.querySelector('html');
-        // let screenHeight = window.innerHeight;
-        // if (window.scrollY > screenHeight && !header.className.includes('navbar-main--mini') && header.length > 0) {
-        //   header.classList.add('navbar-main--mini');
-        //   //page.classList.add('menu-fixed');
-        // } else if (window.scrollY < screenHeight) {
-        //   header.classList.remove('navbar-main--mini');
-        //   //page.classList.remove('menu-fixed');
-        //   console.log('final');
-        // }
-      },
-      onFocus: function(event) {
-        event.target.select();
-        this.focusSearchControl = true;
-      },
-      onBlur: function(event) {
-        this.focusSearchControl = false;
-      },
-      closeMenu() {
-        document.body.classList.remove('nav-open');
-        this.showMenu = false;
-      },
-
-      unreadNotifications(arr) {
-        return arr.filter((item) => {
-          return item.read == false
-        }).length;
-      },
-
-      fromNow(date) {
-        return moment(date).locale('pt-BR').fromNow();
-      },
-
-      changeToUserMode(e) {
-        e.preventDefault();
-        this.$store.commit('localStorage/setCompany', null);
-      },
-
-      changeToCompanyMode(company) {
-        // this.$store.commit('localStorage/setCompany', company);
-        let token = this.$store.state.localStorage.token != null && this.$store.state.localStorage.token != '' ? '?auth=' + this.$store.state.localStorage.token : '';
-        // Setando cookie do companyId para uso no App Ractive
-        document.cookie = 'shiftCompanyId='+company.id+'; domain=burh.com.br; path=/';
-        // window.location = 'https://business.burh.com.br/entrar?auth=' + this.$store.state.localStorage.token;
-
-        let setToken = this.$store.state.localStorage.token != null && this.$store.state.localStorage.token != '' ? '/entrar?auth=' + this.$store.state.localStorage.token : '';
-        var enviroment = process.env.NODE_ENV != null ? process.env.NODE_ENV.trim() : 'development';
-        window.location.href = enviroment == 'development' ? process.env.baseLocalAppUrl + setToken : 'https://business.burh.com.br' + setToken;
-        // window.location = 'https://business.burh.com.br/entrar' + this.$route.query.auth;
-      },
-
-      async logout() {
-        await this.$axios.post(process.env.routes.api.logLogout, {},{
-          headers: {
-            Authorization: `Bearer ${this.$store.state.localStorage.token}`
-          }
-        });
-
-        await this.$axios.get(process.env.routes.api.logout, {
-          headers: {
-            Authorization: `Bearer ${this.$store.state.localStorage.token}`
-          }
-        });
-
-        this.$logout();
-      },
-
-      notCurrentCompany() {
-        if(this.currentCompany == null) {
-          return this.currentUser.companies
-        }
-
-        return this.currentUser.companies.filter((company) => {
-          return company.id != this.currentCompany.id
-        });
-      }
-    },
-    watch: {
-      '$route.path'(newRoute, oldRoute) {
-        if (this.showMenu) {
-          this.closeMenu();
-        }
-
-        if(this.navbarSearch && newRoute != '/busca'){
-          this.menuSearch = ''
-        } else {
-          this.menuSearch = this.$route.query.term
-        }
-
-      }
-    },
-    mounted () {
-      window.addEventListener('scroll', this.handleSCroll);
-      let header = document.querySelector('[data-menu="fixed"]');
-      let page = document.querySelector('html');
-
-      if (header) {
-        page.classList.remove('menu-fixed');
-      }
-
-      if(this.$route.path == '/busca') {
-        this.menuSearch = this.$route.query.term
-      }
-
-    },
-    created() {
-
-    },
-    destroyed () {
-      window.removeEventListener('scroll', this.handleSCroll);
-    }
-  };
-</script>
-<style lang="scss">
-@import "./assets/sass/burh-ds/variables/colors";
-
-.navbar {
-  .navbar-search-light {
-    &--focus {
-      box-shadow: 0 0 .5rem 0 darken($primary, 20%);
-    }
-  }
-  .navbar-search-dark {
-    &--focus {
-      box-shadow: 0 0 2rem 0 $primary;
-    }
-  }
-}
-</style>
+<template>
+  <base-nav
+    v-model="showMenu"
+    container-classes="container-fluid container-fluid--bu"
+    class="border-bottom navbar-animated navbar-horizontal navbar-main"
+    :class="navbarColor"
+    expand="lg"
+  >
+
+  <!-- SLOT BRAND -->
+    <div slot="brand" class="navbar-wrapper">
+      <nuxt-link class="navbar-brand d-flex" to="/">
+        <img :src="logoFull" class="navbar-brand-img navbar-brand-img--full" alt="BURH: Suas vagas">
+      </nuxt-link>
+    </div>
+
+  <!-- SLOT DEFAULT -->
+    <template>
+       <div class="navbar-collapse-header">
+         <div class="row">
+           <div class="col-6 collapse-brand">
+             <nuxt-link to="/">
+               <img :src="logoFull" class="navbar-brand-img navbar-brand-img--full" alt="BURH: Suas vagas">
+             </nuxt-link>
+           </div>
+           <div class="col-6 collapse-close">
+             <button type="button" class="navbar-toggler" @click="showMenu = false">
+               <span></span>
+               <span></span>
+             </button>
+           </div>
+         </div>
+       </div>
+    <!-- Search form -->
+        <form slot="brand" v-if="navbarSearch" class="navbar-search form-inline mr-sm-auto" v-on:submit.prevent="search()"
+              :class="{'navbar-search-light': type === 'default', 'navbar-search-dark': type === 'light'}"
+              id="navbar-search-main">
+          <div class="form-group mb-0">
+            <div class="input-group input-group-alternative input-group-merge">
+              <div class="input-group-prepend">
+                <span class="input-group-text"><i class="fas fa-search"></i></span>
+              </div>
+              <input class="form-control form-control--focus" placeholder="Procurar vaga de emprego" type="text" v-model='menuSearch' :class='clazz'>
+            </div>
+          </div>
+          <button type="button" class="close" data-action="search-close" data-target="#navbar-search-main"
+                  aria-label="Close">
+            <span aria-hidden="true">×</span>
+          </button>
+        </form>
+    </template>
+
+      <!-- NOTIFICATIONS -->
+    <ul class="navbar-nav navbar-nav--menu align-items-center ml-md-auto">
+      <base-dropdown v-if="notifications.show && currentUser != null"
+                     class="nav-item"
+                     tag="li"
+                     title-classes="nav-link"
+                     title-tag="a"
+                     icon="nav-icon ni ni-bell-55"
+                     menu-classes="dropdown-menu-xl dropdown-menu-right py-0 overflow-hidden">
+        <template>
+          <!-- Dropdown header -->
+          <div class="px-3 py-3">
+            <h6 class="text-sm text-muted m-0">Você tem <strong class="text-primary">{{unreadNotifications(notifications.items)}}</strong> avisos não lidos.</h6>
+          </div>
+          <!-- List group -->
+          <div class="list-group list-group-flush">
+            <a v-for="notification in notifications.items" v-bind:key="notification.id" href="#!" class="list-group-item list-group-item-action" :class="{ 'bg-gray': !notification.read }">
+              <div class="row align-items-center">
+                <div class="col-auto">
+                  <!-- Avatar -->
+                  <img alt="A" :src="notification.avatar" class="avatar rounded-circle">
+                </div>
+                <div class="col ml--2">
+                  <div class="d-flex justify-content-between align-items-center">
+                    <div>
+                      <h4 class="mb-0 text-sm">{{notification.from}}</h4>
+                    </div>
+                    <div class="text-right text-muted">
+                      <small>{{fromNow(notification.time)}}</small>
+                    </div>
+                  </div>
+                  <p class="text-sm mb-0">{{notification.title}}</p>
+                </div>
+              </div>
+            </a>
+
+          </div>
+          <!-- View all -->
+          <a href="#!" class="dropdown-item text-center text-primary font-weight-bold py-3">Ver todos</a>
+        </template>
+      </base-dropdown>
+
+      <base-dropdown v-if="currentUser != null && currentCompany != null" menu-classes="dropdown-menu-lg dropdown-menu-dark bg-default dropdown-menu-right"
+                     class="nav-item"
+                     tag="li"
+                     title="Aplicativos"
+                     title-tag="a"
+                     title-classes="nav-link"
+                     icon="nav-icon ni ni-ungroup">
+        <template>
+          <div class="row shortcuts px-4">
+            <a href="#!" class="col-4 shortcut-item">
+                    <span class="shortcut-media avatar rounded-circle bg-gradient-red">
+                      <i class="ni ni-calendar-grid-58"></i>
+                    </span>
+              <small>Calendar</small>
+            </a>
+            <a href="#!" class="col-4 shortcut-item">
+                    <span class="shortcut-media avatar rounded-circle bg-gradient-orange">
+                      <i class="ni ni-email-83"></i>
+                    </span>
+              <small>Email</small>
+            </a>
+            <a href="#!" class="col-4 shortcut-item">
+                    <span class="shortcut-media avatar rounded-circle bg-gradient-info">
+                      <i class="ni ni-credit-card"></i>
+                    </span>
+              <small>Payments</small>
+            </a>
+            <a href="#!" class="col-4 shortcut-item">
+                    <span class="shortcut-media avatar rounded-circle bg-gradient-green">
+                      <i class="ni ni-books"></i>
+                    </span>
+              <small>Reports</small>
+            </a>
+            <a href="#!" class="col-4 shortcut-item">
+                    <span class="shortcut-media avatar rounded-circle bg-gradient-purple">
+                      <i class="ni ni-pin-3"></i>
+                    </span>
+              <small>Maps</small>
+            </a>
+            <a href="#!" class="col-4 shortcut-item">
+                    <span class="shortcut-media avatar rounded-circle bg-gradient-yellow">
+                      <i class="ni ni-basket"></i>
+                    </span>
+              <small>Shop</small>
+            </a>
+          </div>
+        </template>
+      </base-dropdown>
+
+      <template v-if="currentUser != null">
+        <li class="nav-item">
+          <a href="#" class="nav-link" v-on:click.prevent="$router.push('/')">Início</a>
+        </li>
+        <li class="nav-item" v-if="currentCompany == null">
+          <a href="#" class="nav-link" v-on:click.prevent="$router.push('/meu-burh')">Meu Burh</a>
+        </li>
+      </template>
+
+      <template v-if="currentUser == null">
+        <!-- <li class="nav-item">
+          <a href="#" class="nav-link">Como funciona?</a>
+        </li> -->
+        <li class="nav-item">
+          <a href="https://business.burh.com.br/" class="nav-link">Empresas / Anunciar Vagas</a>
+        </li>
+        <!-- <li class="nav-item">
+          <a href="https://blog.burh.com.br/" target="_BLANK" class="nav-link">Blog</a>
+        </li> -->
+        <li class="nav-item">
+          <hr class="d-lg-none mt-3 mb-4">
+          <button class="btn btn-primary btn-block mb-0 mt-0" @click="toLogin()">
+            Entrar
+          </button>
+        </li>
+      </template>
+    </ul>
+
+    <!-- SLOT USER -->
+    <div slot="user" v-if="currentUser != null">
+      <base-dropdown menu-on-right
+                class="nav-item"
+                tag="li"
+                title-tag="a"
+                title-classes="nav-link pr-0">
+        <a href="#" class="nav-link pr-0" @click.prevent slot="title-container">
+          <div class="media align-items-center">
+
+            <span class="avatar avatar-sm rounded-circle">
+
+              <img
+                v-if="currentCompany == null && currentUser.avatar != null && currentUser.avatar != ''"
+                :alt="currentUser.name.charAt(0) + currentUser.last_name.split(' ')[0].charAt(0)"
+                :src="currentUser.avatar">
+
+              <img
+                v-if="currentCompany != null && currentCompany.logo != null && currentCompany.logo != ''"
+                :alt="currentCompany.name.charAt(0)"
+                :src="currentCompany.logo">
+
+              <template v-if="currentCompany == null && currentUser.avatar == null || currentUser.avatar == ''">
+                {{currentUser.name.charAt(0)}}{{currentUser.last_name.split(' ')[0].charAt(0)}}
+              </template>
+
+              <template v-if="currentCompany != null && (currentCompany.logo == null || currentCompany.logo.trim() == '')">
+                {{currentCompany.name.charAt(0)}}
+              </template>
+
+            </span>
+
+            <div class="media-body ml-2 d-none d-lg-block">
+              <span class="mb-0 text-sm font-weight-bold">
+                <template v-if="currentCompany == null">
+                  {{currentUser.name}} {{currentUser.last_name.charAt(0)}}.
+                </template>
+                <template v-if="currentCompany != null">
+                  {{currentCompany.name}}
+                </template>
+              </span>
+            </div>
+          </div>
+        </a>
+        <template>
+          <h6 class="dropdown-header">Entrar como</h6>
+          <template v-if="currentCompany != null">
+
+            <a href="#" class="dropdown-item" @click.prevent="changeToUserMode($event);">
+              <span class="avatar avatar-sm rounded-circle">
+                <img
+                  v-if="currentCompany == null && currentUser.avatar != null && currentUser.avatar != ''"
+                  :alt="currentUser.name.charAt(0) + currentUser.last_name.split(' ')[0].charAt(0)"
+                  :src="currentUser.avatar">
+
+                <template v-if="currentCompany == null && currentUser.avatar == null || currentUser.avatar == ''">
+                  {{currentUser.name.charAt(0)}}{{currentUser.last_name.split(' ')[0].charAt(0)}}
+                </template>
+              </span>
+              <span>{{currentUser.name}}</span>
+            </a>
+          </template>
+
+          <a v-for="company in notCurrentCompany()" :key="company.id" href="javascrit:void(0)" class="dropdown-item" @click.prevent="changeToCompanyMode(company);">
+            <span class="avatar avatar-sm rounded-circle">
+
+              <img
+                v-if="company.logo != null && company.logo != ''"
+                :alt="company.name.charAt(0)"
+                :src="company.logo">
+
+              <template v-if="!company.company_mode && company.logo == null || company.logo == ''">
+                {{company.name.charAt(0)}}
+              </template>
+            </span>
+            <span>{{company.name}}</span>
+          </a>
+
+          <template v-if="currentCompany != null">
+            <div class="dropdown-divider"></div>
+            <h6 class="dropdown-header">Minha empresa</h6>
+            <a href="#!" class="dropdown-item">Anunciar Vaga</a>
+            <a href="#!" class="dropdown-item">Perfil da Empresa</a>
+            <a href="#!" class="dropdown-item">Editar Empresa</a>
+            <a href="#!" class="dropdown-item d-flex align-items-center w-100">
+              <span>Blog de RH</span> <badge rounded type="primary" class="ml-auto">Novo</badge>
+            </a>
+
+            <div class="dropdown-divider"></div>
+            <h6 class="dropdown-header">Configurações</h6>
+            <a href="#!" class="dropdown-item">Sua Conta</a>
+            <a href="#!" class="dropdown-item">Equipe</a>
+            <a href="#!" class="dropdown-item">Avisos & Notificações</a>
+            <a href="#!" class="dropdown-item">Seu Plano</a>
+          </template>
+
+          <template v-if="currentCompany == null">
+            <div class="dropdown-divider"></div>
+            <h6 class="dropdown-header">Meu Burh</h6>
+            <a href="#" class="dropdown-item" v-on:click.prevent="$router.push(`/${currentUser.slug}`)">Meu perfil</a>
+            <a href="#" class="dropdown-item" v-on:click.prevent="$router.push('/configuracoes')">Configurações</a>
+          </template>
+
+          <div class="dropdown-divider"></div>
+          <a href="#!" class="dropdown-item" v-on:click.prevent="logout()">
+            <i class="fas fa-door-open"></i>
+            <span>Sair</span>
+          </a>
+        </template>
+      </base-dropdown>
+    </div>
+
+    <slot></slot>
+  </base-nav>
+</template>
+<script>
+  import { CollapseTransition } from 'vue2-transitions';
+  // import BaseNav from '@/components/argon-core/Navbar/BaseNav.vue';
+  import BaseNav from '@/components/burh-ds/Navbar/BaseNav.vue';
+  import Modal from '@/components/argon-core/Modal.vue';
+  import moment from 'moment';
+  import 'moment/locale/pt-br';
+  import * as _ from 'lodash';
+  export default {
+    components: {
+      CollapseTransition,
+      BaseNav,
+      Modal
+    },
+    props: {
+      type: {
+        type: String,
+        default: 'default', // default|light
+        description: 'Look of the dashboard navbar. Default (Green) or light (gray)'
+      },
+      logoMini: {
+        type: String,
+        default: '/img/content/carreiras/logo-laponia.jpg',
+        description: 'Logo for scrolled navbar'
+      },
+      menuOptions: {
+        type: String,
+        default: null,
+        description: ''
+      },
+      logoFull: {
+        type: String,
+        default: () => '/img/brand/burh-imagotipo.svg',
+        description: 'Brand da navbar'
+      },
+      companySlug: String,
+      currentUser: {
+        type: Object,
+        default: () => null,
+        description: 'Usuário logado atual'
+      },
+      currentCompany: {
+        type: Object,
+        default: () => null,
+        description: 'Empresa selecionada atual'
+      },
+      notifications: {
+        type: Object,
+        default: () => {
+          return {
+            show: false,
+            items: []
+          }
+        }
+      },
+      navbarSearch: {
+          type: Boolean,
+          description: 'get props objects to stay dynamic',
+          default: () => true
+        },
+      navbarColor: {
+        type: String,
+        default: () => 'bg-white navbar-light', //
+        description: 'Cor do navbar [atual]'
+      },
+    },
+    computed: {
+      routeName() {
+        const { name } = this.$route;
+        return this.capitalizeFirstLetter(name);
+      },
+      clazz: function() {
+        var clzz = 'control-form';
+        if (this.focusSearchControl == false) {
+          clzz += ' only-text';
+        }
+        return clzz;
+      }
+    },
+    data() {
+      return {
+        showMenu: false,
+        activeNotifications: false,
+        showMenu: false,
+        searchModalVisible: false,
+        searchQuery: '',
+        menuSearch: '',
+        focusSearchControl: false,
+        baseURL: process.env.baseAppUrl,
+        isTyping: false
+      };
+    },
+    methods: {
+      toLogin() {
+        this.$router.push('/entrar?rollback=' + this.$route.fullPath);
+      },
+      search() {
+        // this.$router.push({
+        //   path: `/busca?term=${this.menuSearch}&page=1`
+        // });
+        window.location = `/busca?term=${this.menuSearch}&page=1`;
+      },
+
+      capitalizeFirstLetter(string) {
+        return string.charAt(0).toUpperCase() + string.slice(1);
+      },
+      toggleNotificationDropDown() {
+        this.activeNotifications = !this.activeNotifications;
+      },
+      closeDropDown() {
+        this.activeNotifications = false;
+      },
+      toggleSidebar() {
+        this.$sidebar.displaySidebar(!this.$sidebar.showSidebar);
+      },
+      hideSidebar() {
+        this.$sidebar.displaySidebar(false);
+      },
+      handleSCroll (event) {
+        // let header = document.querySelector('[data-menu="fixed"]');
+        // let page = document.querySelector('html');
+        // let screenHeight = window.innerHeight;
+        // if (window.scrollY > screenHeight && !header.className.includes('navbar-main--mini') && header.length > 0) {
+        //   header.classList.add('navbar-main--mini');
+        //   //page.classList.add('menu-fixed');
+        // } else if (window.scrollY < screenHeight) {
+        //   header.classList.remove('navbar-main--mini');
+        //   //page.classList.remove('menu-fixed');
+        //   console.log('final');
+        // }
+      },
+      onFocus: function(event) {
+        event.target.select();
+        this.focusSearchControl = true;
+      },
+      onBlur: function(event) {
+        this.focusSearchControl = false;
+      },
+      closeMenu() {
+        document.body.classList.remove('nav-open');
+        this.showMenu = false;
+      },
+
+      unreadNotifications(arr) {
+        return arr.filter((item) => {
+          return item.read == false
+        }).length;
+      },
+
+      fromNow(date) {
+        return moment(date).locale('pt-BR').fromNow();
+      },
+
+      changeToUserMode(e) {
+        e.preventDefault();
+        this.$store.commit('localStorage/setCompany', null);
+      },
+
+      changeToCompanyMode(company) {
+        // this.$store.commit('localStorage/setCompany', company);
+        let token = this.$store.state.localStorage.token != null && this.$store.state.localStorage.token != '' ? '?auth=' + this.$store.state.localStorage.token : '';
+        // Setando cookie do companyId para uso no App Ractive
+        document.cookie = 'shiftCompanyId='+company.id+'; domain=burh.com.br; path=/';
+        // window.location = 'https://business.burh.com.br/entrar?auth=' + this.$store.state.localStorage.token;
+
+        let setToken = this.$store.state.localStorage.token != null && this.$store.state.localStorage.token != '' ? '/entrar?auth=' + this.$store.state.localStorage.token : '';
+        var enviroment = process.env.NODE_ENV != null ? process.env.NODE_ENV.trim() : 'development';
+        window.location.href = enviroment == 'development' ? process.env.baseLocalAppUrl + setToken : 'https://business.burh.com.br' + setToken;
+        // window.location = 'https://business.burh.com.br/entrar' + this.$route.query.auth;
+      },
+
+      async logout() {
+        await this.$axios.post(process.env.routes.api.logLogout, {},{
+          headers: {
+            Authorization: `Bearer ${this.$store.state.localStorage.token}`
+          }
+        });
+
+        await this.$axios.get(process.env.routes.api.logout, {
+          headers: {
+            Authorization: `Bearer ${this.$store.state.localStorage.token}`
+          }
+        });
+
+        this.$logout();
+      },
+
+      notCurrentCompany() {
+        if(this.currentCompany == null) {
+          return this.currentUser.companies
+        }
+
+        return this.currentUser.companies.filter((company) => {
+          return company.id != this.currentCompany.id
+        });
+      }
+    },
+    watch: {
+      '$route.path'(newRoute, oldRoute) {
+        if (this.showMenu) {
+          this.closeMenu();
+        }
+
+        if(this.navbarSearch && newRoute != '/busca'){
+          this.menuSearch = ''
+        } else {
+          this.menuSearch = this.$route.query.term
+        }
+
+      }
+    },
+    mounted () {
+      window.addEventListener('scroll', this.handleSCroll);
+      let header = document.querySelector('[data-menu="fixed"]');
+      let page = document.querySelector('html');
+
+      if (header) {
+        page.classList.remove('menu-fixed');
+      }
+
+      if(this.$route.path == '/busca') {
+        this.menuSearch = this.$route.query.term
+      }
+
+    },
+    created() {
+
+    },
+    destroyed () {
+      window.removeEventListener('scroll', this.handleSCroll);
+    }
+  };
+</script>
+<style lang="scss">
+@import "./assets/sass/burh-ds/variables/colors";
+
+.navbar {
+  .navbar-search-light {
+    &--focus {
+      box-shadow: 0 0 .5rem 0 darken($primary, 20%);
+    }
+  }
+  .navbar-search-dark {
+    &--focus {
+      box-shadow: 0 0 2rem 0 $primary;
+    }
+  }
+}
+</style>