online-energieausweis/src/components/design/header/AusweisHeaderPartner.astro

---
export interface Props {
	tab: number;
}

const { tab } = Astro.props;
const { params } = Astro;
const partner = params.partner;

const pathname = Astro.url.pathname;
const isVA = pathname.includes("verbrauchsausweis-wohngebaeude");
const isVAG = pathname.includes("verbrauchsausweis-gewerbe");
const isBA = pathname.includes("bedarfsausweis-wohngebaeude");
const isBAG = pathname.includes("bedarfsausweis-gewerbe-anfragen");
const isGGW = pathname.includes("geg-nachweis-wohnen-anfragen");
const isGGG = pathname.includes("geg-nachweis-gewerbe-anfragen");
const isWEA = pathname.includes("welcher-ausweis");

const isWelt = pathname.includes("immowelt");
const isNET = pathname.includes("immonet");
---

<header id="header" class="w-full bg-white h-[81px] sm:pl-8">
	<div class="grid grid-cols-[min-content_1fr] items-center">
		<div class="w-[150px] h-[80px]">
			<div
				class="w-full h-full grid grid-col-1 justify-items-center items-center"
			>
				<img
					class={isNET
						? "w-[149px]"
						: isWelt
							? "w-[109px]"
							: "w-[109px]"}
					src={`/images/partner/${partner}/${partner}.svg`}
					alt={partner}
				/>
			</div>
		</div>

		<div>
			<ul class="navlist">
				<li>
					<a
						href={`/${partner}/energieausweis-erstellen/verbrauchsausweis-wohngebaeude/`}
						><button class={tab === 0 ? "glow" : ""}
							>Verbrauchsausweis</button
						></a>
				</li>
				<li>
					<a
						href={`/${partner}/energieausweis-erstellen/verbrauchsausweis-gewerbe/`}
						><button class={tab === 1 ? "glow" : ""}
							>Verbrauchsausweis Gewerbe</button
						></a>
				</li>
				<li>
					<a
						href={`/${partner}/energieausweis-erstellen/bedarfsausweis-wohngebaeude/`}
						><button class={tab === 2 ? "glow" : ""}
							>Bedarfsausweis</button
						></a>
				</li>
				<li>
					<a
						href={`/${partner}/angebot-anfragen/bedarfsausweis-gewerbe-anfragen/`}
						><button class={tab === 3 ? "glow" : ""}
							>Bedarfsausweis Gewerbe</button
						></a>
				</li>
				<li>
					<a
						href={`/${partner}/angebot-anfragen/geg-nachweis-wohnen-anfragen/`}
						><button class={tab === 4 ? "glow" : ""}
							>GEG Nachweis Wohngebäude</button
						></a>
				</li>
				<li>
					<a
						href={`/${partner}/angebot-anfragen/geg-nachweis-gewerbe-anfragen/`}
						><button class={tab === 5 ? "glow" : ""}
							>GEG Nachweis Gewerbe</button
						></a>
				</li>
				<li>
					<a href={`/${partner}/welcher-ausweis/${partner}`}
						><button class={tab === 6 ? "glow" : ""}
							>Welcher Ausweis</button
						></a>
				</li>
			</ul>
		</div>
	</div>
</header>

<div
	id="titel"
	class="block w-full 2xl:h-[270px] lg:h-[148px] bg-cover px-24 py-20"
	style={`background-image: url('/images/partner/${partner}/hero-energieausweis.jpg'); 
background-repeat:no-repeat; background-position:right;`}
>
	{
		isVA ? (
			<div>
				Hier komfortabel und einfach online den{" "}
				<b>Verbrauchsausweis Wohngebäude</b> bestellen
			</div>
		) : (
			""
		)
	}
	{
		isVAG ? (
			<div>
				Hier komfortabel und einfach online den{" "}
				<b>Verbrauchsausweis Gewerbe</b> bestellen
			</div>
		) : (
			""
		)
	}
	{
		isBA ? (
			<div>
				Hier komfortabel und einfach online den{" "}
				<b>Bedarfsausweis Wohngebäude</b> bestellen
			</div>
		) : (
			""
		)
	}
	{
		isBAG ? (
			<div>
				Hier komfortabel und einfach online den{" "}
				<b>Bedarfsausweis Gewerbe</b> anfragen
			</div>
		) : (
			""
		)
	}
	{
		isGGW ? (
			<div>
				Hier komfortabel und einfach online den{" "}
				<b>GEG Nachweis Wohngebäude</b> anfragen
			</div>
		) : (
			""
		)
	}
	{
		isGGG ? (
			<div>
				Hier komfortabel und einfach online den{" "}
				<b>GEG Nachweis Gewerbe</b> anfragen
			</div>
		) : (
			""
		)
	}
	{
		isWEA ? (
			<div>
				Hier komfortabel und einfach online den richtigen Ausweis finden
			</div>
		) : (
			""
		)
	}
</div>

<style lang="postcss">

@font-face {
    font-family: "immo Sans";
    src: url('/fonts/Immo-Sans/immoSans-Regular.eot');
    src: url('/fonts/Immo-Sans/immoSans-Regular.eot?#iefix') format('embedded-opentype'),
         url('/fonts/Immo-Sans/immoSans-Regular.woff2') format('woff2'),
         url('/fonts/Immo-Sans/immoSans-Regular.woff') format('woff');
    font-style: normal;
    font-weight: 400;
}

#titel{
	font-family: "immo Sans";
	font-weight:400;
	
	div{@apply w-fit bg-white/75 py-6 px-16 rounded-lg ring-2 ring-black/15 text-[1.45rem];box-shadow:8px 8px 16px rgba(0,0,0,0.5);}
}

	.header-button {
		@apply px-4 py-2 text-primary-content font-medium text-lg tracking-normal hover:bg-secondary h-full;
	}

	.navlist {
	@apply flex flex-wrap flex-col sm:flex-row pl-[1.75rem] sm:pl-[1.75rem];
}
.navlist li {
	@apply pr-0 sm:pr-[6px] pb-1 sm:pb-0;
}
	.navlist li button{@apply text-[0.75rem] md:text-[1rem]  text-[#646464] sm:p-2 text-left
		hover:rounded-[1rem] hover:bg-[rgba(50,50,50,0.1)];
		font-family: "immo Sans";
		font-weight:400;}

	.glow{@apply rounded-[1rem] bg-[rgba(50,50,50,0.1)];}

</style>