FIX: some fixes for rollout
Burger
This commit is contained in:
parent
f7f27838a8
commit
65ebc71431
11 changed files with 268 additions and 119 deletions
64
app/assets/css/burger.css
Normal file
64
app/assets/css/burger.css
Normal file
|
|
@ -0,0 +1,64 @@
|
|||
.Burger {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 1000;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
transition: var(--transition-time) ease-in-out;
|
||||
pointer-events: none;
|
||||
|
||||
&.open {
|
||||
pointer-events: all;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
|
||||
& nav {
|
||||
translate: -15vw 0;
|
||||
}
|
||||
}
|
||||
|
||||
& nav {
|
||||
width: clamp(300px, 30vw, 400px);
|
||||
background: var(--color-black);
|
||||
align-items: end;
|
||||
padding: 2rem;
|
||||
height: max-content;
|
||||
translate: 110% 0;
|
||||
transition: 150ms ease-in-out;
|
||||
border-radius: 20px;
|
||||
|
||||
& ul {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
font-size: 1.5rem;
|
||||
|
||||
& a {
|
||||
|
||||
&.active {
|
||||
color: var(--color-orange);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
scale: 1.1;
|
||||
color: var(--color-orange);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@media (width <= 450px) {
|
||||
.Burger.open nav {
|
||||
translate: -10vw 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
@media screen and (width >= 1180px) {
|
||||
.Burger {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
|
@ -61,60 +61,12 @@
|
|||
backdrop-filter: blur(10px);
|
||||
border-radius: 0;
|
||||
|
||||
& > label {
|
||||
& > .burger {
|
||||
all: unset;
|
||||
display: none;
|
||||
width: 30px;
|
||||
height: 25px;
|
||||
position: relative;
|
||||
transform: rotate(0deg);
|
||||
transition: var(--transition-time) ease-in-out;
|
||||
cursor: pointer;
|
||||
z-index: 20000;
|
||||
|
||||
& > span {
|
||||
display: block;
|
||||
position: absolute;
|
||||
height: 5px;
|
||||
width: 100%;
|
||||
background: var(--color-white);
|
||||
border-radius: 9px;
|
||||
opacity: 1;
|
||||
left: 0;
|
||||
transform: rotate(0deg);
|
||||
transition: .25s ease-in-out;
|
||||
|
||||
&:nth-child(1) {
|
||||
top: 0;
|
||||
}
|
||||
|
||||
&:nth-child(2), &:nth-child(3) {
|
||||
top: 9px;
|
||||
}
|
||||
|
||||
&:nth-child(4) {
|
||||
top: 18px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
& > input[type="checkbox"]:checked + label span:nth-child(1) {
|
||||
top: 18px;
|
||||
width: 0;
|
||||
left: 50%;
|
||||
}
|
||||
|
||||
& > input[type="checkbox"]:checked + label span:nth-child(2) {
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
|
||||
& > input[type="checkbox"]:checked + label span:nth-child(3) {
|
||||
transform: rotate(-45deg);
|
||||
}
|
||||
|
||||
& > input[type="checkbox"]:checked + label span:nth-child(4) {
|
||||
top: 18px;
|
||||
width: 0;
|
||||
left: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -142,40 +94,14 @@
|
|||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
@media screen and (width < 1180px) {
|
||||
.Header {
|
||||
& > .wrapper.wrapper > label {
|
||||
& > .wrapper.wrapper > .burger {
|
||||
display: block;
|
||||
}
|
||||
|
||||
& input[type="checkbox"]:checked ~ nav {
|
||||
transform: translateX(-15vw);
|
||||
}
|
||||
|
||||
& nav {
|
||||
background: var(--color-black);
|
||||
position: absolute;
|
||||
overflow: hidden;
|
||||
height: 100vh;
|
||||
width: 100vw;
|
||||
top: -15px;
|
||||
transition: var(--transition-time);
|
||||
transform: translateX(100%);
|
||||
color: var(--color-white);
|
||||
flex-direction: column;
|
||||
|
||||
& ul {
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
height: 100vh;
|
||||
gap: 8vh;
|
||||
|
||||
& li {
|
||||
font-size: clamp(1rem, 10vw, 3rem);
|
||||
}
|
||||
}
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
.Person {
|
||||
flex-basis: clamp(350px, calc(33% - 3rem), 500px);
|
||||
flex-basis: clamp(200px, calc(33% - 3rem), 500px);
|
||||
flex-grow: 1;
|
||||
flex-shrink: 0;
|
||||
align-items: center;
|
||||
|
|
|
|||
26
app/components/Burger.vue
Normal file
26
app/components/Burger.vue
Normal file
|
|
@ -0,0 +1,26 @@
|
|||
<template>
|
||||
<div class="Burger" :class="{ open }">
|
||||
<nav class="z-4" ref="nav">
|
||||
<ul>
|
||||
<li v-for="({label, to, aria, icon}) in navigation" :key="label">
|
||||
<NuxtLink :to="to" :aria-label="aria" active-class="active" class="inline-flex-row big-gap" @click="close">
|
||||
<Icon :name="icon" mode="svg" />
|
||||
{{ label }}
|
||||
</NuxtLink>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { navigation } from '../utils/navigation'
|
||||
|
||||
const navElement = useTemplateRef('nav')
|
||||
|
||||
const nav = useNavigation()
|
||||
const close = () => nav.hideNavigation()
|
||||
const open = computed(() => nav.isNavigationVisible.value)
|
||||
|
||||
onClickOutside(navElement, close)
|
||||
</script>
|
||||
|
|
@ -8,15 +8,14 @@
|
|||
webfussel
|
||||
</strong>
|
||||
</NuxtLink>
|
||||
<input id="navToggle" v-model="isBurgerOpen" type="checkbox">
|
||||
<label :aria-label="burgerLabel" for="navToggle">
|
||||
<span/><span/><span/><span/>
|
||||
</label>
|
||||
<button class="burger" :aria-label="burgerLabel" @click="() => nav.toggleNavigation()">
|
||||
<Icon name="ph:waves" mode="svg" size="2em" />
|
||||
</button>
|
||||
<nav>
|
||||
<ul class="main-nav">
|
||||
<li v-for="({label, to, aria, icon}) in nav" :key="label" @click="isBurgerOpen = false">
|
||||
<li v-for="({label, to, aria, icon}) in navigation" :key="label">
|
||||
<NuxtLink :to="to" :aria-label="aria" active-class="active" class="inline-flex-row big-gap">
|
||||
<Icon :name="`ph:${icon}-duotone`" mode="svg" />
|
||||
<Icon :name="icon" mode="svg" />
|
||||
{{ label }}
|
||||
</NuxtLink>
|
||||
</li>
|
||||
|
|
@ -27,42 +26,17 @@
|
|||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { navigation } from '../utils/navigation'
|
||||
|
||||
let observer: IntersectionObserver
|
||||
const header = ref<HTMLElement | null>(null)
|
||||
const headerWrapper = ref<HTMLElement | null>(null)
|
||||
const stickyWatch = ref<HTMLElement | null>(null)
|
||||
|
||||
const isBurgerOpen = ref<boolean>(false)
|
||||
const nav = useNavigation()
|
||||
const burgerOpenLabel = 'Burgermenü öffnen'
|
||||
const burgerCloseLabel = 'Burgermenü schließen'
|
||||
const burgerLabel = computed(() => isBurgerOpen.value ? burgerCloseLabel : burgerOpenLabel)
|
||||
|
||||
const nav = [
|
||||
{
|
||||
to: `/booking`,
|
||||
label: 'Projektbuchung',
|
||||
icon: 'calendar-check',
|
||||
aria: 'Link dieser Seite: Preise'
|
||||
},
|
||||
{
|
||||
to: `/flatrate`,
|
||||
label: 'Flatrate',
|
||||
icon: 'piggy-bank',
|
||||
aria: 'Link dieser Seite: Preise'
|
||||
},
|
||||
{
|
||||
to: `/references`,
|
||||
label: 'Referenzen',
|
||||
icon: 'sparkle',
|
||||
aria: 'Link dieser Seite: Referenzen'
|
||||
},
|
||||
{
|
||||
to: `/contact`,
|
||||
label: 'Kontakt',
|
||||
icon: 'chats-circle',
|
||||
aria: 'Link dieser Seite: Kontakt'
|
||||
},
|
||||
]
|
||||
const burgerLabel = computed(() => nav.isNavigationVisible.value ? burgerCloseLabel : burgerOpenLabel)
|
||||
|
||||
onMounted(() => {
|
||||
observer = new IntersectionObserver(([entry]) => {
|
||||
|
|
|
|||
24
app/composables/navigation.ts
Normal file
24
app/composables/navigation.ts
Normal file
|
|
@ -0,0 +1,24 @@
|
|||
import { ref } from 'vue'
|
||||
|
||||
const isNavigationVisible = ref(false)
|
||||
|
||||
export const useNavigation = () => {
|
||||
const toggleNavigation = () => {
|
||||
isNavigationVisible.value = !isNavigationVisible.value
|
||||
}
|
||||
|
||||
const showNavigation = () => {
|
||||
isNavigationVisible.value = true
|
||||
}
|
||||
|
||||
const hideNavigation = () => {
|
||||
isNavigationVisible.value = false
|
||||
}
|
||||
|
||||
return {
|
||||
isNavigationVisible,
|
||||
toggleNavigation,
|
||||
showNavigation,
|
||||
hideNavigation
|
||||
}
|
||||
}
|
||||
|
|
@ -1,5 +1,6 @@
|
|||
<template>
|
||||
<Header />
|
||||
<Burger />
|
||||
<slot />
|
||||
<Footer />
|
||||
</template>
|
||||
|
|
|
|||
26
app/utils/navigation.ts
Normal file
26
app/utils/navigation.ts
Normal file
|
|
@ -0,0 +1,26 @@
|
|||
export const navigation = [
|
||||
{
|
||||
to: `/booking`,
|
||||
label: 'Projektbuchung',
|
||||
icon: 'ph:calendar-check-duotone',
|
||||
aria: 'Link dieser Seite: Preise'
|
||||
},
|
||||
{
|
||||
to: `/flatrate`,
|
||||
label: 'Flatrate',
|
||||
icon: 'ph:piggy-bank-duotone',
|
||||
aria: 'Link dieser Seite: Preise'
|
||||
},
|
||||
{
|
||||
to: `/references`,
|
||||
label: 'Referenzen',
|
||||
icon: 'ph:sparkle-duotone',
|
||||
aria: 'Link dieser Seite: Referenzen'
|
||||
},
|
||||
{
|
||||
to: `/contact`,
|
||||
label: 'Kontakt',
|
||||
icon: 'ph:chats-circle-duotone',
|
||||
aria: 'Link dieser Seite: Kontakt'
|
||||
},
|
||||
]
|
||||
Loading…
Add table
Add a link
Reference in a new issue