add mobile navigation
This commit is contained in:
parent
787d1a9c1a
commit
30deaf9712
3 changed files with 132 additions and 16 deletions
|
|
@ -1,7 +1,9 @@
|
|||
<script setup lang="ts">
|
||||
const { t } = useI18n({ useScope: 'global' })
|
||||
const localePath = useLocalePath()
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'open'): void
|
||||
}>()
|
||||
const menuitems = [
|
||||
{
|
||||
title: "Features",
|
||||
|
|
@ -27,10 +29,10 @@ const onScroll = ref(false)
|
|||
|
||||
onMounted(() => {
|
||||
window.addEventListener('scroll', () => {
|
||||
if(window.scrollY > 0){
|
||||
if (window.scrollY > 0) {
|
||||
headerScrollClass.value = 'bg-white text-c-darkblue drop-shadow-lg'
|
||||
onScroll.value = true
|
||||
}else{
|
||||
} else {
|
||||
headerScrollClass.value = 'bg-transparent text-white'
|
||||
onScroll.value = false
|
||||
}
|
||||
|
|
@ -46,7 +48,8 @@ onUnmounted(() => {
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<header class="w-full fixed top-0 left-0 z-20 h-20 md:h-24 flex justify-center items-center px-4 transition-all" :class="headerScrollClass">
|
||||
<header class="w-full fixed top-0 left-0 z-20 h-20 md:h-24 flex justify-center items-center px-4 transition-all"
|
||||
:class="headerScrollClass">
|
||||
<div class="container max-w-[1200px] flex justify-between items-center">
|
||||
<!-- LOGO -->
|
||||
<NuxtLink :to="localePath('/')"><img src="~/assets/img/logo_conop_systems.png" alt="conop-systems logo"
|
||||
|
|
@ -56,31 +59,36 @@ onUnmounted(() => {
|
|||
<nav class="hidden md:block">
|
||||
<ul class="gap-4 text-base lg:text-lg flex">
|
||||
<li>
|
||||
<NuxtLink exact-active-class="text-c-blue underline" class="hover:text-c-blue transition-all hover:scale-50 hover:tracking-wider"
|
||||
<NuxtLink exact-active-class="text-c-blue underline"
|
||||
class="hover:text-c-blue transition-all hover:scale-50 hover:tracking-wider"
|
||||
:to="localePath('/')">
|
||||
{{ t('header.home') }}
|
||||
</NuxtLink>
|
||||
</li>
|
||||
<li>
|
||||
<NuxtLink exact-active-class="text-c-blue underline" class="hover:text-c-blue transition-all hover:scale-50 hover:tracking-wider"
|
||||
<NuxtLink exact-active-class="text-c-blue underline"
|
||||
class="hover:text-c-blue transition-all hover:scale-50 hover:tracking-wider"
|
||||
:to="localePath('/services')">
|
||||
{{ t('header.services') }}
|
||||
</NuxtLink>
|
||||
</li>
|
||||
<li>
|
||||
<NuxtLink exact-active-class="text-c-blue underline" class="hover:text-c-blue transition-all hover:scale-50 hover:tracking-wider"
|
||||
<NuxtLink exact-active-class="text-c-blue underline"
|
||||
class="hover:text-c-blue transition-all hover:scale-50 hover:tracking-wider"
|
||||
:to="localePath('/portfolio')">
|
||||
{{ t('header.portfolio') }}
|
||||
</NuxtLink>
|
||||
</li>
|
||||
<li>
|
||||
<NuxtLink exact-active-class="text-c-blue underline" class="hover:text-c-blue transition-all hover:scale-50 hover:tracking-wider"
|
||||
<NuxtLink exact-active-class="text-c-blue underline"
|
||||
class="hover:text-c-blue transition-all hover:scale-50 hover:tracking-wider"
|
||||
:to="localePath('/about')">
|
||||
{{ t('header.about') }}
|
||||
</NuxtLink>
|
||||
</li>
|
||||
<li>
|
||||
<NuxtLink exact-active-class="text-c-blue underline" class="hover:text-c-blue transition-all hover:scale-50 hover:tracking-wider"
|
||||
<NuxtLink exact-active-class="text-c-blue underline"
|
||||
class="hover:text-c-blue transition-all hover:scale-50 hover:tracking-wider"
|
||||
:to="localePath('/blog')">
|
||||
{{ t('header.blog') }}
|
||||
</NuxtLink>
|
||||
|
|
@ -90,16 +98,19 @@ onUnmounted(() => {
|
|||
<!-- LET'S TALK BTN -->
|
||||
<div class=" justify-between items-center gap-2 md:flex">
|
||||
<LangDropdown class="hidden md:inline-block" :onscroll="onScroll"></LangDropdown>
|
||||
<button class="hidden lg:inline-block btn__talk px-4 py-2 uppercase text-base rounded-full" :class="onScroll? 'border border-solid border-c-darkblue': 'border border-solid border-white border-opacity-40 shadow-md'">
|
||||
<button class="hidden lg:inline-block btn__talk px-4 py-2 uppercase text-base rounded-full"
|
||||
:class="onScroll ? 'border border-solid border-c-darkblue' : 'border border-solid border-white border-opacity-40 shadow-md'">
|
||||
{{ t('header.letstalk') }}
|
||||
<Icon name="material-symbols-light:arrow-right-alt-rounded" class="btn__talk__icon" size="40" />
|
||||
</button>
|
||||
</div>
|
||||
<!-- HAMBURGER MENU ICON -->
|
||||
<div class=" block sm:block md:hidden ">
|
||||
<Icon name="material-symbols-light:menu-rounded" size="50" color="white" />
|
||||
<div class=" block sm:block md:hidden">
|
||||
<Icon name="material-symbols-light:menu-rounded" size="50" :color="onScroll ? '#00304A' : 'white'"
|
||||
@click="$emit('open')" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</header>
|
||||
</template>
|
||||
|
||||
|
|
@ -127,5 +138,4 @@ onUnmounted(() => {
|
|||
&:hover .btn__talk__icon {
|
||||
color: $conop-dark-blue;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
}</style>
|
||||
90
components/MobileNav.vue
Normal file
90
components/MobileNav.vue
Normal file
|
|
@ -0,0 +1,90 @@
|
|||
<script setup lang="ts">
|
||||
const { t } = useI18n({ useScope: 'global' })
|
||||
const router = useRouter()
|
||||
const localePath = useLocalePath()
|
||||
const props = defineProps({
|
||||
show: {
|
||||
type: Boolean,
|
||||
required: true,
|
||||
default: false
|
||||
}
|
||||
})
|
||||
const emit = defineEmits<{
|
||||
(e: 'close'): void
|
||||
}>()
|
||||
|
||||
const mobileNav = ref<HTMLElement>()
|
||||
|
||||
const navigateTo = (path: string) => {
|
||||
emit('close')
|
||||
router.push(localePath(path))
|
||||
}
|
||||
|
||||
const closeOnClickOutside = (event: any) => {
|
||||
if (!(mobileNav.value?.contains(event.target)) && !(document.querySelector("header")?.contains(event.target))) {
|
||||
emit('close')
|
||||
}
|
||||
}
|
||||
onMounted(() => {
|
||||
window.addEventListener('click', closeOnClickOutside);
|
||||
});
|
||||
|
||||
onUnmounted(() => {
|
||||
window.removeEventListener('click', closeOnClickOutside);
|
||||
});
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<!-- NAVIGATION -->
|
||||
<nav id="mobile-nav" ref="mobileNav" :class="show ? 'translate-x-0' : 'translate-x-full'"
|
||||
class="fixed top-0 right-0 z-40 h-screen p-4 pt-6 overflow-y-auto transition-transform bg-white w-64 md:hidden">
|
||||
<div class="flex justify-end w-full">
|
||||
<Icon name="mdi:close" class="cursor-pointer transition-all focus:-scale-50" size="40" color="#00304A"
|
||||
@click="$emit('close')" />
|
||||
</div>
|
||||
|
||||
<ul class="gap-4 text-base lg:text-lg flex flex-col w-full">
|
||||
<li class="w-full">
|
||||
<NuxtLink exact-active-class="text-c-blue bg-blue-100"
|
||||
class="hover:text-c-blue transition-colors hover:tracking-wider p-2 block rounded-lg w-full"
|
||||
:to="localePath('/')" @click.prevent="$emit('close')">
|
||||
{{ t('header.home') }}
|
||||
</NuxtLink>
|
||||
</li>
|
||||
<li class="w-full">
|
||||
<NuxtLink exact-active-class="text-c-blue bg-blue-100"
|
||||
class="hover:text-c-blue transition-colors hover:tracking-wider p-2 block rounded-lg w-full"
|
||||
:to="localePath('/services')" @click.prevent="$emit('close')">
|
||||
{{ t('header.services') }}
|
||||
</NuxtLink>
|
||||
</li>
|
||||
<li class="w-full">
|
||||
<NuxtLink exact-active-class="text-c-blue bg-blue-100"
|
||||
class="hover:text-c-blue transition-colors hover:tracking-wider p-2 block rounded-lg w-full"
|
||||
:to="localePath('/portfolio')" @click.prevent="$emit('close')">
|
||||
{{ t('header.portfolio') }}
|
||||
</NuxtLink>
|
||||
</li>
|
||||
<li class="w-full">
|
||||
<NuxtLink exact-active-class="text-c-blue bg-blue-100"
|
||||
class="hover:text-c-blue transition-colors hover:tracking-wider p-2 block rounded-lg w-full"
|
||||
:to="localePath('/about')" @click.prevent="$emit('close')">
|
||||
{{ t('header.about') }}
|
||||
</NuxtLink>
|
||||
</li>
|
||||
<li class="w-full">
|
||||
<NuxtLink exact-active-class="text-c-blue bg-blue-100"
|
||||
class="hover:text-c-blue transition-colors hover:tracking-wider p-2 block rounded-lg w-full"
|
||||
:to="localePath('/blog')" @click.prevent="$emit('close')">
|
||||
{{ t('header.blog') }}
|
||||
</NuxtLink>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</template>
|
||||
|
||||
|
||||
|
||||
<style scoped></style>
|
||||
|
|
@ -1,13 +1,29 @@
|
|||
<script setup lang="ts">
|
||||
const showMobileNav = ref(false)
|
||||
|
||||
</script>
|
||||
<template>
|
||||
<div>
|
||||
<AppHeader></AppHeader>
|
||||
<AppHeader @open="showMobileNav = true"></AppHeader>
|
||||
<MobileNav :show="showMobileNav" @close="showMobileNav = false"></MobileNav>
|
||||
<div v-if="showMobileNav" class="texture transition-all">
|
||||
|
||||
</div>
|
||||
<slot></slot>
|
||||
<AppFooter></AppFooter>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
<style scoped></style>
|
||||
<style lang="scss" scoped>
|
||||
.texture {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
/* Adjust the alpha value for the desired darkness */
|
||||
z-index: 30;
|
||||
}
|
||||
</style>
|
||||
Loading…
Add table
Add a link
Reference in a new issue