@burh/nuxt-core 1.0.20 → 1.0.21

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

@@ -1,315 +1,292 @@
-<template>
-  <base-nav
-    id="business__nav"
-    v-model="showMenu"
-    container-classes="container-fluid container-fluid--bu"
-    class="border-bottom navbar-animated navbar-horizontal"
-    :class="navbarColor"
-    expand="lg"
-    type="primary"
-  >
-  <!--LEFT-->
-
-  <!--BRAND-->
-    <div slot="brand" class="navbar-wrapper d-flex">
-      <nuxt-link class="navbar-brand d-flex pt-2" to="/">
-        <img src="/img/brand/burh-imagotipo-white.svg" class="navbar-brand-img navbar-brand-img--full" alt="BURH: Suas vagas">
-      </nuxt-link>
-
-    <ul class= "navbar-nav navbar-nav--menu align-items-center d-none d-lg-flex flex-row mr-sm-auto">
-      <navbar-links 
-        v-for="(item, index) in listOfLinks" :key="index"
-        :name="item.name"
-        :id="item.id"
-        :link="item.link"
-        :children="item.children"
-      ></navbar-links>
-    </ul>
-
-     
-    </div>
-  <!--END BRAND-->
-    
-  <!--LEFT-->
-
-  <!--RIGHT-->
-
-    <ul class="navbar-nav navbar-nav--menu align-items-center mr-md-auto">
-      <template v-if="currentUser == null">
-        <li class="nav-item">
-          <button @click="toLogin()" class="btn btn-block" :class="{'btn-outline-light': !showMenu, 'btn-primary': showMenu, 'btn-light': !showMenu}">
-            Entrar
-          </button>
-          <hr class="d-lg-none mt-3 mb-3">
-        </li>
-        <li class="nav-item">
-          <a v-if="showMenu" href="javascript:void(0)" @click="$router.push('/empresas/cadastro/criar-conta')" class="btn" :class="{'btn-light': !showMenu, 'btn-outline-primary': showMenu}">Cadastrar-se</a>
-        </li>
-      </template>
-    </ul>
-
-  <!--FAQ-->
-    <faq-video-area 
-      v-if="currentUser != null"
-      :videos="listOfVideos"
-      v-on:open-video-modal="openModalVideo"
-      >
-    </faq-video-area>
-    <video-modal 
-      :show="videoModalProperties.showModal"
-      :link="this.videoModalProperties.link"
-      :title="this.videoModalProperties.title"
-      >
-    </video-modal>
-  <!--FAQ-->
-
-  <!--APPS-->
-    <app-link-area v-if="currentUser != null"></app-link-area>
-  <!--APPS-->
-
-  <!--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 pt-2 pb-2" @click.prevent slot="title-container">
-          <div class="media align-items-center">
-
-            <span class="avatar avatar-sm rounded-circle">
-
-              <img :src="currentCompany != null && currentCompany.logo ? currentCompany.logo : ''">
-
-            </span>
-
-            <div class="media-body ml-2 d-none d-lg-block">
-              <span class="mb-0 text-sm text-white font-weight-bold">
-                <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">
-              <span class="avatar avatar-sm rounded-circle">
-                <img :src="currentUser.avatar != null ? currentUser.avatar : ''">
-              </span>
-              <span>{{currentUser.name}}</span>
-            </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 v-if="currentCompany == null">
-            <div class="dropdown-divider"></div>
-            <h6 class="dropdown-header">Meu Burh</h6>
-            <a href="#" class="dropdown-item">Meu perfil</a>
-            <a href="#" class="dropdown-item">Configurações</a>
-          </template>
-
-          <div class="dropdown-divider"></div>
-          <a href="#!" class="dropdown-item">
-            <font-awesome-icon :icon="['fas','door-open']"/>
-            <span>Sair</span>
-          </a>
-        </template>
-      </base-dropdown>
-    </div>
-  <!--END USERS-->
-  <!--END RIGHT-->
-<slot></slot>
-</base-nav>
-</template>
-
-<script>
-  import { CollapseTransition } from 'vue2-transitions';
-  // import BaseNav from '@/components/argon-core/Navbar/BaseNav.vue';
-  import BaseNav from '~/node_modules/@burh/nuxt-core/components/burh-ds/Navbar/BaseNav.vue';
-  import VideoModal from '~/node_modules/@burh/nuxt-core/components/burh-ds/Modals/VideoModal.vue';
-  import NavbarLinks from '~/node_modules/@burh/nuxt-core/components/burh-ds/Lists/ListNavLinks.vue';
-  import AppLinkArea from '~/node_modules/@burh/nuxt-core/components/burh-ds/Dropdown/AppLinkArea.vue';
-  import FaqVideoArea from '~/node_modules/@burh/nuxt-core/components/burh-ds/Dropdown/FaqVideoArea.vue';
-  import Modal from '~/node_modules/@burh/nuxt-core/components/argon-core/Modal.vue';
-  import * as ListofLinksNavbar from '@burh/nuxt-core/data/ListNavLinksMock.json';
-  import * as ListVideos from '@burh/nuxt-core/data/ListVideoLinksMock.json';
-  import moment from 'moment';
-  import 'moment/locale/pt-br';
-  import * as _ from 'lodash';
-  export default {
-    components: {
-      CollapseTransition,
-      BaseNav,
-      Modal,
-      AppLinkArea,
-      FaqVideoArea,
-      NavbarLinks,
-      VideoModal
-    },
-    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'
-      },
-      logoFull: {
-        type: String,
-        default: () => '/img/brand/burh-imagotipo.svg',
-        description: 'Brand da navbar'
-      },
-      navbarColor: {
-        type: String,
-        default: () => 'navbar-light', //
-        description: 'Cor do navbar [atual]'
-      },
-      currentUser: {
-        type: Object,
-        default: () => null,
-        description: 'Usuário logado atual'
-      },
-      currentCompany: {
-        type: Object,
-        default: () => null,
-        description: 'Empresa selecionada atual'
-      },
-      listOfLinks: {
-        type: Array,
-        default: () => ListofLinksNavbar.default,
-        description: 'Lista  de links da navbar atual'
-      },
-      listOfVideos:{
-        type: Array,
-        default: () => ListVideos.default,
-        description: 'Lista de videos em exibição no dropdown de videos'
-      }
-    },
-    computed: {
-      routeName() {
-        const { name } = this.$route;
-        return this.capitalizeFirstLetter(name);
-      }
-    },
-
-    data() {
-      return {
-        showMenu: false,
-        baseURL: process.env.baseAppUrl,
-        videoModalProperties: {
-          showModal: false,
-          link: "",
-          title: ""
-        },
-      };
-    },
-    methods: {
-      capitalizeFirstLetter(string) {
-        return string.charAt(0).toUpperCase() + string.slice(1);
-      },
-      isElementClassContain(element, typeClass) {
-        return element.classList.contains(typeClass)
-      },
-      fromNow(date) {
-        return moment(date).locale('pt-BR').fromNow();
-      },
-      openModalVideo(video){
-        this.videoModalProperties.showModal = true;
-        this.videoModalProperties.link = video.link;
-        this.videoModalProperties.title = video.title;
-      }
-    },
-    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.handleScrollNavbar);
-
-      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
-      }
-      console.log(ListVideos)
-    },
-    created() {
-
-    },
-    destroyed () {
-      window.removeEventListener('scroll', this.handleScrollNavbar);
-    }
-  
-};
-
-</script>
-
-<style lang="scss">
-@import "~bootstrap/scss/functions.scss";
-@import "~bootstrap/scss/mixins.scss";
-@import "node_modules/@burh/nuxt-core/assets/sass/burh-ds/variables.scss";
-@import "node_modules/@burh/nuxt-core/assets/sass/burh-ds/variables/_colors.scss";
-.dropdown-menu{
-  min-width: 16rem;
-}
-.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;
-    }
-  }
-
-  &-company__default {
-    position: fixed;
-    background-color: $primary;
-    border: 0 !important;
-    animation: navbarCompanyDefaultLoading .5s;
-    
-  }
-}
-</style>
+<template>
+  <base-nav
+    id="business__nav"
+    v-model="showMenu"
+    container-classes="container-fluid container-fluid--bu"
+    class="navbar-main navbar-blue"
+    expand="lg"
+    type="primary"
+  >
+    <div
+      slot="brand"
+      class="navbar-wrapper d-flex"
+      v-if="!appMode"
+    >
+      <nuxt-link class="navbar-brand d-flex pt-2" to="/">
+        <img
+          src="/img/brand/burh-imagotipo-white.svg"
+          class="navbar-brand-img navbar-brand-img--full"
+          alt="BURH: Suas vagas"
+        >
+      </nuxt-link>
+
+      <ul class= "navbar-nav align-items-center d-none d-lg-flex flex-row mr-sm-auto">
+        <navbar-links
+          v-for="(item, index) in listOfLinks" :key="index"
+          :name="item.name"
+          :id="item.id"
+          :link="item.link"
+          :children="item.children"
+        />
+      </ul>
+    </div>
+
+    <ul class="navbar-nav navbar-nav--menu align-items-center mr-md-auto">
+      <template v-if="currentUser == null">
+        <li class="nav-item">
+          <button
+            @click="toLogin()"
+            class="btn btn-block"
+            :class="{'btn-outline-light': !showMenu, 'btn-primary': showMenu, 'btn-light': !showMenu}"
+            >
+            Entrar
+          </button>
+          <hr class="d-lg-none mt-3 mb-3">
+        </li>
+        <li class="nav-item">
+          <a
+            v-if="showMenu"
+            href="javascript:void(0)"
+            @click="$router.push('/empresas/cadastro/criar-conta')"
+            class="btn"
+            :class="{'btn-light': !showMenu, 'btn-outline-primary': showMenu}"
+          >
+            Cadastrar-se
+          </a>
+        </li>
+      </template>
+    </ul>
+
+    <faq-video-area
+      v-if="currentUser != null"
+      :videos="listOfVideos"
+      v-on:open-video-modal="openModalVideo"
+      class="white-block"
+    />
+    <video-modal
+      :show="videoModalProperties.showModal"
+      :link="this.videoModalProperties.link"
+      :title="this.videoModalProperties.title"
+    />
+
+    <app-link-area
+      v-if="currentUser != null"
+      class="white-block"
+    />
+    <user-menu-dropdown
+      slot="user"
+      v-if="currentUser != null"
+      :text="userMenuText"
+      :userAvatar="currentUser.avatar"
+      :userName="currentUser.name"
+      :companyLogo="currentCompany.logo"
+      :companyName="currentCompany.name"
+      class="text-color"
+    />
+    <slot></slot>
+</base-nav>
+</template>
+
+<script>
+  import { CollapseTransition } from 'vue2-transitions';
+  import UserMenuDropdown from '@burh/nuxt-core/components/burh-ds/Dropdown/UserMenuDropdown.vue';
+  import BaseNav from '@burh/nuxt-core/components/burh-ds/Navbar/BaseNav.vue';
+  import VideoModal from '@burh/nuxt-core/components/burh-ds/Modals/VideoModal.vue';
+  import NavbarLinks from '@burh/nuxt-core/components/burh-ds/Lists/ListNavLinks.vue';
+  import AppLinkArea from '@burh/nuxt-core/components/burh-ds/Dropdown/AppLinkArea.vue';
+  import FaqVideoArea from '@burh/nuxt-core/components/burh-ds/Dropdown/FaqVideoArea.vue';
+  import Modal from '@burh/nuxt-core/components/argon-core/Modal.vue';
+  import * as ListofLinksNavbar from '@burh/nuxt-core/data/ListNavLinksMock.json';
+  import * as ListVideos from '@burh/nuxt-core/data/ListVideoLinksMock.json';
+  import moment from 'moment';
+  import 'moment/locale/pt-br';
+  import * as _ from 'lodash';
+  export default {
+    components: {
+      CollapseTransition,
+      BaseNav,
+      Modal,
+      AppLinkArea,
+      FaqVideoArea,
+      NavbarLinks,
+      VideoModal,
+      UserMenuDropdown,
+    },
+    props: {
+      type: {
+        type: String,
+        default: 'primary', // default|light
+        description: 'Look of the dashboard navbar. primary (blue) or ligte (white)'
+      },
+      logoMini: {
+        type: String,
+        default: '/img/content/carreiras/logo-laponia.jpg',
+        description: 'Logo for scrolled navbar'
+      },
+      logoFull: {
+        type: String,
+        default: () => '/img/brand/burh-imagotipo.svg',
+        description: 'Brand da navbar'
+      },
+      navbarColor: {
+        type: String,
+        default: () => 'navbar-light', //
+        description: 'Cor do navbar [atual]'
+      },
+      currentUser: {
+        type: Object,
+        default: () => null,
+        description: 'Usuário logado atual'
+      },
+      currentCompany: {
+        type: Object,
+        default: () => null,
+        description: 'Empresa selecionada atual'
+      },
+      listOfLinks: {
+        type: Array,
+        default: () => ListofLinksNavbar.default,
+        description: 'Lista  de links da navbar atual'
+      },
+      listOfVideos:{
+        type: Array,
+        default: () => ListVideos.default,
+        description: 'Lista de videos em exibição no dropdown de videos'
+      },
+      userMenuText: {
+        type:Object,
+        description: 'Contains the text for the user menu'
+      }
+    },
+    computed: {
+      routeName() {
+        const { name } = this.$route;
+        return this.capitalizeFirstLetter(name);
+      }
+    },
+
+    data() {
+      return {
+        showMenu: false,
+        baseURL: process.env.baseAppUrl,
+        videoModalProperties: {
+          showModal: false,
+          link: "",
+          title: ""
+        },
+      };
+    },
+    methods: {
+      capitalizeFirstLetter(string) {
+        return string.charAt(0).toUpperCase() + string.slice(1);
+      },
+      isElementClassContain(element, typeClass) {
+        return element.classList.contains(typeClass)
+      },
+      fromNow(date) {
+        return moment(date).locale('pt-BR').fromNow();
+      },
+      openModalVideo(video){
+        this.videoModalProperties.showModal = true;
+        this.videoModalProperties.link = video.link;
+        this.videoModalProperties.title = video.title;
+      }
+    },
+    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 () {
+      console.log("userMenuText", this.userMenuText)
+      window.addEventListener('scroll', this.handleScrollNavbar);
+
+      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
+      }
+      console.log(ListVideos)
+    },
+    created() {
+
+    },
+    destroyed () {
+      window.removeEventListener('scroll', this.handleScrollNavbar);
+    }
+
+};
+
+</script>
+
+<style lang="scss">
+@import "~bootstrap/scss/functions.scss";
+@import "~bootstrap/scss/mixins.scss";
+@import "node_modules/@burh/nuxt-core/assets/sass/burh-ds/variables.scss";
+@import "node_modules/@burh/nuxt-core/assets/sass/burh-ds/variables/_colors.scss";
+.dropdown-menu{
+  min-width: 16rem;
+}
+
+.navbar-blue {
+    background-color: #258bf4 !important;
+}
+
+.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;
+    }
+  }
+
+  &-company__default {
+    position: fixed;
+    background-color: $primary;
+    border: 0 !important;
+    animation: navbarCompanyDefaultLoading .5s;
+
+  }
+
+  &--white{
+    .nav-link {
+      color: $white;
+      &:hover {
+        color: $color-dark;
+      }
+    }
+  }
+}
+
+.text-color {
+    color: #fff !important;
+    &:hover {
+        color: #515e7e !important;
+    }
+}
+
+.white-block {
+    color: white;
+    &:hover {
+        color: #515e7e;
+    }
+}
+</style>