334 lines
9.4 KiB
Vue
334 lines
9.4 KiB
Vue
<template>
|
|
<header
|
|
:class="[{ mobile: screenWidth < 1350, desk: screenWidth >= 1350 }, { active: scrollPosition > 50 }]"
|
|
role="banner"
|
|
>
|
|
<SettingsPanel v-if="screenWidth >= 1350" />
|
|
<div class="headContent">
|
|
<div class="logoBox" role="button" tabindex="0" aria-label="Startseite" @click="navigateTo('/')">
|
|
<NuxtImg
|
|
provider="strapi"
|
|
src="/uploads/DML_Logo_grey_2024_c51210b70c.svg"
|
|
alt="digimedialoop Logo"
|
|
loading="eager"
|
|
/>
|
|
</div>
|
|
<div
|
|
class="navigationBox"
|
|
:class="[
|
|
isMenuOpen ? 'menu-active' : '',
|
|
screenWidth < 1350 ? 'mobile' : 'desk'
|
|
]"
|
|
role="navigation"
|
|
aria-label="Hauptnavigation"
|
|
tabindex="0"
|
|
>
|
|
<div
|
|
class="closer"
|
|
@click="toggleMenu"
|
|
@keydown.enter="toggleMenu"/>
|
|
<nav v-if="isMenuOpen || screenWidth > 1350" aria-expanded="true">
|
|
<div class="mobilNavLogo" v-if="false">
|
|
<NuxtImg
|
|
provider="strapi"
|
|
src="/uploads/DML_Logo_mint_negative_2024_9257db5430.svg"
|
|
alt="digimedialoop Logo"
|
|
width="120"
|
|
v-if="screenWidth < 1350"
|
|
/>
|
|
</div>
|
|
|
|
<NuxtLinkLocale
|
|
v-for="link in navigationLinks"
|
|
:key="link.routeKey"
|
|
:to="localePath(link.routeKey)"
|
|
@click="handleMobileClose"
|
|
>
|
|
{{ $t(link.label) }}
|
|
</NuxtLinkLocale>
|
|
<a
|
|
class="menu_link" href="#"
|
|
role="button"
|
|
aria-label="Kontaktformular öffnen"
|
|
@click="toggleContactBubble"
|
|
>
|
|
{{ $t('contact') }}
|
|
</a>
|
|
<SettingsPanel v-if="screenWidth < 1350" />
|
|
</nav>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { computed } from 'vue'
|
|
import { useMainStore } from '@/stores/main'
|
|
import { useRuntimeConfig, navigateTo } from '#app'
|
|
import { useLocalePath } from '#i18n'
|
|
|
|
const localePath = useLocalePath()
|
|
const mainStore = useMainStore()
|
|
const config = useRuntimeConfig()
|
|
|
|
const navigationLinks = [
|
|
{ routeKey: 'webagency', label: 'webagency' },
|
|
{ routeKey: 'services', label: 'services' },
|
|
{ routeKey: 'references', label: 'references' }
|
|
]
|
|
|
|
const isMenuOpen = computed(() => mainStore.menuOpen)
|
|
const scrollPosition = computed(() => mainStore.scrollPosition)
|
|
const screenWidth = computed(() => mainStore.screenWidth)
|
|
const cmsUrl = computed(() => config.public.cmsBaseUrl)
|
|
|
|
const toggleMenu = () => mainStore.toggleMenu()
|
|
const toggleContactBubble = () => mainStore.toggleContactBubble()
|
|
|
|
const handleMobileClose = () => {
|
|
if (screenWidth.value < 1350 && isMenuOpen.value) {
|
|
toggleMenu()
|
|
}
|
|
}
|
|
|
|
</script>
|
|
|
|
<style lang="sass">
|
|
header
|
|
position: fixed
|
|
top: 0
|
|
left: 0
|
|
margin: 0
|
|
width: 100%
|
|
background-image: linear-gradient(to bottom, rgba(white, 1), rgba(white, 1), rgba(white, 1), rgba(white, 0))
|
|
box-sizing: border-box
|
|
z-index: 20
|
|
&::before, &::after
|
|
content: ''
|
|
position: absolute
|
|
z-index: 90
|
|
backdrop-filter: blur(10px) brightness(1.05) // Glaseffekt: Unschärfe + leicht erhöhte Helligkeit
|
|
-webkit-backdrop-filter: blur(10px) brightness(1.05)
|
|
border: 1px solid rgba(255, 255, 255, 0.2) // leichte Transparenz des Randes
|
|
background: radial-gradient(circle, rgba(103, 202, 172, 0.8), rgba(103, 202, 172, 0.6), rgba(103, 202, 172, 0.4))
|
|
background-size: 150% 150%
|
|
opacity: 0.85 // Sichtbarkeit anpassen, aber noch leicht transparent
|
|
z-index: 6
|
|
transition: .8s
|
|
box-shadow: $innerShadow
|
|
overflow: hidden
|
|
&::before
|
|
width: 60vw
|
|
height: 18rem
|
|
border-radius: $loopShape
|
|
top: -12rem
|
|
right: -5vw
|
|
animation: bubble-wobble 8s infinite ease alternate, gradient-animation 20s infinite alternate ease-in-out
|
|
z-index: 6
|
|
@media(max-width: $breakPointMD)
|
|
height: 15rem
|
|
&::after
|
|
width: 28vw
|
|
height: 12rem
|
|
border-radius: $loopShape
|
|
top: -2rem
|
|
right: -6vw
|
|
animation: bubble-wobble 7s infinite ease alternate, gradient-animation 12s infinite alternate ease-in-out
|
|
@media(max-width: $breakPointMD)
|
|
height: 8rem
|
|
right: -10vw
|
|
// MOBILE NAVIGATION
|
|
&.mobile
|
|
top: 0
|
|
.headContent
|
|
padding: 0
|
|
.logoBox
|
|
width: 50%
|
|
z-index: 102
|
|
img
|
|
margin-top: 1.5rem //5rem
|
|
&.active
|
|
.logoBox
|
|
img
|
|
margin-top: 3rem
|
|
.navigationBox
|
|
display: block
|
|
position: relative
|
|
background-color: $darkgrey
|
|
width: 4rem
|
|
height: 4rem
|
|
z-index: 8
|
|
border-radius: 50%
|
|
margin-right: 5vw
|
|
margin-top: 2rem
|
|
.closer
|
|
position: relative
|
|
width: 100%
|
|
height: 4rem
|
|
&::after, &::before
|
|
position: absolute
|
|
content: ''
|
|
width: 2rem
|
|
z-index: 12
|
|
height: 5px
|
|
border-radius: 4px
|
|
background-color: white
|
|
right: 75%
|
|
transform: translateX(100%)
|
|
transition: .8s
|
|
&::before
|
|
top: 35%
|
|
&::after
|
|
top: 55%
|
|
nav
|
|
display: none
|
|
background-image: none
|
|
background: transparent
|
|
border: none
|
|
padding-top: 0rem !important
|
|
.menu_link
|
|
margin-left: 1.5rem
|
|
transition: .8s
|
|
&:hover
|
|
transform: scale(1.06)
|
|
background-image: radial-gradient(rgba($primaryColor, .1), transparent, transparent)
|
|
box-shadow: 0 0 0 0 transparent
|
|
border-radius: 20px
|
|
a, .menu_link
|
|
display: block
|
|
color: white
|
|
text-align: left
|
|
margin-bottom: .5rem
|
|
padding: 1.6rem 2.8rem .4rem
|
|
position: relative
|
|
font-size: 1.6rem !important
|
|
width: auto
|
|
max-width: 18rem
|
|
text-transform: uppercase
|
|
font-family: 'Mainfont-Bold'
|
|
&::before
|
|
content: ''
|
|
width: 1rem
|
|
height: .6rem
|
|
background-color: rgba($primaryColor, .9)
|
|
border-radius: $loopShape
|
|
position: absolute
|
|
top: 2.4rem
|
|
left: 1rem
|
|
border-radius: 20px
|
|
&:hover
|
|
transform: scale(1.06)
|
|
background-image: radial-gradient(rgba($primaryColor, .1), transparent, transparent)
|
|
box-shadow: 0 0 0 0 transparent
|
|
border-radius: 20px
|
|
|
|
&.menu-active
|
|
width: 100vw
|
|
height: 80vh
|
|
border-radius: 5px
|
|
margin: 0
|
|
background-color: rgba($darkgrey, .9)
|
|
.closer
|
|
&::before, &::after
|
|
top: 2rem
|
|
right: 1rem
|
|
&::before
|
|
transform: rotate(45deg)
|
|
&::after
|
|
transform: rotate(-45deg)
|
|
nav
|
|
display: block
|
|
padding: 10vh 0
|
|
margin: 0 5vw
|
|
|
|
.headContent
|
|
display: flex
|
|
align-items: top
|
|
justify-content: space-between
|
|
width: 100%
|
|
padding: 0 2rem
|
|
box-sizing: border-box
|
|
transition: .8s
|
|
z-index: 7
|
|
margin: 0
|
|
height: 0 //4rem
|
|
.logoBox
|
|
display: flex
|
|
align-self: center
|
|
justify-content: left
|
|
width: 33%
|
|
transition: .8s
|
|
background-color: transparent
|
|
margin-top: 4.5rem
|
|
@media(max-width: $breakPointMD)
|
|
margin-top: 3rem
|
|
img
|
|
width: 80%
|
|
max-width: 250px
|
|
margin: 4rem 5vw 0 5vw
|
|
transition: .8s
|
|
.navigationBox
|
|
position: relative
|
|
display: flex
|
|
align-items: center
|
|
justify-content: flex-end
|
|
width: 80%
|
|
transition: .8s
|
|
margin-top: 1.2rem //-1rem
|
|
nav
|
|
display: block
|
|
z-index: 102
|
|
//background: linear-gradient(to right, rgba($lightgrey, 0.8), rgba(white, 0.9), rgba(white, 0.9))
|
|
background: white
|
|
border: 1px solid adjust-color($beige, $lightness: 5%)
|
|
padding: 1rem 2rem
|
|
text-align: center
|
|
border-radius: 1rem
|
|
margin: 4.8rem 1rem 0 1rem
|
|
transition: .8s
|
|
a
|
|
margin: 0 1.2rem
|
|
text-decoration: none
|
|
color: $darkgrey
|
|
text-transform: uppercase
|
|
font-family: 'Comfortaa-Bold'
|
|
font-size: 1.1rem
|
|
letter-spacing: .05rem
|
|
transition: .6s
|
|
display: inline-block
|
|
&:hover
|
|
transform: scale(1.15)
|
|
background-image: radial-gradient(rgba(white, .5), rgba(white, .1))
|
|
box-shadow: 0 0 10px 10px rgba(white, 0.2)
|
|
border-radius: 10px
|
|
&.active
|
|
&::before
|
|
top: -13.5rem
|
|
&::after
|
|
top: -5rem
|
|
.headContent
|
|
padding: 0 //0 0 2.5rem 0
|
|
.navigationBox
|
|
margin-top: .5rem
|
|
nav
|
|
display: flex
|
|
margin: 2.5rem 0 0 0
|
|
padding: 1rem .5rem
|
|
border-top-right-radius: 0
|
|
border-top-left-radius: 0
|
|
border-bottom-left-radius: 50px
|
|
border-bottom-right-radius: 0
|
|
background: transparent
|
|
border: 1px solid transparent
|
|
|
|
a
|
|
font-size: 1rem
|
|
font-weight: bold
|
|
margin: 0 .8rem
|
|
.logoBox
|
|
align-items: left
|
|
img
|
|
margin-bottom: .5rem
|
|
width: 70%
|
|
max-width: 200px
|
|
</style> |