335 lines
13 KiB
Svelte
335 lines
13 KiB
Svelte
<script lang="ts">
|
|
import { navigation, sites } from "../../stores"
|
|
|
|
import { apiBaseURL } from "../../../config"
|
|
import { navigate } from "svelte-routing"
|
|
|
|
function changeStateOfSite(menuOn: boolean) {
|
|
let siteContainer = document.body
|
|
if (menuOn) siteContainer.style.overflow = "hidden"
|
|
else siteContainer.style.overflow = "initial"
|
|
}
|
|
|
|
async function changeSubmenu(e: EventTarget & HTMLLIElement, i: string | number) {
|
|
changeStateOfSite(true)
|
|
let submenu = document.getElementById("submenu-container")
|
|
if (!submenu) return
|
|
submenu.style.height = "calc(100vh - 120px)"
|
|
submenu.classList.add("show-submenu")
|
|
|
|
let elements = document.getElementsByClassName("innersubmenu-container")
|
|
Array.from(elements).forEach((element) => {
|
|
element.classList.remove("shown")
|
|
})
|
|
let shownMenu = document.getElementById("submenu-" + i)
|
|
if (!shownMenu) return
|
|
shownMenu.classList.add("shown")
|
|
}
|
|
|
|
let hoverTimeout: string | number | NodeJS.Timeout | undefined
|
|
</script>
|
|
|
|
<!-- svelte-ignore a11y-mouse-events-have-key-events -->
|
|
<ul
|
|
class="menu"
|
|
on:mouseover="{(e) => {
|
|
clearTimeout(hoverTimeout)
|
|
hoverTimeout = setTimeout(() => {
|
|
let element = document.getElementById('submenu-container')
|
|
if (element) {
|
|
element.style.height = '0vh'
|
|
changeStateOfSite(false)
|
|
element.classList.remove('show-submenu')
|
|
let elements = document.getElementsByClassName('select-menu')
|
|
Array.from(elements).forEach((e) => e.classList.remove('select-menu'))
|
|
}
|
|
}, 500)
|
|
}}"
|
|
on:mouseleave="{() => {
|
|
clearTimeout(hoverTimeout)
|
|
}}"
|
|
>
|
|
<button
|
|
class="logo-container"
|
|
on:click="{() => {
|
|
let element = document.getElementById('submenu-container')
|
|
if (!element) return
|
|
element.style.height = '0vh'
|
|
element.classList.remove('show-submenu')
|
|
changeStateOfSite(false)
|
|
navigate('/')
|
|
}}"
|
|
>
|
|
<button class="img-logo-container"><img src="/media/logo.svg" alt="logo" /></button>
|
|
<div class="logo-text">
|
|
<p id="upper">ALL KIDS</p>
|
|
<p id="lower">SO GÜNSTIG WIE NACHHALTIG</p>
|
|
</div>
|
|
</button>
|
|
<ul class="menuitem-container">
|
|
{#if $navigation?.elemente}
|
|
{#each $navigation.elemente as site, i (i)}
|
|
<!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
|
|
<li
|
|
class="menu-item"
|
|
on:mousedown="{() => {
|
|
if (site.endpoint) {
|
|
let element = document.getElementById('submenu-container')
|
|
if (element) {
|
|
element.style.height = '0vh'
|
|
element.classList.remove('show-submenu')
|
|
changeStateOfSite(false)
|
|
navigate(`${$sites[site.seite || ''].path}`)
|
|
}
|
|
}
|
|
}}"
|
|
on:mouseenter|stopPropagation="{(e) => {
|
|
clearTimeout(hoverTimeout)
|
|
if (!site.endpoint) {
|
|
let target = e.currentTarget
|
|
hoverTimeout = setTimeout(() => {
|
|
changeSubmenu(target, i)
|
|
let elements = document.getElementsByClassName('select-menu')
|
|
Array.from(elements).forEach((e) => e.classList.remove('select-menu'))
|
|
target.classList.add('select-menu')
|
|
}, 500)
|
|
} else {
|
|
hoverTimeout = setTimeout(() => {
|
|
let elements = document.getElementsByClassName('select-menu')
|
|
Array.from(elements).forEach((e) => e.classList.remove('select-menu'))
|
|
let element = document.getElementById('submenu-container')
|
|
if (element) {
|
|
element.style.height = '0vh'
|
|
element.classList.remove('show-submenu')
|
|
}
|
|
changeStateOfSite(false)
|
|
}, 500)
|
|
}
|
|
}}"
|
|
on:mouseleave|stopPropagation="{(e) => {
|
|
clearTimeout(hoverTimeout)
|
|
}}"
|
|
>
|
|
{site.name}
|
|
</li>
|
|
{/each}
|
|
{/if}
|
|
</ul>
|
|
</ul>
|
|
|
|
<!-- svelte-ignore a11y-mouse-events-have-key-events -->
|
|
<button
|
|
class="submenu-container"
|
|
id="submenu-container"
|
|
on:mouseover="{(e) => {
|
|
let element = e.currentTarget
|
|
element.style.height = '0vh'
|
|
changeStateOfSite(false)
|
|
element.classList.remove('show-submenu')
|
|
}}"
|
|
>
|
|
{#if $navigation?.elemente}
|
|
<div class="inner-container">
|
|
{#each $navigation?.elemente as submenu, i (i * 10)}
|
|
{#if !submenu?.endpoint}
|
|
<!-- svelte-ignore a11y-mouse-events-have-key-events -->
|
|
<button
|
|
on:mouseover|stopPropagation
|
|
class="innersubmenu-container"
|
|
id="{`submenu-${i}`}"
|
|
on:click|stopPropagation
|
|
>
|
|
<div class="submenu-most-inner-container">
|
|
<div class="submenu-img">
|
|
<img
|
|
src="{`${apiBaseURL}navigation/${$navigation?.id}/${submenu.image?.src}?filter=${
|
|
window.innerWidth > 500 ? 'xl' : 'm'
|
|
}`}"
|
|
alt="img"
|
|
/>
|
|
</div>
|
|
<ul class="sub-menu">
|
|
{#each submenu?.elemente || [] as submenu_point, i (i)}
|
|
<li>
|
|
<button
|
|
class="submenu-item"
|
|
on:click="{() => {
|
|
let element = document.getElementById('submenu-container')
|
|
if (!element) return
|
|
element.style.height = '0vh'
|
|
element.classList.remove('show-submenu')
|
|
changeStateOfSite(false)
|
|
navigate(`${$sites[submenu_point.seite || '']?.path}`)
|
|
}}">{submenu_point?.name}</button
|
|
>
|
|
</li>
|
|
{/each}
|
|
</ul>
|
|
</div>
|
|
</button>
|
|
{/if}
|
|
{/each}
|
|
</div>
|
|
{/if}
|
|
</button>
|
|
|
|
<style lang="less" global>
|
|
@import "../../assets/css/variables.less";
|
|
@desktop: ~"only screen and (min-width: 1440px)";
|
|
@media @desktop {
|
|
nav {
|
|
flex-grow: 3;
|
|
.desktop-header {
|
|
margin: 0px auto 0px auto;
|
|
max-width: @body-maxwidth;
|
|
width: 100%;
|
|
}
|
|
.menu {
|
|
padding: 0px min(4.5vw, 100px);
|
|
max-width: 1800px;
|
|
width: 100%;
|
|
display: flex;
|
|
height: 120px;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
.logo-container {
|
|
height: 60px;
|
|
display: flex;
|
|
align-items: center;
|
|
.logo-text {
|
|
p {
|
|
white-space: nowrap;
|
|
text-align: left;
|
|
}
|
|
& > #upper {
|
|
font-family: "Orbitron" !important;
|
|
font-size: 30px;
|
|
font-weight: 700;
|
|
}
|
|
& > #lower {
|
|
font-size: 13px;
|
|
}
|
|
font-weight: bold;
|
|
font-size: 1.2rem;
|
|
padding-left: 10px;
|
|
}
|
|
.img-logo-container {
|
|
height: 100%;
|
|
img {
|
|
height: 100%;
|
|
width: auto;
|
|
object-fit: contain;
|
|
}
|
|
}
|
|
}
|
|
div {
|
|
margin-right: 10%;
|
|
}
|
|
.menuitem-container {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
align-items: center;
|
|
width: fit-content;
|
|
height: 100%;
|
|
max-width: 1400px;
|
|
margin-left: 15px;
|
|
.menu-item {
|
|
font-size: 24px;
|
|
border-radius: 60px;
|
|
padding: 3px 14px;
|
|
margin: 0px 2px;
|
|
height: fit-content;
|
|
display: flex;
|
|
align-items: center;
|
|
cursor: pointer;
|
|
&:hover {
|
|
background-color: var(--hover-color);
|
|
}
|
|
}
|
|
.select-menu {
|
|
background-color: var(--hover-color);
|
|
}
|
|
}
|
|
}
|
|
.submenu-container {
|
|
position: absolute;
|
|
left: 0px;
|
|
height: 0vh;
|
|
overflow: hidden;
|
|
width: 100vw;
|
|
z-index: 2000;
|
|
background-color: var(--opposite-bg-color-80);
|
|
opacity: 0;
|
|
.inner-container {
|
|
width: 100%;
|
|
height: 100%;
|
|
position: relative;
|
|
.innersubmenu-container {
|
|
width: 100%;
|
|
height: 60vh;
|
|
max-height: 700px;
|
|
opacity: 0;
|
|
position: absolute;
|
|
visibility: hidden;
|
|
background-color: var(--background-color);
|
|
display: flex;
|
|
justify-content: center;
|
|
.submenu-most-inner-container {
|
|
height: 100%;
|
|
width: 100%;
|
|
max-width: 1800px;
|
|
padding: 0px min(4.5vw, 100px);
|
|
display: flex;
|
|
justify-content: center;
|
|
}
|
|
.sub-menu {
|
|
display: flex;
|
|
max-width: calc(@body-maxwidth / 2 - min(3vw, 80px));
|
|
align-items: start;
|
|
padding-left: 20px;
|
|
flex-direction: column;
|
|
width: 50%;
|
|
li {
|
|
border-bottom: 1px solid #dee2e6;
|
|
|
|
width: 100%;
|
|
text-align: start;
|
|
&:hover {
|
|
border-bottom: 1px solid var(--opposite-bg-color-80);
|
|
}
|
|
button {
|
|
padding: 10px 0px;
|
|
width: 100%;
|
|
height: 100%;
|
|
text-align: start;
|
|
}
|
|
}
|
|
}
|
|
.submenu-img {
|
|
max-width: calc(@body-maxwidth / 2 - min(3vw, 80px));
|
|
height: 100%;
|
|
width: 50%;
|
|
padding: 10px;
|
|
padding-right: 20px;
|
|
|
|
img {
|
|
height: 100%;
|
|
width: 100%;
|
|
object-fit: cover;
|
|
}
|
|
}
|
|
}
|
|
.shown {
|
|
opacity: 1;
|
|
visibility: visible;
|
|
}
|
|
}
|
|
}
|
|
.show-submenu {
|
|
height: 100vh;
|
|
opacity: 1;
|
|
}
|
|
}
|
|
}
|
|
</style>
|