Grit-Grenzdoerfer/wm-AllKids-tibi2023
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Initial commit

Browse Source
This commit is contained in:
Grit-Grenzdoerfer
2023-09-17 13:24:39 +02:00
commit 5f27fe0c5b
753 changed files with 15517 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

355
frontend/src/lib/components/header/mobile.svelte Normal file
View File

@@ -0,0 +1,355 @@
<script lang="ts">
import { navigation, sites } from "../../stores"
import { onMount } from "svelte"
import { apiBaseURL } from "../../../config"
import { navigate } from "svelte-routing"
let images: HTMLImageElement[] = []
function changeStateOfSite(menuOn: boolean) {
let element = document.getElementById("menu")
element.classList.toggle("show-menu")
let body = document.body
if (menuOn) {
body.style.overflow = "initial"
} else {
body.style.overflow = "hidden"
}
let button = document.getElementsByClassName("button-three")[0]
const currentState = button.getAttribute("data-state")
if (!currentState || currentState === "closed") {
button.setAttribute("data-state", "opened")
button.setAttribute("aria-expanded", "true")
} else {
button.setAttribute("data-state", "closed")
button.setAttribute("aria-expanded", "false")
}
}
function imageSlide(images) {
console.log(images)
let currentImage = 0
images[0].classList.add("show-img")
let interval = setInterval(() => {
images[currentImage].classList.remove("show-img")
currentImage += 1
if (images.length == currentImage) currentImage = 0
images[currentImage].classList.add("show-img")
}, 4000)
return () => clearInterval(interval)
}
function pushImages(node) {
images[0] = node
}
$: {
if (images.length != 0) imageSlide(document.getElementsByClassName("img-menu"))
}
</script>
<ul>
<div class="header">
<button
class="logo-container"
on:click="{() => {
navigate('/')
let element = document.getElementById('menu')
changeStateOfSite(element.classList.contains('show-menu'))
}}"
>
<button class="img-logo-container"><img src="media/logo.png" alt="logo" /></button>
<p class="logo-text">Wasserski-Erfurt</p>
</button>
<button
class="button-three"
on:click="{(e) => {
let element = document.getElementById('menu')
changeStateOfSite(element.classList.contains('show-menu'))
}}"
aria-controls="primary-navigation"
aria-expanded="false"
>
<svg stroke="var(--button-color)" fill="none" class="hamburger" viewBox="-10 -10 120 120" width="45">
<path
class="line"
stroke-width="10"
stroke-linecap="round"
stroke-linejoin="round"
d="m 20 40 h 60 a 1 1 0 0 1 0 20 h -60 a 1 1 0 0 1 0 -40 h 30 v 70"
>
</path>
</svg>
</button>
</div>
<div class="menu-container" id="menu">
{#if $navigation?.elemente}
<div class="inner-container">
<div class="higher-absolute">
{#each $navigation.elemente as link, i (i)}
<li
class="menu"
on:mousedown|stopPropagation="{(e) => {
if (link.endpoint) {
navigate(`${$sites[link.seite]?.path}`)
let element = document.getElementById('menu')
changeStateOfSite(element.classList.contains('show-menu'))
return
}
let element = e.currentTarget
element.classList.toggle('active')
let chevronContainer = document.getElementById('chevron-' + i)
chevronContainer.src =
chevronContainer.src.split('/')?.pop() == 'chevron-down.png'
? 'media/chevron-up.png'
: 'media/chevron-down.png'
}}"
>
<div class="menu-point">
<div>{link?.name}</div>
<div class:hidden="{link?.endpoint}">
<img id="{`chevron-${i}`}" src="media/chevron-down.png" alt="chev" />
</div>
</div>
{#if !link?.endpoint}
<ul class="submenu">
{#each link.elemente as submenu, i (i)}
<li>
<button
on:mousedown="{(e) => {
navigate(`${$sites[submenu.seite]?.path}`)
let element = document.getElementById('menu')
changeStateOfSite(element.classList.contains('show-menu'))
}}">{submenu.name}</button
>
</li>
{/each}
</ul>
{/if}
</li>
{/each}
<button class="socials">
<a target="_blank" href="https://www.instagram.com/wasserski_erfurt/">
<svg
width="36"
height="36"
viewBox="0 0 36 36"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M11.7 3h12.6c4.8 0 8.7 3.9 8.7 8.7v12.6a8.7 8.7 0 0 1-8.7 8.7H11.7C6.9 33 3 29.1 3 24.3V11.7A8.7 8.7 0 0 1 11.7 3zm-.3 3A5.4 5.4 0 0 0 6 11.4v13.2c0 2.985 2.415 5.4 5.4 5.4h13.2a5.4 5.4 0 0 0 5.4-5.4V11.4C30 8.415 27.585 6 24.6 6H11.4zm14.475 2.25a1.875 1.875 0 1 1 0 3.75 1.875 1.875 0 0 1 0-3.75zM18 10.5a7.5 7.5 0 1 1 0 15 7.5 7.5 0 0 1 0-15zm0 3a4.5 4.5 0 1 0 0 9 4.5 4.5 0 0 0 0-9z"
fill="#fff"></path>
</svg>
</a>
<a target="_blank" href="https://www.facebook.com/wasserskierfurt/">
<svg
width="36"
height="36"
viewBox="0 0 36 36"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M18 3.06c-8.25 0-15 6.735-15 15.03 0 7.5 5.49 13.725 12.66 14.85v-10.5h-3.81v-4.35h3.81v-3.315c0-3.765 2.235-5.835 5.67-5.835 1.635 0 3.345.285 3.345.285v3.705h-1.89c-1.86 0-2.445 1.155-2.445 2.34v2.82h4.17l-.675 4.35H20.34v10.5A15 15 0 0 0 33 18.09c0-8.295-6.75-15.03-15-15.03z"
fill="#fff"></path>
</svg>
</a>
</button>
</div>
<div class="img-container">
<div class="img-relative">
{#each $navigation.elemente?.map((e) => e.image?.src) as imgSrc, i (i)}
{#if imgSrc != undefined}
<div>
<img
use:pushImages
src="{`${apiBaseURL}navigation/${$navigation.id}/${imgSrc}?filter=${
window.innerWidth > 500 ? 'xl' : 'm'
}`}"
alt="img"
class="img img-menu"
/>
</div>
{/if}
{/each}
</div>
</div>
</div>
{/if}
</div>
</ul>
<style lang="less" global>
@import "../../assets/css/variables.less";
@desktop: ~"only screen and (min-width: 1440px)";
@media @tablet {
.socials {
display: none;
}
}
@media @mobile {
nav {
.hidden {
visibility: hidden;
}
position: relative;
width: 100%;
height: 100vh;
background-color: white;
ul {
.header {
padding: 0px min(4.5vw, 100px);
display: flex;
align-items: center;
justify-content: space-between;
height: 105px;
.button-three {
--button-color: #333;
overflow: hidden;
background: transparent;
}
.button-three .hamburger {
transition: translate 400ms, rotate 400ms;
}
.button-three[aria-expanded="true"] .hamburger {
translate: 1px -1px;
rotate: 0.125turn;
}
.button-three .line {
transition: 1s;
stroke-dasharray: 60 31 60 300;
}
.button-three[aria-expanded="true"] .line {
stroke-dasharray: 60 105 60 300;
stroke-dashoffset: -90;
}
.logo-container {
height: 50px;
display: flex;
align-items: center;
.logo-text {
font-weight: bold;
font-size: 1.2rem;
padding-left: 10px;
color: #333;
}
.img-logo-container {
height: 100%;
img {
height: 100%;
width: auto;
object-fit: contain;
}
}
}
}
.img-container {
position: absolute;
bottom: 5px;
width: 100%;
left: 0px;
height: calc((105vw / 16) * 9);
padding: 0px min(4.5vw, 100px);
.img-relative {
position: relative;
height: 100%;
width: 100%;
div {
position: absolute;
height: 100%;
width: 100%;
.show-img {
visibility: visible !important;
opacity: 1;
}
img {
opacity: 0;
height: 100%;
width: 100%;
object-fit: cover;
}
}
}
}
.menu-container {
background-color: white;
position: absolute;
z-index: 2000;
opacity: 0;
top: 105px;
height: calc(100vh - 105px);
width: 100%;
left: -100vw;
overflow: scroll;
.inner-container {
position: relative;
height: 100%;
.menu {
padding: 10px;
border-radius: 10px;
}
.higher-absolute {
position: absolute;
z-index: 2000;
width: 100%;
left: 0px;
padding: 0px min(4.5vw, 100px);
background-color: white;
border-radius: 0px 0px 10px 10px;
}
.socials {
width: 100%;
background-color: @link-font-color;
height: 50px;
border-radius: 20px;
color: white;
}
.active {
background-color: rgba(128, 128, 128, 0.153) !important;
.submenu {
visibility: visible;
max-height: 250px;
}
}
li {
padding: 6px 0px;
margin: 2px 0px;
margin-left: 5px !important;
button {
height: 100%;
width: 100%;
text-align: start;
}
.menu-point {
display: flex;
justify-content: space-between;
}
div {
font-weight: bold;
}
.submenu {
visibility: hidden;
max-height: 0px;
overflow: hidden;
}
}
}
}
.show-menu {
left: 0vw;
opacity: 1;
}
}
}
}
</style>