Cypress und API
This commit is contained in:
Moritz Utcke
455
src/components/design/sidebars/cards/NavigationCard.svelte
Normal file
455
src/components/design/sidebars/cards/NavigationCard.svelte
Normal file
@@ -0,0 +1,455 @@
|
||||
<script lang="ts">
|
||||
let innerWidth: number;
|
||||
|
||||
function dropdown() {
|
||||
if (innerWidth < 1024) {
|
||||
const check_element = this.lastChild;
|
||||
|
||||
const rotate_list = document.querySelectorAll(".dd-symbol-clone");
|
||||
const rotate_element = this.childNodes[0].children[0];
|
||||
|
||||
var first_check = check_element.classList.contains(
|
||||
"show-dropdown-content"
|
||||
);
|
||||
const nodeList = document.querySelectorAll(".dropdown-content");
|
||||
|
||||
if (first_check == true) {
|
||||
check_element.classList.remove("show-dropdown-content");
|
||||
rotate_element.classList.toggle("rotate-symbol");
|
||||
} else {
|
||||
for (let i = 0; i < nodeList.length; i++) {
|
||||
const element = nodeList[i];
|
||||
element.classList.remove("show-dropdown-content");
|
||||
}
|
||||
for (let i = 0; i < rotate_list.length; i++) {
|
||||
const element = rotate_list[i];
|
||||
element.classList.remove("rotate-symbol");
|
||||
}
|
||||
|
||||
check_element.classList.add("show-dropdown-content");
|
||||
rotate_element.classList.add("rotate-symbol");
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function hover() {
|
||||
if (innerWidth > 1024) {
|
||||
const check_element = this.firstChild.lastChild;
|
||||
check_element.style.visibility = "visible";
|
||||
}
|
||||
}
|
||||
|
||||
function hoverout() {
|
||||
if (innerWidth > 1024) {
|
||||
const check_element = this.firstChild.lastChild;
|
||||
check_element.style.visibility = "hidden";
|
||||
}
|
||||
}
|
||||
|
||||
function hamburger() {
|
||||
const nodeList = document.querySelectorAll(".dropdown-content");
|
||||
for (let i = 0; i < nodeList.length; i++) {
|
||||
nodeList[i].classList.remove("show-dropdown-content");
|
||||
}
|
||||
var element = document.getElementById("cardNavigation");
|
||||
element.classList.toggle("hidden");
|
||||
|
||||
const spans = this.children;
|
||||
var first_check = spans[0].classList.contains("hamburger-swing-0");
|
||||
|
||||
if (first_check == true) {
|
||||
for (let i = 0; i < spans.length; i++) {
|
||||
spans[i].classList.remove("hamburger-swing-" + i);
|
||||
}
|
||||
const rotate_list = document.querySelectorAll(".dd-symbol");
|
||||
for (let i = 0; i < rotate_list.length; i++) {
|
||||
rotate_list[i].classList.remove("rotate-symbol");
|
||||
}
|
||||
} else {
|
||||
for (let i = 0; i < spans.length; i++) {
|
||||
spans[i].classList.add("hamburger-swing-" + i);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<svelte:window bind:innerWidth />
|
||||
|
||||
<div
|
||||
class="hamburger_menu py-1 px-2 bg-secondary
|
||||
xs:px-4
|
||||
lg:hidden"
|
||||
>
|
||||
<div
|
||||
id="hamburger"
|
||||
on:click={hamburger}
|
||||
on:keydown={hamburger}
|
||||
class="cursor-pointer"
|
||||
>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<nav
|
||||
id="cardNavigation"
|
||||
class="cardNavigation box hidden relative ring-0 md:ring-2 ring-primary/50 rounded-tr-none lg:block mb-0 lg:mb-5"
|
||||
>
|
||||
<div class="nav-element bg-secondary/5 py-1 pl-2 text-xs font-bold">
|
||||
Jetzt bestellen
|
||||
</div>
|
||||
|
||||
<div class="nav-element">
|
||||
<a class="no-dropdown nav-element-child" href="/welcher-energieausweis/"
|
||||
>Welcher Energieausweis?</a
|
||||
>
|
||||
</div>
|
||||
|
||||
<!-- svelte-ignore a11y-mouse-events-have-key-events -->
|
||||
<div
|
||||
class="nav-element dropdown lg:dropdown-right"
|
||||
on:click={dropdown}
|
||||
on:keydown={dropdown}
|
||||
on:mouseover={hover}
|
||||
on:mouseleave={hoverout}
|
||||
>
|
||||
{#if innerWidth > 1023}
|
||||
<a href={undefined} class="nav-element-child"
|
||||
>Energieausweis erstellen<span class="dd-symbol-clone">❯</span
|
||||
><span class="dd-symbol">❯</span></a
|
||||
>
|
||||
{:else}
|
||||
<a href={undefined} class="nav-element-child"
|
||||
>Energieausweis erstellen<span class="dd-symbol-clone">❯</span
|
||||
><span class="dd-symbol">❯</span></a
|
||||
>
|
||||
{/if}
|
||||
|
||||
<ul class="dropdown-content energieasusweis-erstellen">
|
||||
{#if innerWidth < 1023}
|
||||
<li>
|
||||
<a href="/energieausweis-erstellen"
|
||||
>Energieausweis erstellen</a
|
||||
>
|
||||
</li>
|
||||
{/if}
|
||||
<li>
|
||||
<a
|
||||
href="/energieausweis-erstellen/verbrauchsausweis-wohngebaeude/"
|
||||
>Verbrauchsausweis erstellen</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/energieausweis-erstellen/bedarfsausweis-wohngebaeude/"
|
||||
>Bedarfsausweis erstellen</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/energieausweis-erstellen/verbrauchsausweis-gewerbe/"
|
||||
>Verbrauchsausweis Gewerbe erstellen</a
|
||||
>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- svelte-ignore a11y-mouse-events-have-key-events -->
|
||||
<div
|
||||
class="nav-element dropdown lg:dropdown-right"
|
||||
on:click={dropdown}
|
||||
on:keydown={dropdown}
|
||||
on:mouseover={hover}
|
||||
on:mouseleave={hoverout}
|
||||
>
|
||||
{#if innerWidth > 1023}
|
||||
<a href={undefined} class="nav-element-child"
|
||||
>Angebot anfragen<span class="dd-symbol-clone">❯</span><span
|
||||
class="dd-symbol">❯</span
|
||||
></a
|
||||
>
|
||||
{:else}
|
||||
<a href={undefined} class="nav-element-child"
|
||||
>Angebot anfragen<span class="dd-symbol-clone">❯</span><span
|
||||
class="dd-symbol">❯</span
|
||||
></a
|
||||
>
|
||||
{/if}
|
||||
|
||||
<ul class="dropdown-content angebot-anfragen">
|
||||
{#if innerWidth < 1023}
|
||||
<li>
|
||||
<a href="/energieausweis-erstellen">Angebot anfragen</a>
|
||||
</li>
|
||||
{/if}
|
||||
<li>
|
||||
<a
|
||||
href="/energieausweis-erstellen/verbrauchsausweis-wohngebaeude/"
|
||||
>Bedarfsausweis Gewerbe anfragen</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/energieausweis-erstellen/bedarfsausweis-wohngebaeude/"
|
||||
>GEG Nachweis Wohnen anfragen</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/energieausweis-erstellen/verbrauchsausweis-gewerbe/"
|
||||
>GEG Nachweis Gewerbe anfragen</a
|
||||
>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="nav-element">
|
||||
<a class="no-dropdown nav-element-child" href="/sanierungsfahrplan"
|
||||
>Sanierungsfahrplan (iSFP)</a
|
||||
>
|
||||
</div>
|
||||
|
||||
<div class="nav-element bg-secondary/5 py-1 pl-2 text-xs font-bold">
|
||||
Produkte & Preise
|
||||
</div>
|
||||
|
||||
<!-- svelte-ignore a11y-mouse-events-have-key-events -->
|
||||
<div
|
||||
class="nav-element dropdown lg:dropdown-right"
|
||||
on:click={dropdown}
|
||||
on:keydown={dropdown}
|
||||
on:mouseover={hover}
|
||||
on:mouseleave={hoverout}
|
||||
>
|
||||
<a href={undefined} class="nav-element-child"
|
||||
>Verbrauchsausweis<span class="dd-symbol-clone">❯</span><span
|
||||
class="dd-symbol">❯</span
|
||||
></a
|
||||
>
|
||||
<ul class="dropdown-content verbrauchsausweis">
|
||||
{#if innerWidth < 1023}
|
||||
<li><a href="index">Verbrauchsausweis</a></li>
|
||||
{/if}
|
||||
<li><a href="index">Verbrauchsausweis Wohngebäude</a></li>
|
||||
<li><a href="index">Verbrauchsausweis online erstellen</a></li>
|
||||
<li><a href="index">Häufige Fragen zum Verbrauchsausweis</a></li>
|
||||
<li>
|
||||
<a href="index">Statistiken zum Verbrauchsausweis Wohngebäude</a
|
||||
>
|
||||
</li>
|
||||
<li><a href="index">Verbrauchsausweis Gewerbe</a></li>
|
||||
<li>
|
||||
<a href="index">Verbrauchsausweis Gewerbe online erstellen</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="index">Häufige Fragen zum Verbrauchsausweis Gewerbe</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="index">Statistiken zum Verbrauchsausweis Gewerbe</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- svelte-ignore a11y-mouse-events-have-key-events -->
|
||||
<div
|
||||
class="nav-element dropdown lg:dropdown-right"
|
||||
on:click={dropdown}
|
||||
on:keydown={dropdown}
|
||||
on:mouseover={hover}
|
||||
on:mouseleave={hoverout}
|
||||
>
|
||||
<a href={undefined} class="nav-element-child"
|
||||
>Bedarfsausweis<span class="dd-symbol-clone">❯</span><span
|
||||
class="dd-symbol">❯</span
|
||||
></a
|
||||
>
|
||||
<ul class="dropdown-content bedarfsausweis">
|
||||
{#if innerWidth < 1023}
|
||||
<li><a href="index">Bedarfsausweis</a></li>
|
||||
{/if}
|
||||
<li><a href="index">Bedarfsausweis Wohngebäude</a></li>
|
||||
<li><a href="index">Bedarfsausweis online erstellen</a></li>
|
||||
<li><a href="index">Häufige Fragen zum Bedarfsausweis</a></li>
|
||||
<li>
|
||||
<a href="index">Statistiken zum Bedarfsausweis Wohngebäude</a>
|
||||
</li>
|
||||
<li><a href="index">Bedarfsausweis Gewerbe</a></li>
|
||||
<li><a href="index">Bedarfsausweis Gewerbe online erstellen</a></li>
|
||||
<li>
|
||||
<a href="index">Häufige Fragen zum Bedarfsausweis Gewerbe</a>
|
||||
</li>
|
||||
<li><a href="index">Statistiken zum Bedarfsausweis Gewerbe</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="nav-element">
|
||||
<a class="no-dropdown nav-element-child" href="/sanierungsfahrplan"
|
||||
>Sanierungsfahrplan</a
|
||||
>
|
||||
</div>
|
||||
|
||||
<!-- svelte-ignore a11y-mouse-events-have-key-events -->
|
||||
<div
|
||||
class="nav-element dropdown lg:dropdown-right"
|
||||
on:click={dropdown}
|
||||
on:keydown={dropdown}
|
||||
on:mouseover={hover}
|
||||
on:mouseleave={hoverout}
|
||||
>
|
||||
<a href={undefined} class="nav-element-child"
|
||||
>Energieausweis<span class="dd-symbol-clone">❯</span><span
|
||||
class="dd-symbol">❯</span
|
||||
></a
|
||||
>
|
||||
<ul class="dropdown-content energieausweis">
|
||||
{#if innerWidth < 1023}
|
||||
<li><a href="index">Energieausweis</a></li>
|
||||
{/if}
|
||||
<li><a href="index">Energieausweis Pflicht</a></li>
|
||||
<li><a href="index">Energieausweis Kosten</a></li>
|
||||
<li><a href="index">Energieausweis Haus</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="nav-element">
|
||||
<a
|
||||
class="no-dropdown nav-element-child"
|
||||
href="/energieausweis-aussteller">Energieberater finden</a
|
||||
>
|
||||
</div>
|
||||
|
||||
<div class="nav-element bg-secondary/5 py-1 pl-2 text-xs font-bold">
|
||||
FAQ & Hilfe
|
||||
</div>
|
||||
|
||||
<!-- svelte-ignore a11y-mouse-events-have-key-events -->
|
||||
<div
|
||||
class="nav-element dropdown lg:dropdown-right"
|
||||
on:click={dropdown}
|
||||
on:keydown={dropdown}
|
||||
on:mouseover={hover}
|
||||
on:mouseleave={hoverout}
|
||||
>
|
||||
{#if innerWidth > 1023}
|
||||
<a href="/bestellprozess-energieausweis" class="nav-element-child"
|
||||
>Bestellprozess Energieausweis<span class="dd-symbol-clone"
|
||||
>❯</span
|
||||
><span class="dd-symbol">❯</span></a
|
||||
>
|
||||
{:else}
|
||||
<a href="/bestellprozess-energieausweis" class="nav-element-child"
|
||||
>Bestellprozess Energieausweis<span class="dd-symbol-clone"
|
||||
>❯</span
|
||||
><span class="dd-symbol">❯</span></a
|
||||
>
|
||||
{/if}
|
||||
|
||||
<ul class="dropdown-content bestellprozess-energieausweis">
|
||||
{#if innerWidth < 1023}
|
||||
<li>
|
||||
<a href="/bestellprozess-energieausweis"
|
||||
>Bestellprozess Energieausweis</a
|
||||
>
|
||||
</li>
|
||||
{/if}
|
||||
<li>
|
||||
<a
|
||||
href="/bestellprozess-energieausweis/merkblatt-verbrauchsausweis-wohnen/"
|
||||
>Merkblatt Verbrauchsausweis Wohnen</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/energieausweis-erstellen/bedarfsausweis-wohngebaeude/"
|
||||
>Merkblatt Bedarfsausweis Wohnen</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/energieausweis-erstellen/verbrauchsausweis-gewerbe/"
|
||||
>Merkblatt Verbrauchsausweis Gewerbe</a
|
||||
>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="nav-element">
|
||||
<a class="no-dropdown nav-element-child" href="/geg/"
|
||||
>Gebäudeenergiegesetz (GEG)</a
|
||||
>
|
||||
</div>
|
||||
|
||||
<div class="nav-element">
|
||||
<a class="no-dropdown nav-element-child" href="/enev-zusammenfassung/"
|
||||
>EnEV Zusammenfassung - Archiv</a
|
||||
>
|
||||
</div>
|
||||
|
||||
<div class="nav-element">
|
||||
<a class="no-dropdown nav-element-child" href="/faq/">FAQ</a>
|
||||
</div>
|
||||
|
||||
<div class="nav-element">
|
||||
<a class="no-dropdown nav-element-child" href="/glossar/">Glossar</a>
|
||||
</div>
|
||||
|
||||
<div class="nav-element">
|
||||
<a class="no-dropdown nav-element-child" href="/kundenbewertungen/"
|
||||
>Kundenbewertungen</a
|
||||
>
|
||||
</div>
|
||||
<div class="nav-element">
|
||||
<a
|
||||
class="no-dropdown nav-element-child lg:!rounded-b-lg xl:!rounded-b-xl"
|
||||
href="/fuer-entwickler/">Für Entwickler</a
|
||||
>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<style lang="scss">
|
||||
.dd-symbol::before {
|
||||
content: "❯";
|
||||
font-size: 0.95rem;
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: -7px;
|
||||
animation-name: flim;
|
||||
animation-duration: 2s;
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
|
||||
.dd-symbol {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.dd-symbol::after {
|
||||
content: "❯";
|
||||
font-size: 0.95rem;
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
right: -7px;
|
||||
animation-name: flim;
|
||||
animation-duration: 2s;
|
||||
animation-delay: 1s;
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
|
||||
@keyframes flim {
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
16.66% {
|
||||
opacity: 0.25;
|
||||
}
|
||||
33.32% {
|
||||
opacity: 0.5;
|
||||
}
|
||||
49.98% {
|
||||
opacity: 0.75;
|
||||
}
|
||||
66.64% {
|
||||
opacity: 0.5;
|
||||
}
|
||||
83.33% {
|
||||
opacity: 0.25;
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user