@burh/nuxt-core 1.0.331 → 1.0.332

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

@@ -1,346 +1,346 @@
-<template>
-  <base-nav
-    container-classes="container-fluid container-fluid--bu"
-    class="navbar-top border-bottom navbar-expand navbar-animated"
-    :class="{'bg-white navbar-light': type === 'default'}"
-    data-menu="fixed"
-  >
-    <img :src="logoFull" class="navbar-brand-img navbar-brand-img--full" alt="BURH: Suas vagas">
-    <img :src="logoMini" class="navbar-brand-img navbar-brand-img--mini" alt="BURH: Suas vagas">
-    <!-- Search form -->
-    <form class="navbar-search 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 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>
-    <!-- Navbar links -->
-    <ul class="navbar-nav navbar-nav--menu align-items-center ml-md-auto">
-      <li class="nav-item d-xl-none">
-        <!-- Sidenav toggler -->
-        <div class="pr-3 sidenav-toggler"
-             :class="{active: $sidebar.showSidebar, 'sidenav-toggler-dark': type === 'default', 'sidenav-toggler-light': type === 'light'}"
-             @click="toggleSidebar">
-          <div class="sidenav-toggler-inner">
-            <i class="sidenav-toggler-line"></i>
-            <i class="sidenav-toggler-line"></i>
-            <i class="sidenav-toggler-line"></i>
-          </div>
-        </div>
-      </li>
-      <li class="nav-item d-sm-none">
-        <a class="nav-link" href="#" data-action="search-show" data-target="#navbar-search-main">
-          <i class="ni ni-zoom-split-in"></i>
-        </a>
-      </li>
-      <li class="nav-item">
-        <a class="nav-link" href="#">
-          <i class="fas fa-home"></i>
-          Início
-        </a>
-      </li>
-      <li class="nav-item">
-        <a class="nav-link" href="#">
-          <i class="fas fa-suitcase"></i>
-          Meu Burh
-        </a>
-      </li>
-      <base-dropdown class="nav-item"
-                     tag="li"
-                     title="Notificações"
-                     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">13</strong> avisos não lidos.</h6>
-          </div>
-          <!-- List group -->
-          <div class="list-group list-group-flush">
-            <a href="#!" class="list-group-item list-group-item-action">
-              <div class="row align-items-center">
-                <div class="col-auto">
-                  <!-- Avatar -->
-                  <img alt="Image placeholder" src="img/theme/team-1.jpg" 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">Bia Amaro</h4>
-                    </div>
-                    <div class="text-right text-muted">
-                      <small>2 hrs ago</small>
-                    </div>
-                  </div>
-                  <p class="text-sm mb-0">Let's meet at Starbucks at 11:30. Wdyt?</p>
-                </div>
-              </div>
-            </a>
-            <a href="#!" class="list-group-item list-group-item-action">
-              <div class="row align-items-center">
-                <div class="col-auto">
-                  <!-- Avatar -->
-                  <img alt="Image placeholder" src="img/theme/team-2.jpg" 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">Bia Amaro</h4>
-                    </div>
-                    <div class="text-right text-muted">
-                      <small>3 hrs ago</small>
-                    </div>
-                  </div>
-                  <p class="text-sm mb-0">A new issue has been reported for Argon.</p>
-                </div>
-              </div>
-            </a>
-            <a href="#!" class="list-group-item list-group-item-action">
-              <div class="row align-items-center">
-                <div class="col-auto">
-                  <!-- Avatar -->
-                  <img alt="Image placeholder" src="img/theme/team-3.jpg" 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">Bia Amaro</h4>
-                    </div>
-                    <div class="text-right text-muted">
-                      <small>5 hrs ago</small>
-                    </div>
-                  </div>
-                  <p class="text-sm mb-0">Your posts have been liked a lot.</p>
-                </div>
-              </div>
-            </a>
-            <a href="#!" class="list-group-item list-group-item-action">
-              <div class="row align-items-center">
-                <div class="col-auto">
-                  <!-- Avatar -->
-                  <img alt="Image placeholder" src="img/content/bia.jpg" 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">Bia Amaro</h4>
-                    </div>
-                    <div class="text-right text-muted">
-                      <small>2 hrs ago</small>
-                    </div>
-                  </div>
-                  <p class="text-sm mb-0">Let's meet at Starbucks at 11:30. Wdyt?</p>
-                </div>
-              </div>
-            </a>
-            <a href="#!" class="list-group-item list-group-item-action">
-              <div class="row align-items-center">
-                <div class="col-auto">
-                  <!-- Avatar -->
-                  <img alt="Image placeholder" src="img/theme/team-5.jpg" 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">Bia Amaro</h4>
-                    </div>
-                    <div class="text-right text-muted">
-                      <small>3 hrs ago</small>
-                    </div>
-                  </div>
-                  <p class="text-sm mb-0">A new issue has been reported for Argon.</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>
-    </ul>
-    <ul class="navbar-nav navbar-nav--menu align-items-center ml-auto ml-md-0">
-      <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-xs rounded-circle">
-                    <img alt="Image placeholder" src="img/content/bia.jpg">
-                  </span>
-            <div class="media-body ml-2 d-none d-lg-block">
-              <span class="mb-0 text-sm  font-weight-bold">Bia Amaro</span>
-            </div>
-          </div>
-        </a>
-
-        <template>
-          <h6 class="dropdown-header">Entrar como</h6>
-          <a href="#!" class="dropdown-item d-flex align-items-center w-100">
-            <span class="avatar avatar-sm rounded-circle mr-2">
-              <img alt="Image placeholder" src="img/content/bia.jpg">
-            </span>
-            <span>Burh</span>
-            <badge rounded type="success" class="ml-auto">Premium</badge>
-          </a>
-          <div class="dropdown-divider"></div>
-          <h6 class="dropdown-header">Meu Burh</h6>
-          <a href="#!" class="dropdown-item">
-            <span>Meu Perfil</span>
-          </a>
-          <a href="#!" class="dropdown-item">
-            <span>Editar Perfil</span>
-          </a>
-          <div class="dropdown-divider"></div>
-          <h6 class="dropdown-header">Configurações</h6>
-          <a href="#!" class="dropdown-item">
-            <span>Sua conta</span>
-          </a>
-          <a href="#!" class="dropdown-item">
-            <span>Avisos & Notificações</span>
-          </a>
-          <a href="#!" class="dropdown-item">
-            <span>Privacidade</span>
-          </a>
-          <div class="dropdown-divider"></div>
-          <a href="#!" class="dropdown-item">
-            <i class="fas fa-door-open"></i>
-            <span>Sair</span>
-          </a>
-
-        </template>
-      </base-dropdown>
-    </ul>
-  </base-nav>
-</template>
-<script>
-  import { CollapseTransition } from 'vue2-transitions';
-  import BaseNav from '@/components/argon-core/Navbar/BaseNav.vue';
-  import Modal from '@/components/argon-core/Modal.vue';
-
-  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/brand/burh-isotipo.svg',
-        description: 'BURH: Suas vagas'
-      },
-      logoFull: {
-        type: String,
-        default: '/img/brand/burh-imagotipo.svg',
-        description: 'BURH: Suas vagas'
-      }
-    },
-    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 {
-        activeNotifications: false,
-        showMenu: false,
-        searchModalVisible: false,
-        searchQuery: '',
-        menuSearch: '',
-        focusSearchControl: false
-      };
-    },
-    methods: {
-      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.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;
-      }
-    },
-    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'); 
-      }
-    },
-    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
+    container-classes="container-fluid container-fluid--bu"
+    class="navbar-top border-bottom navbar-expand navbar-animated"
+    :class="{'bg-white navbar-light': type === 'default'}"
+    data-menu="fixed"
+  >
+    <img :src="logoFull" class="navbar-brand-img navbar-brand-img--full" alt="BURH: Suas vagas">
+    <img :src="logoMini" class="navbar-brand-img navbar-brand-img--mini" alt="BURH: Suas vagas">
+    <!-- Search form -->
+    <form class="navbar-search 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 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>
+    <!-- Navbar links -->
+    <ul class="navbar-nav navbar-nav--menu align-items-center ml-md-auto">
+      <li class="nav-item d-xl-none">
+        <!-- Sidenav toggler -->
+        <div class="pr-3 sidenav-toggler"
+             :class="{active: $sidebar.showSidebar, 'sidenav-toggler-dark': type === 'default', 'sidenav-toggler-light': type === 'light'}"
+             @click="toggleSidebar">
+          <div class="sidenav-toggler-inner">
+            <i class="sidenav-toggler-line"></i>
+            <i class="sidenav-toggler-line"></i>
+            <i class="sidenav-toggler-line"></i>
+          </div>
+        </div>
+      </li>
+      <li class="nav-item d-sm-none">
+        <a class="nav-link" href="#" data-action="search-show" data-target="#navbar-search-main">
+          <i class="ni ni-zoom-split-in"></i>
+        </a>
+      </li>
+      <li class="nav-item">
+        <a class="nav-link" href="#">
+          <i class="fas fa-home"></i>
+          Início
+        </a>
+      </li>
+      <li class="nav-item">
+        <a class="nav-link" href="#">
+          <i class="fas fa-suitcase"></i>
+          Meu Burh
+        </a>
+      </li>
+      <base-dropdown class="nav-item"
+                     tag="li"
+                     title="Notificações"
+                     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">13</strong> avisos não lidos.</h6>
+          </div>
+          <!-- List group -->
+          <div class="list-group list-group-flush">
+            <a href="#!" class="list-group-item list-group-item-action">
+              <div class="row align-items-center">
+                <div class="col-auto">
+                  <!-- Avatar -->
+                  <img alt="Image placeholder" src="img/theme/team-1.jpg" 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">Bia Amaro</h4>
+                    </div>
+                    <div class="text-right text-muted">
+                      <small>2 hrs ago</small>
+                    </div>
+                  </div>
+                  <p class="text-sm mb-0">Let's meet at Starbucks at 11:30. Wdyt?</p>
+                </div>
+              </div>
+            </a>
+            <a href="#!" class="list-group-item list-group-item-action">
+              <div class="row align-items-center">
+                <div class="col-auto">
+                  <!-- Avatar -->
+                  <img alt="Image placeholder" src="img/theme/team-2.jpg" 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">Bia Amaro</h4>
+                    </div>
+                    <div class="text-right text-muted">
+                      <small>3 hrs ago</small>
+                    </div>
+                  </div>
+                  <p class="text-sm mb-0">A new issue has been reported for Argon.</p>
+                </div>
+              </div>
+            </a>
+            <a href="#!" class="list-group-item list-group-item-action">
+              <div class="row align-items-center">
+                <div class="col-auto">
+                  <!-- Avatar -->
+                  <img alt="Image placeholder" src="img/theme/team-3.jpg" 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">Bia Amaro</h4>
+                    </div>
+                    <div class="text-right text-muted">
+                      <small>5 hrs ago</small>
+                    </div>
+                  </div>
+                  <p class="text-sm mb-0">Your posts have been liked a lot.</p>
+                </div>
+              </div>
+            </a>
+            <a href="#!" class="list-group-item list-group-item-action">
+              <div class="row align-items-center">
+                <div class="col-auto">
+                  <!-- Avatar -->
+                  <img alt="Image placeholder" src="img/content/bia.jpg" 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">Bia Amaro</h4>
+                    </div>
+                    <div class="text-right text-muted">
+                      <small>2 hrs ago</small>
+                    </div>
+                  </div>
+                  <p class="text-sm mb-0">Let's meet at Starbucks at 11:30. Wdyt?</p>
+                </div>
+              </div>
+            </a>
+            <a href="#!" class="list-group-item list-group-item-action">
+              <div class="row align-items-center">
+                <div class="col-auto">
+                  <!-- Avatar -->
+                  <img alt="Image placeholder" src="img/theme/team-5.jpg" 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">Bia Amaro</h4>
+                    </div>
+                    <div class="text-right text-muted">
+                      <small>3 hrs ago</small>
+                    </div>
+                  </div>
+                  <p class="text-sm mb-0">A new issue has been reported for Argon.</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>
+    </ul>
+    <ul class="navbar-nav navbar-nav--menu align-items-center ml-auto ml-md-0">
+      <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-xs rounded-circle">
+                    <img alt="Image placeholder" src="img/content/bia.jpg">
+                  </span>
+            <div class="media-body ml-2 d-none d-lg-block">
+              <span class="mb-0 text-sm  font-weight-bold">Bia Amaro</span>
+            </div>
+          </div>
+        </a>
+
+        <template>
+          <h6 class="dropdown-header">Entrar como</h6>
+          <a href="#!" class="dropdown-item d-flex align-items-center w-100">
+            <span class="avatar avatar-sm rounded-circle mr-2">
+              <img alt="Image placeholder" src="img/content/bia.jpg">
+            </span>
+            <span>Burh</span>
+            <badge rounded type="success" class="ml-auto">Premium</badge>
+          </a>
+          <div class="dropdown-divider"></div>
+          <h6 class="dropdown-header">Meu Burh</h6>
+          <a href="#!" class="dropdown-item">
+            <span>Meu Perfil</span>
+          </a>
+          <a href="#!" class="dropdown-item">
+            <span>Editar Perfil</span>
+          </a>
+          <div class="dropdown-divider"></div>
+          <h6 class="dropdown-header">Configurações</h6>
+          <a href="#!" class="dropdown-item">
+            <span>Sua conta</span>
+          </a>
+          <a href="#!" class="dropdown-item">
+            <span>Avisos & Notificações</span>
+          </a>
+          <a href="#!" class="dropdown-item">
+            <span>Privacidade</span>
+          </a>
+          <div class="dropdown-divider"></div>
+          <a href="#!" class="dropdown-item">
+            <i class="fas fa-door-open"></i>
+            <span>Sair</span>
+          </a>
+
+        </template>
+      </base-dropdown>
+    </ul>
+  </base-nav>
+</template>
+<script>
+  import { CollapseTransition } from 'vue2-transitions';
+  import BaseNav from '@/components/argon-core/Navbar/BaseNav.vue';
+  import Modal from '@/components/argon-core/Modal.vue';
+
+  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/brand/burh-isotipo.svg',
+        description: 'BURH: Suas vagas'
+      },
+      logoFull: {
+        type: String,
+        default: '/img/brand/burh-imagotipo.svg',
+        description: 'BURH: Suas vagas'
+      }
+    },
+    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 {
+        activeNotifications: false,
+        showMenu: false,
+        searchModalVisible: false,
+        searchQuery: '',
+        menuSearch: '',
+        focusSearchControl: false
+      };
+    },
+    methods: {
+      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.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;
+      }
+    },
+    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'); 
+      }
+    },
+    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>