@burh/nuxt-core 1.0.503 → 1.0.505

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

@@ -1,431 +1,431 @@
-<template>
-  <base-nav
-    v-model="showMenu"
-    container-classes="d-flex w-100 justify-content-between"
-    class="border-bottom navbar-animated navbar-horizontal navbar-mobile"
-    :class="navbarColor"
-    expand="lg"
-    data-menu="fixed"
-  >
-    <!-- SLOT BRAND -->
-    <div slot="brand" class="navbar-wrapper d-flex align-items-center">
-      <nuxt-link class="navbar-brand d-flex" :to="'/'">
-        <img
-          :src="logoMini"
-          class="navbar-brand-img navbar-brand-img--full mr-0"
-          alt="BURH: Suas vagas"
-        />
-      </nuxt-link>
-      <!-- Search form -->
-      <form
-        v-if="navbarSearch && ($route.path != '/')"
-        v-on:keyup.enter="search()"
-        class="form-inline mr-sm-3"
-        :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"
-              type="text"
-              v-model="menuSearch"
-              :class="clazz"
-            />
-          </div>
-        </div>
-      </form>
-    </div>
-
-    <!-- SLOT DEFAULT -->
-    <template>
-      <div class="navbar-collapse-header">
-        <div class="collapse-brand">
-          <nuxt-link to="/">
-            <img
-              :src="logoMini"
-              class="navbar-brand-img navbar-brand-img--full"
-              alt="BURH: Suas vagas"
-            />
-          </nuxt-link>
-        </div>
-        <button
-          type="button"
-          class="collapse-close navbar-toggler"
-          @click="showMenu = false; toggleBodyClass('no-scroll')"
-        >
-          <span></span>
-          <span></span>
-        </button>
-      </div>
-      <div class="navbar-collapse-body">
-        <template v-if="isLogged">
-          <a href="#" class="dropdown-item" v-on:click.prevent="$router.push('/' + currentUser.slug); toggleBodyClass('no-scroll'); closeMenu()" v-if="currentCompany == null">
-            <span>Meu Perfil</span>
-            <span class="avatar avatar-sm rounded-circle">
-              <img
-                v-if="currentUser.avatar != null && currentUser.avatar != ''"
-                :alt="currentUser.name.charAt(0) + currentUser.last_name.split(' ')[0].charAt(0)"
-                :src="currentUser.avatar">
-
-                <template v-if="currentUser.avatar == null || currentUser.avatar == ''">
-                  {{currentUser.name.charAt(0)}}{{currentUser.last_name.split(' ')[0].charAt(0)}}
-                </template>
-            </span>
-          </a>
-
-          <a href="#" class="dropdown-item" @click="changeToUserMode($event);" v-if="currentCompany != null">
-            <span>Perfil da Empresa</span>
-            <span class="avatar avatar-sm rounded-circle">
-              <img
-                v-if="currentCompany.logo != null && currentCompany.logo != ''"
-                :alt="currentCompany.name.charAt(0)"
-                :src="currentCompany.logo">
-
-                <template v-if="currentCompany.logo == null || currentCompany.logo.trim() == ''">
-                  {{currentCompany.name.charAt(0)}}
-                </template>
-            </span>
-          </a>
-
-          <div class="dropdown-divider"></div>
-          <h6 class="dropdown-header">Entrar como</h6>
-
-          <a href="#" class="dropdown-item" @click="changeToUserMode($event);" v-if="currentCompany != null">
-            <span>{{currentUser.name}} {{currentUser.last_name.charAt(0)}}.</span>
-            <span class="avatar avatar-sm rounded-circle">
-              <img
-                :alt="currentUser.name.charAt(0) + currentUser.last_name.split(' ')[0].charAt(0)"
-                :src="currentUser.avatar">
-
-                <template v-if="currentUser.avatar == null || currentUser.avatar == ''">
-                  {{currentUser.name.charAt(0)}}{{currentUser.last_name.split(' ')[0].charAt(0)}}
-                </template>
-            </span>
-          </a>
-
-          <a v-for="company in notCurrentCompany()" :key="company.id" href="#" class="dropdown-item" @click="changeToCompanyMode(company);">
-            <span>{{company.name}}</span>
-            <span class="avatar avatar-sm rounded-circle">
-              <img
-                :alt="company.name.charAt(0)"
-                :src="company.logo">
-
-                <template v-if="company.logo == null || company.logo == ''">
-                  {{company.name.charAt(0)}}
-                </template>
-            </span>
-          </a>
-
-          <!-- <a href="#" class="dropdown-item" @click="changeToCompanyMode(company);">
-            <span>Burh Corp</span>
-            <span class="avatar avatar-sm rounded-circle">BC</span>
-          </a> -->
-
-        </template>
-        <template v-if="!isLogged">
-          <a href="#" class="dropdown-item" v-on:click.stop="$router.push('/'); toggleBodyClass('no-scroll'); closeMenu()">
-            <span>Início</span>
-          </a>
-        </template>
-
-        <template v-if="isIOSWatch">
-        <div class="dropdown-divider"></div>
-        <a href="#!" class="dropdown-item">Faça o Download do Aplicativo</a>
-        </template>
-
-        <template v-if="isLogged">
-            <template v-if="currentCompany == null">
-              <div class="dropdown-divider"></div>
-              <a href="#" class="dropdown-item" v-on:click.prevent="$router.push('/')">
-                Início
-                <font-awesome-icon :icon="['far', 'user']" />
-              </a>
-              <div class="dropdown-divider"></div>
-              <h6 class="dropdown-header">{{currentUser.name}} {{currentUser.last_name.charAt(0)}}.</h6>
-              <a href="#" class="dropdown-item" v-on:click.prevent="$router.push('/meu-burh'); toggleBodyClass('no-scroll'); closeMenu()">
-                Meu Burh
-                <font-awesome-icon :icon="['far', 'user']" />
-              </a>
-              <a href="#" class="dropdown-item" v-on:click.prevent="$router.push('/configuracoes'); toggleBodyClass('no-scroll'); closeMenu()">
-                Configurações
-                <font-awesome-icon :icon="['far', 'user']" />
-              </a>
-            </template>
-
-            <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>
-
-        <template v-if="isLogged">
-          <div class="dropdown-divider"></div>
-          <a href="#!" class="dropdown-item" @click="logout()">
-            <span>Sair</span>
-            <font-awesome-icon :icon="['fas', 'door-open']" />
-          </a>
-        </template>
-
-        <template v-if="!isLogged">
-          <div class="dropdown-divider"></div>
-          <a href="#" class="dropdown-item" v-on:click.stop="$router.push('/cadastro?rollback=' + $route.fullPath); toggleBodyClass('no-scroll'); closeMenu()">
-            Cadastre-se
-          </a>
-          <a href="#" class="dropdown-item" v-on:click.prevent="$router.push('/entrar?rollback=' + $route.fullPath); toggleBodyClass('no-scroll'); closeMenu()">
-            Entrar
-          </a>
-          <a href="https://www.messenger.com/t/burhbrasil" class="dropdown-item">
-            Ajuda
-          </a>
-        </template>
-      </div>
-    </template>
-  </base-nav>
-</template>
-<script>
-import { isMobile, isIOS, isAndroid } from "mobile-device-detect";
-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 {
-  name: "mobile-navbar",
-  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/brand/burh-isotipo.svg",
-      description: "Logo for scrolled navbar"
-    },
-    logoFull: {
-      type: String,
-      default: () => "/img/brand/burh-imagotipo.svg",
-      description: "Brand da navbar"
-    },
-    menuOptions: {
-      type: String,
-      default: null,
-      description: ""
-    },
-    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;
-    },
-    isLogged() {
-      return this.currentUser != null
-    }
-  },
-  data() {
-    return {
-      showMenu: false,
-      activeNotifications: false,
-      showMenu: false,
-      searchModalVisible: false,
-      searchQuery: "",
-      menuSearch: "",
-      focusSearchControl: false,
-      baseURL: process.env.baseAppUrl,
-      isTyping: false,
-      isMobileWatch: isMobile, 
-      isIOSWatch: isIOS, 
-      isAndroidWatch: isAndroid
-    };
-  },
-  methods: {
-    search() {
-      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');
-      //   
-      // }
-    },
-    onFocus: function(event) {
-      event.target.select();
-      this.focusSearchControl = true;
-    },
-    onBlur: function(event) {
-      this.focusSearchControl = false;
-    },
-    closeMenu() {
-      document.body.classList.remove("nav-open");
-      document.body.classList.remove("no-scroll");
-      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);
-    },
-
-    logout() {
-      this.$logout();
-    },
-
-    notCurrentCompany() {
-      if (this.currentCompany == null) {
-        return this.currentUser.companies;
-      }
-
-      return this.currentUser.companies.filter(company => {
-        return company.id != this.currentCompany.id;
-      });
-    },
-    toggleBodyClass(className) {
-      const el = document.body;
-      el.classList.toggle(className);
-    }
-  },
-  watch: {
-    "$route.path"() {
-      if (this.showMenu) {
-        this.closeMenu();
-      }
-    },
-    showMenu(value) {
-      if(!value) {
-        this.closeMenu();
-      }
-    }
-  },
-  mounted() {
-    window.addEventListener("scroll", this.handleSCroll);
-    let header = document.querySelector('[data-menu="fixed"]');
-    let page = document.querySelector("html");
-
-    if (header) {
-      page.classList.add("menu-fixed");
-    }
-  },
-  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 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="d-flex w-100 justify-content-between"
+    class="border-bottom navbar-animated navbar-horizontal navbar-mobile"
+    :class="navbarColor"
+    expand="lg"
+    data-menu="fixed"
+  >
+    <!-- SLOT BRAND -->
+    <div slot="brand" class="navbar-wrapper d-flex align-items-center">
+      <nuxt-link class="navbar-brand d-flex" :to="'/'">
+        <img
+          :src="logoMini"
+          class="navbar-brand-img navbar-brand-img--full mr-0"
+          alt="BURH: Suas vagas"
+        />
+      </nuxt-link>
+      <!-- Search form -->
+      <form
+        v-if="navbarSearch && ($route.path != '/')"
+        v-on:keyup.enter="search()"
+        class="form-inline mr-sm-3"
+        :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"
+              type="text"
+              v-model="menuSearch"
+              :class="clazz"
+            />
+          </div>
+        </div>
+      </form>
+    </div>
+
+    <!-- SLOT DEFAULT -->
+    <template>
+      <div class="navbar-collapse-header">
+        <div class="collapse-brand">
+          <nuxt-link to="/">
+            <img
+              :src="logoMini"
+              class="navbar-brand-img navbar-brand-img--full"
+              alt="BURH: Suas vagas"
+            />
+          </nuxt-link>
+        </div>
+        <button
+          type="button"
+          class="collapse-close navbar-toggler"
+          @click="showMenu = false; toggleBodyClass('no-scroll')"
+        >
+          <span></span>
+          <span></span>
+        </button>
+      </div>
+      <div class="navbar-collapse-body">
+        <template v-if="isLogged">
+          <a href="#" class="dropdown-item" v-on:click.prevent="$router.push('/' + currentUser.slug); toggleBodyClass('no-scroll'); closeMenu()" v-if="currentCompany == null">
+            <span>Meu Perfil</span>
+            <span class="avatar avatar-sm rounded-circle">
+              <img
+                v-if="currentUser.avatar != null && currentUser.avatar != ''"
+                :alt="currentUser.name.charAt(0) + currentUser.last_name.split(' ')[0].charAt(0)"
+                :src="currentUser.avatar">
+
+                <template v-if="currentUser.avatar == null || currentUser.avatar == ''">
+                  {{currentUser.name.charAt(0)}}{{currentUser.last_name.split(' ')[0].charAt(0)}}
+                </template>
+            </span>
+          </a>
+
+          <a href="#" class="dropdown-item" @click="changeToUserMode($event);" v-if="currentCompany != null">
+            <span>Perfil da Empresa</span>
+            <span class="avatar avatar-sm rounded-circle">
+              <img
+                v-if="currentCompany.logo != null && currentCompany.logo != ''"
+                :alt="currentCompany.name.charAt(0)"
+                :src="currentCompany.logo">
+
+                <template v-if="currentCompany.logo == null || currentCompany.logo.trim() == ''">
+                  {{currentCompany.name.charAt(0)}}
+                </template>
+            </span>
+          </a>
+
+          <div class="dropdown-divider"></div>
+          <h6 class="dropdown-header">Entrar como</h6>
+
+          <a href="#" class="dropdown-item" @click="changeToUserMode($event);" v-if="currentCompany != null">
+            <span>{{currentUser.name}} {{currentUser.last_name.charAt(0)}}.</span>
+            <span class="avatar avatar-sm rounded-circle">
+              <img
+                :alt="currentUser.name.charAt(0) + currentUser.last_name.split(' ')[0].charAt(0)"
+                :src="currentUser.avatar">
+
+                <template v-if="currentUser.avatar == null || currentUser.avatar == ''">
+                  {{currentUser.name.charAt(0)}}{{currentUser.last_name.split(' ')[0].charAt(0)}}
+                </template>
+            </span>
+          </a>
+
+          <a v-for="company in notCurrentCompany()" :key="company.id" href="#" class="dropdown-item" @click="changeToCompanyMode(company);">
+            <span>{{company.name}}</span>
+            <span class="avatar avatar-sm rounded-circle">
+              <img
+                :alt="company.name.charAt(0)"
+                :src="company.logo">
+
+                <template v-if="company.logo == null || company.logo == ''">
+                  {{company.name.charAt(0)}}
+                </template>
+            </span>
+          </a>
+
+          <!-- <a href="#" class="dropdown-item" @click="changeToCompanyMode(company);">
+            <span>Burh Corp</span>
+            <span class="avatar avatar-sm rounded-circle">BC</span>
+          </a> -->
+
+        </template>
+        <template v-if="!isLogged">
+          <a href="#" class="dropdown-item" v-on:click.stop="$router.push('/'); toggleBodyClass('no-scroll'); closeMenu()">
+            <span>Início</span>
+          </a>
+        </template>
+
+        <template v-if="isIOSWatch">
+        <div class="dropdown-divider"></div>
+        <a href="#!" class="dropdown-item">Faça o Download do Aplicativo</a>
+        </template>
+
+        <template v-if="isLogged">
+            <template v-if="currentCompany == null">
+              <div class="dropdown-divider"></div>
+              <a href="#" class="dropdown-item" v-on:click.prevent="$router.push('/')">
+                Início
+                <font-awesome-icon :icon="['far', 'user']" />
+              </a>
+              <div class="dropdown-divider"></div>
+              <h6 class="dropdown-header">{{currentUser.name}} {{currentUser.last_name.charAt(0)}}.</h6>
+              <a href="#" class="dropdown-item" v-on:click.prevent="$router.push('/meu-burh'); toggleBodyClass('no-scroll'); closeMenu()">
+                Meu Burh
+                <font-awesome-icon :icon="['far', 'user']" />
+              </a>
+              <a href="#" class="dropdown-item" v-on:click.prevent="$router.push('/configuracoes'); toggleBodyClass('no-scroll'); closeMenu()">
+                Configurações
+                <font-awesome-icon :icon="['far', 'user']" />
+              </a>
+            </template>
+
+            <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>
+
+        <template v-if="isLogged">
+          <div class="dropdown-divider"></div>
+          <a href="#!" class="dropdown-item" @click="logout()">
+            <span>Sair</span>
+            <font-awesome-icon :icon="['fas', 'door-open']" />
+          </a>
+        </template>
+
+        <template v-if="!isLogged">
+          <div class="dropdown-divider"></div>
+          <a href="#" class="dropdown-item" v-on:click.stop="$router.push('/cadastro?rollback=' + $route.fullPath); toggleBodyClass('no-scroll'); closeMenu()">
+            Cadastre-se
+          </a>
+          <a href="#" class="dropdown-item" v-on:click.prevent="$router.push('/entrar?rollback=' + $route.fullPath); toggleBodyClass('no-scroll'); closeMenu()">
+            Entrar
+          </a>
+          <a href="https://www.messenger.com/t/burhbrasil" class="dropdown-item">
+            Ajuda
+          </a>
+        </template>
+      </div>
+    </template>
+  </base-nav>
+</template>
+<script>
+import { isMobile, isIOS, isAndroid } from "mobile-device-detect";
+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 {
+  name: "mobile-navbar",
+  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/brand/burh-isotipo.svg",
+      description: "Logo for scrolled navbar"
+    },
+    logoFull: {
+      type: String,
+      default: () => "/img/brand/burh-imagotipo.svg",
+      description: "Brand da navbar"
+    },
+    menuOptions: {
+      type: String,
+      default: null,
+      description: ""
+    },
+    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;
+    },
+    isLogged() {
+      return this.currentUser != null
+    }
+  },
+  data() {
+    return {
+      showMenu: false,
+      activeNotifications: false,
+      showMenu: false,
+      searchModalVisible: false,
+      searchQuery: "",
+      menuSearch: "",
+      focusSearchControl: false,
+      baseURL: process.env.baseAppUrl,
+      isTyping: false,
+      isMobileWatch: isMobile, 
+      isIOSWatch: isIOS, 
+      isAndroidWatch: isAndroid
+    };
+  },
+  methods: {
+    search() {
+      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');
+      //   
+      // }
+    },
+    onFocus: function(event) {
+      event.target.select();
+      this.focusSearchControl = true;
+    },
+    onBlur: function(event) {
+      this.focusSearchControl = false;
+    },
+    closeMenu() {
+      document.body.classList.remove("nav-open");
+      document.body.classList.remove("no-scroll");
+      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);
+    },
+
+    logout() {
+      this.$logout();
+    },
+
+    notCurrentCompany() {
+      if (this.currentCompany == null) {
+        return this.currentUser.companies;
+      }
+
+      return this.currentUser.companies.filter(company => {
+        return company.id != this.currentCompany.id;
+      });
+    },
+    toggleBodyClass(className) {
+      const el = document.body;
+      el.classList.toggle(className);
+    }
+  },
+  watch: {
+    "$route.path"() {
+      if (this.showMenu) {
+        this.closeMenu();
+      }
+    },
+    showMenu(value) {
+      if(!value) {
+        this.closeMenu();
+      }
+    }
+  },
+  mounted() {
+    window.addEventListener("scroll", this.handleSCroll);
+    let header = document.querySelector('[data-menu="fixed"]');
+    let page = document.querySelector("html");
+
+    if (header) {
+      page.classList.add("menu-fixed");
+    }
+  },
+  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 0.5rem 0 darken($primary, 20%);
+    }
+  }
+  .navbar-search-dark {
+    &--focus {
+      box-shadow: 0 0 2rem 0 $primary;
+    }
+  }
+}
+</style>