Server : Apache System : Linux server2.corals.io 4.18.0-348.2.1.el8_5.x86_64 #1 SMP Mon Nov 15 09:17:08 EST 2021 x86_64 User : corals ( 1002) PHP Version : 7.4.33 Disable Function : exec,passthru,shell_exec,system Directory : /home/corals/vreg/components/layout/ |
<template>
<section class="top-fixed"
:class="{'howToPage':isHowToPage,'white-bg':addWhiteBgClass,'full-height':addFullHeightClass}">
<section class="top-bar">
<div class="container">
<div class="top-bar-inner">
<div class="left">
<p><span class="text">{{ appDomain }} is a privately owned website that is not affiliated with any government agencies.</span>
<span class="top-bar-link"
v-b-toggle.top-hidden-content
@click.prevent="showMoreClicked=!showMoreClicked"
:class="{'open':showMoreClicked}">Read <span class="more">More</span> <span
class="less">Less</span>
<svg class="top-bar-arrow" width="10" height="8" viewBox="0 0 10 8" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path d="M8.56002 0.960022L4.78001 4.38004L1 0.960022M8.56002 3.61993L4.78001 7.03995L1 3.61993"
stroke="#2FABFF" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</span>
</p>
</div>
<div class="right">
<a href="#">
<svg width="9" height="15" viewBox="0 0 9 15" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M8.25 0.5C8.25 0.223858 8.02614 0 7.75 0H6C5.00544 0 4.05161 0.395088 3.34835 1.09835C2.64509 1.80161 2.25 2.75544 2.25 3.75V5.5C2.25 5.77614 2.02614 6 1.75 6H0.5C0.223858 6 0 6.22386 0 6.5V8.5C0 8.77614 0.223858 9 0.5 9H1.75C2.02614 9 2.25 9.22386 2.25 9.5V14.5C2.25 14.7761 2.47386 15 2.75 15H4.75C5.02614 15 5.25 14.7761 5.25 14.5V9.5C5.25 9.22386 5.47386 9 5.75 9H7.10961C7.33905 9 7.53904 8.84385 7.59468 8.62127L8.09468 6.62127C8.17358 6.30569 7.9349 6 7.60961 6H5.75C5.47386 6 5.25 5.77614 5.25 5.5V3.75C5.25 3.55109 5.32902 3.36032 5.46967 3.21967C5.61032 3.07902 5.80109 3 6 3H7.75C8.02614 3 8.25 2.77614 8.25 2.5V0.5Z"
fill="#9AB5CE"/>
</svg>
</a>
<a href="#">
<svg width="18" height="17" viewBox="0 0 18 17" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M13.397 4.375H13.4045M5.52197 1H13.022C15.093 1 16.772 2.67893 16.772 4.75V12.25C16.772 14.3211 15.093 16 13.022 16H5.52197C3.4509 16 1.77197 14.3211 1.77197 12.25V4.75C1.77197 2.67893 3.4509 1 5.52197 1ZM12.272 8.0275C12.3645 8.65168 12.2579 9.28916 11.9673 9.84926C11.6767 10.4094 11.2168 10.8636 10.6532 11.1473C10.0896 11.431 9.45081 11.5297 8.82781 11.4294C8.20482 11.3292 7.62929 11.0351 7.1831 10.5889C6.73691 10.1427 6.44277 9.56716 6.34252 8.94416C6.24228 8.32116 6.34102 7.68242 6.62472 7.11878C6.90841 6.55514 7.36261 6.09531 7.92271 5.80468C8.48281 5.51406 9.12029 5.40744 9.74447 5.5C10.3812 5.59441 10.9706 5.8911 11.4257 6.34623C11.8809 6.80136 12.1776 7.39081 12.272 8.0275Z"
stroke="#9AB5CE" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</a>
</div>
</div>
<b-collapse id="top-hidden-content">
<div class="top-hidden-content">
<p>You are NOT required to purchase anything from this company and the company is NOT affiliated, endorsed,
or approved by any governmental entity. The item offered in this advertisement has NOT been approved or
endorsed by any governmental agency, and this offer is NOT being made by an agency of the government.</p>
</div>
</b-collapse>
</div>
</section>
<!-- Green Bar -->
<section class="green-bar" v-if="isHowToPage">
<div class="container">
<h4>*MONEY BACK GUARANTEE.
<nuxt-link to="/">START YOUR RENEWAL</nuxt-link>
</h4>
</div>
</section>
<!-- Main Navigation Menu -->
<section class="main-menu">
<div class="container">
<nav class="navbar navbar-light" :class="{'navbar-expand-lg':!isHowToPage}">
<nuxt-link class="navbar-brand" to="/"><img :src="logoPath" alt="Vehicle Renew"></nuxt-link>
<button class="navbar-toggler navbarText"
:class="showMobileMenuItems ? null : 'collapsed'"
:aria-expanded="showMobileMenuItems ? 'true' : 'false'"
aria-controls="collapse-4"
type="button"
@click.prevent="menuBtnClicked">
<svg class="bar-icon" width="19" height="14" viewBox="0 0 19 14" fill="none"
xmlns="http://www.w3.org/2000/svg">
<line class="top" x1="1" y1="1" x2="18" y2="1" stroke="#112288" stroke-width="2"
stroke-linecap="round"/>
<line class="middle" x1="1" y1="7" x2="18" y2="7" stroke="#112288" stroke-width="2"
stroke-linecap="round"/>
<line class="bottom" x1="1" y1="13" x2="18" y2="13" stroke="#112288" stroke-width="2"
stroke-linecap="round"/>
</svg>
</button>
<client-only>
<b-collapse id="navbarText" class="navbar-collapse" v-model="showMobileMenuItems">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<nuxt-link class="nav-link" to="how-it-works">How it works</nuxt-link>
</li>
<li class="nav-item dropdown">
<b-nav-item-dropdown>
<template #button-content>
Company
<svg width="10" height="7" viewBox="0 0 10 7" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M6.20006 6.06466C5.80008 6.54961 5.05714 6.54961 4.65715 6.06466L1.21089 1.88628C0.672927 1.23404 1.13687 0.249999 1.98234 0.249999L8.87487 0.25C9.72034 0.25 10.1843 1.23404 9.64633 1.88628L6.20006 6.06466Z"
fill="#182D40"/>
</svg>
</template>
<b-dropdown-item href="/about-us" @click.prevent="$router.push({path:'/about-us'})">
About us
</b-dropdown-item>
<b-dropdown-item href="#">Courier <span>it's our blog</span></b-dropdown-item>
<b-dropdown-item href="/reviews" @click.prevent="$router.push({path:'/reviews'})">
Reviews
</b-dropdown-item>
</b-nav-item-dropdown>
</li>
<li class="nav-item dropdown">
<b-nav-item-dropdown>
<template #button-content>
Support
<svg width="10" height="7" viewBox="0 0 10 7" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M6.20006 6.06466C5.80008 6.54961 5.05714 6.54961 4.65715 6.06466L1.21089 1.88628C0.672927 1.23404 1.13687 0.249999 1.98234 0.249999L8.87487 0.25C9.72034 0.25 10.1843 1.23404 9.64633 1.88628L6.20006 6.06466Z"
fill="#182D40"/>
</svg>
</template>
<b-dropdown-item href="/contact-us" @click.prevent="$router.push({path:'/contact-us'})">
Contact us
</b-dropdown-item>
<b-dropdown-item href="/faq" @click.prevent="$router.push({path:'/faq'})">FAQ</b-dropdown-item>
</b-nav-item-dropdown>
</li>
<li class="nav-item">
<nuxt-link class="nav-link get-started" to="/"> Get Started</nuxt-link>
</li>
<li class="nav-item dropdown" v-if="isLoggedIn">
<b-nav-item-dropdown>
<template #button-content>
{{ storedOrder.first_name }}
{{ storedOrder.last_name }}
<svg width="10" height="7" viewBox="0 0 10 7" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M6.20006 6.06466C5.80008 6.54961 5.05714 6.54961 4.65715 6.06466L1.21089 1.88628C0.672927 1.23404 1.13687 0.249999 1.98234 0.249999L8.87487 0.25C9.72034 0.25 10.1843 1.23404 9.64633 1.88628L6.20006 6.06466Z"
fill="#182D40"/>
</svg>
</template>
<b-dropdown-item href="/portal" @click.prevent="$router.push({path:'/portal'})">
<p class="text-success">
Portal
</p>
</b-dropdown-item>
<b-dropdown-item href="/logout" @click.prevent="logout">
<p class="text-danger">
Logout
</p>
</b-dropdown-item>
</b-nav-item-dropdown>
</li>
<li class="nav-item" v-if="!isLoggedIn">
<nuxt-link class="nav-link login" to="/portal/login">
Login
<svg width="7" height="9" viewBox="0 0 7 9" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M6.06466 3.72856C6.54961 4.12854 6.54962 4.87148 6.06466 5.27147L1.88629 8.71773C1.23405 9.25569 0.25 8.79175 0.25 7.94628L0.25 1.05375C0.25 0.208278 1.23404 -0.255667 1.88628 0.282292L6.06466 3.72856Z"
fill="#2FABFF"/>
</svg>
</nuxt-link>
</li>
</ul>
<div class="d-md-none mobile-menu-icons">
<a href="#">
<svg width="9" height="15" viewBox="0 0 9 15" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M8.25 0.5C8.25 0.223858 8.02614 0 7.75 0H6C5.00544 0 4.05161 0.395088 3.34835 1.09835C2.64509 1.80161 2.25 2.75544 2.25 3.75V5.5C2.25 5.77614 2.02614 6 1.75 6H0.5C0.223858 6 0 6.22386 0 6.5V8.5C0 8.77614 0.223858 9 0.5 9H1.75C2.02614 9 2.25 9.22386 2.25 9.5V14.5C2.25 14.7761 2.47386 15 2.75 15H4.75C5.02614 15 5.25 14.7761 5.25 14.5V9.5C5.25 9.22386 5.47386 9 5.75 9H7.10961C7.33905 9 7.53904 8.84385 7.59468 8.62127L8.09468 6.62127C8.17358 6.30569 7.9349 6 7.60961 6H5.75C5.47386 6 5.25 5.77614 5.25 5.5V3.75C5.25 3.55109 5.32902 3.36032 5.46967 3.21967C5.61032 3.07902 5.80109 3 6 3H7.75C8.02614 3 8.25 2.77614 8.25 2.5V0.5Z"
fill="#9AB5CE"/>
</svg>
</a>
<a href="#">
<svg width="18" height="17" viewBox="0 0 18 17" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M13.397 4.375H13.4045M5.52197 1H13.022C15.093 1 16.772 2.67893 16.772 4.75V12.25C16.772 14.3211 15.093 16 13.022 16H5.52197C3.4509 16 1.77197 14.3211 1.77197 12.25V4.75C1.77197 2.67893 3.4509 1 5.52197 1ZM12.272 8.0275C12.3645 8.65168 12.2579 9.28916 11.9673 9.84926C11.6767 10.4094 11.2168 10.8636 10.6532 11.1473C10.0896 11.431 9.45081 11.5297 8.82781 11.4294C8.20482 11.3292 7.62929 11.0351 7.1831 10.5889C6.73691 10.1427 6.44277 9.56716 6.34252 8.94416C6.24228 8.32116 6.34102 7.68242 6.62472 7.11878C6.90841 6.55514 7.36261 6.09531 7.92271 5.80468C8.48281 5.51406 9.12029 5.40744 9.74447 5.5C10.3812 5.59441 10.9706 5.8911 11.4257 6.34623C11.8809 6.80136 12.1776 7.39081 12.272 8.0275Z"
stroke="#9AB5CE" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</a>
</div>
</b-collapse>
</client-only>
</nav>
</div>
</section>
</section>
</template>
<script>
export default {
name: "Header",
data() {
return {
showMoreClicked: false,
addWhiteBgClass: false,
addFullHeightClass: false,
showMobileMenuItems: false
}
},
mounted() {
this.onScroll();
},
methods: {
menuBtnClicked() {
this.addFullHeightClass = !this.addFullHeightClass;
this.showMobileMenuItems = !this.showMobileMenuItems;
if (this.addFullHeightClass) {
document.body.classList.add('no-scroll');
this.addWhiteBgClass = true;
} else {
document.body.classList.remove('no-scroll');
this.onScroll();
}
},
onScroll() {
if (!this.isHowToPage) {
return;
}
this.addWhiteBgClass = Math.round(window.scrollY) >= 200;
},
logout() {
this.$store.commit('RESET_STORE');
this.$router.push({
path: '/'
});
},
},
beforeMount() {
window.addEventListener('scroll', this.onScroll);
},
beforeDestroy() {
window.removeEventListener('scroll', this.onScroll);
},
computed: {
isHowToPage() {
return this.$route.name === 'how-it-works';
},
logoPath() {
if (this.addWhiteBgClass || this.addFullHeightClass || !this.isHowToPage) {
return `/images/logo-generic.svg`;
} else {
return `/images/logo-generic-white.svg`;
}
}
},
watch: {
$route() {
this.showMobileMenuItems = false;
this.addWhiteBgClass = false;
this.addFullHeightClass = false;
document.body.classList.remove('no-scroll');
},
}
}
</script>
<style>
.slide-enter-active {
-moz-transition-duration: 0.5s;
-webkit-transition-duration: 0.5s;
-o-transition-duration: 0.5s;
transition-duration: 0.5s;
-moz-transition-timing-function: ease-in;
-webkit-transition-timing-function: ease-in;
-o-transition-timing-function: ease-in;
transition-timing-function: ease-in;
}
.slide-leave-active {
-moz-transition-duration: 0.5s;
-webkit-transition-duration: 0.5s;
-o-transition-duration: 0.5s;
transition-duration: 0.5s;
-moz-transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
-webkit-transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
-o-transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
}
.slide-enter-to, .slide-leave {
max-height: 100px;
overflow: hidden;
}
.slide-enter, .slide-leave-to {
overflow: hidden;
max-height: 0;
}
</style>