84 lines
2.5 KiB
Vue
84 lines
2.5 KiB
Vue
<template>
|
|
<div class="page">
|
|
<header>
|
|
<div class="logo">
|
|
<router-link to="/">
|
|
<img src="../assets/images/HeaderLogo.png">
|
|
</router-link>
|
|
</div>
|
|
<div class="sublogo">
|
|
Careers
|
|
</div>
|
|
<nav class="nav">
|
|
<div class="nav-item">
|
|
<router-link class="nav-link" to="/jobs">Jobs</router-link>
|
|
</div>
|
|
<div class="nav-item">
|
|
<router-link class="nav-link" to="/bookmarks">Bookmarks</router-link>
|
|
</div>
|
|
<div class="nav-item">
|
|
<router-link class="nav-link" to="/about">About Us</router-link>
|
|
</div>
|
|
</nav>
|
|
<div class="selectors">
|
|
<select class="bluefire-selector" id="selHeaderCountry" :value="countryId" @change="changeCountry">
|
|
<option value="0">All Countries</option>
|
|
<option v-for="country in $store.state.countries" :key="country.CountryID" :value="country.CountryID">{{ country.CountryName }}</option>
|
|
</select>
|
|
<select class="bluefire-selector" id="selHeaderCity" :value="cityId" @change="changeCity">
|
|
<option value="0">All Cities</option>
|
|
<option v-for="city in $store.state.cities" :key="city.CityID" :value="city.CityID">{{ city.CityName }}</option>
|
|
</select>
|
|
</div>
|
|
<div class="search">
|
|
<input type="text" id="txtSearch" class="header-search" placeholder="Search for position"/>
|
|
<a class="button-search" href="#">
|
|
<img src="../assets/images/search-icon.png" alt="Search">
|
|
</a>
|
|
</div>
|
|
<div class="account nav">
|
|
<div class="nav-item">
|
|
<router-link class="nav-link" to="/login">Sign In</router-link>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
<div>
|
|
<router-view/>
|
|
</div>
|
|
<footer>
|
|
<div class="main-footer">
|
|
<div class="logo">
|
|
<img src="../assets/images/HeaderLogo.png">
|
|
</div>
|
|
<div class="sublogo">
|
|
Careers
|
|
</div>
|
|
<div class="contact">
|
|
<p>Contact Us at +62888123123</p>
|
|
<p>Leave a Message</p>
|
|
</div>
|
|
</div>
|
|
<div class="copyright">
|
|
2020. All Rights Reserved.
|
|
</div>
|
|
</footer>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import { mapState } from 'vuex';
|
|
|
|
export default {
|
|
computed: mapState(["countryId","cityId"]),
|
|
methods: {
|
|
changeCountry(e) {
|
|
this.$store.commit('setCountryId',e.target.value);
|
|
},
|
|
changeCity(e) {
|
|
this.$store.commit('setCityId',e.target.value);
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
<style>
|
|
</style>
|