Sync fork

components/app-footer.vue

@@ -13,11 +13,16 @@ const links = computed(() => {
 		imprint: { href: { path: "/imprint" }, label: t("AppFooter.links.imprint") },
 	} satisfies Record<string, { href: NavLinkProps["href"]; label: string }>;
 });
+
+const logos = project.footer.partner_logos;
 </script>
 
 <template>
 	<footer class="border-t opacity-80">
-		<div class="container grid gap-4 py-6 text-sm sm:grid-cols-3 sm:items-center">
+		<div
+			class="container grid gap-4 py-6 text-sm sm:items-center"
+			:class="logos && logos.length > 0 ? 'sm:grid-cols-3' : 'sm:grid-cols-2'"
+		>
 			<div class="sm:justify-self-start">
 				<I18nT keypath="AppFooter.with-love">
 					<HeartIcon class="inline-flex size-5" />
@@ -30,7 +35,10 @@ const links = computed(() => {
 				</I18nT>
 			</div>
 
-			<nav :aria-label="t('AppFooter.navigation-secondary')" class="sm:justify-self-center">
+			<nav
+				:aria-label="t('AppFooter.navigation-secondary')"
+				:class="logos?.length > 0 ? 'sm:justify-self-center' : 'sm:justify-self-end'"
+			>
 				<ul class="flex items-center gap-6" role="list">
 					<li v-for="(link, key) of links" :key="key">
 						<NavLink
@@ -42,6 +50,31 @@ const links = computed(() => {
 					</li>
 				</ul>
 			</nav>
+
+			<div v-if="logos && logos.length > 0" class="-my-2 ml-auto flex gap-7">
+				<NuxtLink
+					v-for="logo in logos"
+					:key="logo.name"
+					:to="logo.url"
+					external
+					target="_blank"
+					class="grayscale transition-all duration-500 hover:grayscale-0"
+				>
+					<span class="sr-only">{{ logo.name }}</span>
+					<NuxtImg
+						:src="logo.light"
+						class="block h-8 w-auto object-contain dark:hidden"
+						:alt="logo.name"
+						preload
+					></NuxtImg>
+					<NuxtImg
+						:src="logo.dark ?? logo.light"
+						class="hidden h-8 w-auto object-contain dark:block"
+						:alt="logo.name"
+						preload
+					></NuxtImg>
+				</NuxtLink>
+			</div>
 		</div>
 	</footer>
 </template>