first row
This commit is contained in:
@@ -1,219 +1,209 @@
|
||||
<script lang="ts">
|
||||
import { onMount } from "svelte"
|
||||
import { getDBEntries } from "../../api"
|
||||
import { socialIcons, companyName, email, streetAddress, zipCode, localityAddress } from "../../config"
|
||||
import { spaLink } from "../actions"
|
||||
import { navigationCache } from "../store"
|
||||
import CrinkledSection from "./CrinkledSection.svelte"
|
||||
|
||||
const NAVIGATION_TYPE = {
|
||||
Main: 0,
|
||||
Service: 1,
|
||||
Legal: 2,
|
||||
} as const
|
||||
let navigationEntries: NavigationEntry[] = []
|
||||
|
||||
let legalLinks: NavigationElement[] = []
|
||||
let serviceLinks: NavigationElement[] = []
|
||||
let loadingNavigation = true
|
||||
|
||||
const resolveHref = (link: NavigationElement) => {
|
||||
const base = link.page || "/"
|
||||
const hash = link.hash ? (link.hash.startsWith("#") ? link.hash : `#${link.hash}`) : ""
|
||||
return `${base}${hash}`
|
||||
function elementsToCache(elements: NavigationElement[]) {
|
||||
elements.forEach((el) => {
|
||||
if (!el.external) {
|
||||
if (!$navigationCache[el.page]) $navigationCache[el.page] = el
|
||||
if (el.elements?.length > 0) elementsToCache(el.elements)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
onMount(async () => {
|
||||
try {
|
||||
const entries = await getDBEntries("navigation")
|
||||
legalLinks = entries.find((entry) => Number(entry.type) === NAVIGATION_TYPE.Legal)?.elements ?? []
|
||||
serviceLinks = entries.find((entry) => Number(entry.type) === NAVIGATION_TYPE.Service)?.elements ?? []
|
||||
} catch (error) {
|
||||
console.error("Unable to load footer navigation", error)
|
||||
} finally {
|
||||
loadingNavigation = false
|
||||
}
|
||||
getDBEntries("navigation").then((navs) => {
|
||||
navigationEntries = navs
|
||||
navigationEntries.filter((nav) => "elements" in nav).forEach((nav) => elementsToCache(nav.elements))
|
||||
})
|
||||
|
||||
const currentYear = new Date().getFullYear()
|
||||
</script>
|
||||
|
||||
<footer class="site-footer">
|
||||
<div class="footer-inner">
|
||||
<section class="footer-column">
|
||||
<h2>{companyName}</h2>
|
||||
<p>{streetAddress}, {zipCode} {localityAddress}</p>
|
||||
<a
|
||||
class="footer-link"
|
||||
href={`mailto:${email}`}
|
||||
>
|
||||
{email}
|
||||
</a>
|
||||
<ul class="footer-social">
|
||||
{#each Object.entries(socialIcons) as [name, url]}
|
||||
<li>
|
||||
<a
|
||||
href={url}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
aria-label={`Öffne ${name} in einem neuen Tab`}
|
||||
>
|
||||
{name}
|
||||
</a>
|
||||
</li>
|
||||
{/each}
|
||||
</ul>
|
||||
</section>
|
||||
<section class="footer-column">
|
||||
<h3>Service</h3>
|
||||
{#if loadingNavigation}
|
||||
<span class="footer-placeholder">Links werden geladen …</span>
|
||||
{:else if serviceLinks.length}
|
||||
<ul>
|
||||
{#each serviceLinks as link (link.name)}
|
||||
<li>
|
||||
{#if link.external && link.externalUrl}
|
||||
<CrinkledSection>
|
||||
<footer class="footer">
|
||||
<section id="legal-section">
|
||||
<div class="wrapper">
|
||||
<small class="">© 2025 | KontextWerk | Alle Rechte vorbehalten.</small>
|
||||
<nav class="nav-points">
|
||||
<ul>
|
||||
{#each navigationEntries.length ? navigationEntries[0].elements : [] as link}
|
||||
<li>
|
||||
<a
|
||||
href={link.externalUrl}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
{link.name}
|
||||
</a>
|
||||
{:else}
|
||||
<a
|
||||
href={resolveHref(link)}
|
||||
class="footer-nav-point-bottom"
|
||||
use:spaLink
|
||||
href={link.page}
|
||||
>
|
||||
{link.name}
|
||||
<small>{link.name}</small>
|
||||
</a>
|
||||
{/if}
|
||||
</li>
|
||||
{/each}
|
||||
</ul>
|
||||
{:else}
|
||||
<span class="footer-placeholder">Aktuell keine Service-Links</span>
|
||||
{/if}
|
||||
</li>
|
||||
{/each}
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
</section>
|
||||
<section class="footer-column">
|
||||
<h3>Rechtliches</h3>
|
||||
{#if loadingNavigation}
|
||||
<span class="footer-placeholder">Links werden geladen …</span>
|
||||
{:else if legalLinks.length}
|
||||
<ul>
|
||||
{#each legalLinks as link (link.name)}
|
||||
<li>
|
||||
{#if link.external && link.externalUrl}
|
||||
<a
|
||||
href={link.externalUrl}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
{link.name}
|
||||
</a>
|
||||
{:else}
|
||||
<a
|
||||
href={resolveHref(link)}
|
||||
use:spaLink
|
||||
>
|
||||
{link.name}
|
||||
</a>
|
||||
{/if}
|
||||
</li>
|
||||
{/each}
|
||||
</ul>
|
||||
{:else}
|
||||
<span class="footer-placeholder">Aktuell keine rechtlichen Hinweise</span>
|
||||
{/if}
|
||||
</section>
|
||||
</div>
|
||||
<div class="footer-meta">© {currentYear} {companyName}. Alle Rechte vorbehalten.</div>
|
||||
</footer>
|
||||
</footer>
|
||||
</CrinkledSection>
|
||||
|
||||
<style lang="less">
|
||||
@import "../../lib/assets/css/variables.less";
|
||||
|
||||
.site-footer {
|
||||
background-color: var(--bg-200, #0d0d0d);
|
||||
color: var(--neutral-white);
|
||||
padding: 3rem 1.5rem 1.5rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2rem;
|
||||
}
|
||||
|
||||
.footer-inner {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
|
||||
gap: 2rem;
|
||||
width: 100%;
|
||||
max-width: var(--body-maxwidth);
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.footer-column {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.75rem;
|
||||
|
||||
h2,
|
||||
h3 {
|
||||
margin: 0;
|
||||
font-size: 1.2rem;
|
||||
font-weight: 600;
|
||||
.footer {
|
||||
&,
|
||||
& * {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
background: var(--neutral-white);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
gap: 1.5rem;
|
||||
#content-section {
|
||||
padding: 0px var(--horizontal-default-margin);
|
||||
max-width: var(--small-max-width);
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: 1.5rem;
|
||||
align-items: flex-start;
|
||||
justify-content: flex-start;
|
||||
position: relative;
|
||||
#content-link-section {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: 1.5rem;
|
||||
align-items: flex-start;
|
||||
justify-content: flex-start;
|
||||
flex: 1;
|
||||
position: relative;
|
||||
.content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1.125rem;
|
||||
align-items: flex-start;
|
||||
justify-content: flex-start;
|
||||
width: 8rem;
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
@media @mobile {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
#content-link-section {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
}
|
||||
#newsletter-section {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
gap: 18px;
|
||||
min-width: 300px;
|
||||
form {
|
||||
button {
|
||||
width: fit-content;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
li {
|
||||
#icons-section {
|
||||
padding: 0px var(--horizontal-default-margin);
|
||||
max-width: var(--small-max-width);
|
||||
width: 100%;
|
||||
margin: 0 0 0 -0.0625rem;
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
.footer-link,
|
||||
.footer-column a {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
transition: opacity 0.2s ease;
|
||||
|
||||
&:hover {
|
||||
opacity: 0.75;
|
||||
}
|
||||
}
|
||||
|
||||
.footer-social {
|
||||
flex-direction: row;
|
||||
gap: 0.75rem;
|
||||
|
||||
a {
|
||||
text-transform: capitalize;
|
||||
font-size: 0.9rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
|
||||
.footer-placeholder {
|
||||
font-size: 0.85rem;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.footer-meta {
|
||||
text-align: center;
|
||||
font-size: 0.85rem;
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.site-footer {
|
||||
padding: 2.4rem 1.2rem 1.2rem;
|
||||
gap: 0.625rem;
|
||||
align-items: flex-start;
|
||||
justify-content: flex-start;
|
||||
flex: 1;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
.payments,
|
||||
.social {
|
||||
display: flex;
|
||||
gap: 0.75rem;
|
||||
figure {
|
||||
height: 1.2rem;
|
||||
img {
|
||||
height: 100%;
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
.line {
|
||||
padding: 0rem 1.5rem 0rem 1.5rem;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: 1.5rem;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
flex: 1;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
.line-1,
|
||||
.line-2 {
|
||||
border-style: solid;
|
||||
border-color: var(--text-invers-100);
|
||||
border-width: 0.0625rem 0 0 0;
|
||||
flex: 1;
|
||||
height: 0rem;
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
@media @mobile {
|
||||
flex-direction: column-reverse;
|
||||
align-items: center;
|
||||
gap: 2rem;
|
||||
.line {
|
||||
width: 100%;
|
||||
padding: 0px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.footer-social {
|
||||
flex-wrap: wrap;
|
||||
#legal-section {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
background: var(--bg-100);
|
||||
gap: 1.2rem;
|
||||
.wrapper {
|
||||
max-width: var(--small-max-width);
|
||||
|
||||
width: 100%;
|
||||
a,
|
||||
small {
|
||||
color: var(--text-100);
|
||||
}
|
||||
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
flex-shrink: 0;
|
||||
position: relative;
|
||||
gap: 1.2rem;
|
||||
padding: 1.5rem var(--horizontal-default-margin);
|
||||
@media @mobile {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.nav-points {
|
||||
ul {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.6rem;
|
||||
align-items: center;
|
||||
a {
|
||||
font-weight: 400;
|
||||
font-family: Outfit;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user