Initial commit
This commit is contained in:
Grit-Grenzdoerfer
305
frontend/src/lib/components/header/desktop.svelte
Normal file
305
frontend/src/lib/components/header/desktop.svelte
Normal file
@@ -0,0 +1,305 @@
|
||||
<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, i) {
|
||||
changeStateOfSite(true)
|
||||
let submenu = document.getElementById("submenu-container")
|
||||
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)
|
||||
shownMenu.classList.add("shown")
|
||||
}
|
||||
|
||||
let hoverTimeout
|
||||
</script>
|
||||
|
||||
<ul
|
||||
class="menu"
|
||||
on:mouseover="{(e) => {
|
||||
clearTimeout(hoverTimeout)
|
||||
hoverTimeout = setTimeout(() => {
|
||||
let element = document.getElementById('submenu-container')
|
||||
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')
|
||||
element.style.height = '0vh'
|
||||
element.classList.remove('show-submenu')
|
||||
changeStateOfSite(false)
|
||||
navigate('/')
|
||||
}}"
|
||||
>
|
||||
<button class="img-logo-container"><img src="media/logo.png" alt="logo" /></button>
|
||||
<p class="logo-text">Wasserski-Erfurt</p>
|
||||
</button>
|
||||
<ul class="menuitem-container">
|
||||
{#if $navigation?.elemente}
|
||||
{#each $navigation.elemente as site, i (i)}
|
||||
<li
|
||||
class="menu-item"
|
||||
on:mousedown="{() => {
|
||||
if (site.endpoint) {
|
||||
let element = document.getElementById('submenu-container')
|
||||
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')
|
||||
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>
|
||||
|
||||
<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}
|
||||
<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')
|
||||
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 {
|
||||
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: @hover-color;
|
||||
}
|
||||
}
|
||||
.select-menu {
|
||||
background-color: @hover-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
.submenu-container {
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
height: 0vh;
|
||||
overflow: hidden;
|
||||
width: 100vw;
|
||||
z-index: 2000;
|
||||
background-color: rgba(0, 0, 0, 0.854);
|
||||
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: rgb(255, 255, 255);
|
||||
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 rgba(24, 24, 24, 0.795);
|
||||
}
|
||||
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>
|
||||
Reference in New Issue
Block a user