126 lines
2.8 KiB
Vue
126 lines
2.8 KiB
Vue
<script>
|
|
import {mapState, mapMutations} from "vuex";
|
|
import AppNavigation from "./AppNavigation.vue";
|
|
import feather from "feather-icons";
|
|
|
|
export default {
|
|
props: ["showMobileMenu"],
|
|
|
|
components: {
|
|
AppNavigation,
|
|
},
|
|
data: () => {
|
|
return {
|
|
modal: false,
|
|
};
|
|
},
|
|
|
|
computed: {
|
|
...mapState(["socialProfiles"]),
|
|
|
|
isMobileMenuOpened() {
|
|
return this.$store.state.isMobileMenuOpened
|
|
}
|
|
},
|
|
|
|
watch: {
|
|
// Watch for route change to hide mobile menu
|
|
isMobileMenuOpened() {
|
|
feather.replace()
|
|
}
|
|
},
|
|
|
|
mounted() {
|
|
feather.replace();
|
|
},
|
|
|
|
|
|
methods: {
|
|
themeSwitcher() {
|
|
this.$colorMode.preference =
|
|
this.$colorMode.value === "light" ? "dark" : "light";
|
|
},
|
|
|
|
toggleMobileMenu() {
|
|
this.$store.commit('toggleMobileMenu')
|
|
},
|
|
|
|
toggleModal() {
|
|
if (this.modal) {
|
|
// Stop screen scrolling
|
|
document
|
|
.getElementsByTagName("html")[0]
|
|
.classList.remove("overflow-y-hidden");
|
|
this.modal = false;
|
|
} else {
|
|
document
|
|
.getElementsByTagName("html")[0]
|
|
.classList.add("overflow-y-hidden");
|
|
this.modal = true;
|
|
}
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<template>
|
|
<nav id="nav" class="top-0 z-50 absolute w-full">
|
|
<div class="sm:w-full sm:px-14 px-4">
|
|
<!-- Header -->
|
|
<div
|
|
class="
|
|
z-10
|
|
block
|
|
sm:flex sm:justify-between sm:items-center
|
|
py-6
|
|
"
|
|
>
|
|
<!-- Header menu links and small screen hamburger menu -->
|
|
<div class="flex justify-between items-center px-6 sm:px-0">
|
|
<!-- Header logos -->
|
|
<div>
|
|
<NuxtLink to="/">
|
|
<img
|
|
src="/logo-white.png"
|
|
alt="Logo"
|
|
class="sm:w-32 w-24"
|
|
/>
|
|
</NuxtLink>
|
|
</div>
|
|
|
|
<!-- Small screen hamburger menu -->
|
|
<div class="sm:hidden">
|
|
<button
|
|
@click="toggleMobileMenu()"
|
|
type="button"
|
|
class="focus:outline-none"
|
|
aria-label="Hamburger Menu"
|
|
>
|
|
<div class="h-7 w-7 mt-1 fill-current text-white">
|
|
<div v-show="!isMobileMenuOpened"><i data-feather="menu"/></div>
|
|
<div v-show="isMobileMenuOpened"><i data-feather="x"/></div>
|
|
</div>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Header links -->
|
|
<AppNavigation
|
|
:toggleModal="toggleModal"
|
|
:modal="modal"
|
|
/>
|
|
|
|
<div class="flex flex-row">
|
|
<SocialButton v-for="social in socialProfiles"
|
|
:key="social.id"
|
|
:feather-icon="social.icon"
|
|
:url="social.url"
|
|
class="hidden md:block"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</nav>
|
|
</template>
|