<div x-data="{ open: false }" class="inline-flex bg-gray-600 p-8 px-8 sm:px-16 lg:py-10 lg:px-20 relative z-0">
<div :class="open ? 'left-0 lg:right-0 lg:left-auto z-20 opacity-100' : '-left-1/2 lg:left-auto lg:-right-1/2 opacity-0 -z-10' " class="h-20 bg-gray-600 duration-300 transition-all fixed lg:absolute max-lg:mt-3 max-lg:ml-3 top-0 w-max">
<ul class="flex items-center w-full h-full gap-6 px-8 py-4 text-white">
<li>
<a class="text-white" href="#">Englisch</a>
</li>
<div class="w-px h-full bg-gray-500"></div>
<li>
<a class="text-white" href="#">Deustch</a>
</li>
<div class="w-px h-full bg-gray-500"></div>
<li>
<button @click="open = false" type="button" class="flex">
<span class="inline-flex items-center w-6 h-6 stroke-white ">
<?xml version="1.0" encoding="UTF-8"?><svg id="a" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22.5 22.5">
<path id="b" d="m.75,21.75L21.75.75M.75.75l21,21" style="fill:none; stroke:currentColor; stroke-linecap:round; stroke-linejoin:round; stroke-width:1.5px;" />
</svg>
</span>
</button>
</li>
</ul>
</div>
<button @click="open = true" href="#" class="scale-120 absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 flex items-center gap-4 text-white">
<span class="inline-flex items-center w-6 h-6 stroke-white ">
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 28.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 400 400" style="enable-background:new 0 0 400 400;" xml:space="preserve">
<style type="text/css">
.st0 {
fill: none;
stroke: #333333;
stroke-width: 10;
stroke-miterlimit: 10;
}
.st1 {
fill: none;
stroke: #333333;
stroke-width: 10;
stroke-linecap: round;
stroke-linejoin: round;
stroke-miterlimit: 10;
}
.st2 {
fill: none;
stroke: #AF1B43;
stroke-width: 10;
stroke-miterlimit: 10;
}
.st3 {
fill: none;
stroke: #AF1B43;
stroke-width: 10;
stroke-linecap: round;
stroke-linejoin: round;
stroke-miterlimit: 10;
}
.st4 {
fill: none;
stroke: #FFFFFF;
stroke-width: 10;
stroke-linecap: round;
stroke-linejoin: round;
stroke-miterlimit: 10;
}
.st5 {
fill: none;
stroke: #1D1E1C;
stroke-width: 10;
stroke-linecap: round;
stroke-linejoin: round;
stroke-miterlimit: 10;
}
.st6 {
fill: none;
stroke: #FFFFFF;
stroke-width: 10;
stroke-miterlimit: 10;
}
.st7 {
fill: none;
stroke: #333333;
stroke-width: 9.96097;
stroke-linecap: round;
stroke-linejoin: round;
stroke-miterlimit: 10;
}
.st8 {
fill: none;
stroke: #AF1B43;
stroke-width: 9.96097;
stroke-linecap: round;
stroke-linejoin: round;
stroke-miterlimit: 10;
}
.st9 {
fill: none;
stroke: #FFFFFF;
stroke-width: 9.96097;
stroke-linecap: round;
stroke-linejoin: round;
stroke-miterlimit: 10;
}
.st10 {
fill: none;
stroke: #333333;
stroke-width: 9.94439;
stroke-linecap: round;
stroke-linejoin: round;
stroke-miterlimit: 10;
}
.st11 {
fill: none;
stroke: #AF1B43;
stroke-width: 9.94439;
stroke-linecap: round;
stroke-linejoin: round;
stroke-miterlimit: 10;
}
.st12 {
fill: none;
stroke: #FFFFFF;
stroke-width: 9.94439;
stroke-linecap: round;
stroke-linejoin: round;
stroke-miterlimit: 10;
}
.st13 {
fill: #FFFFFF;
}
.st14 {
fill: none;
stroke: #AF1B43;
stroke-width: 10.11154;
stroke-linecap: round;
stroke-linejoin: round;
stroke-miterlimit: 10;
}
.st15 {
fill: none;
stroke: #AF1B43;
stroke-width: 11.01703;
stroke-linecap: round;
stroke-linejoin: round;
stroke-miterlimit: 10;
}
.st16 {
fill: #FFFFFF;
stroke: #AF1B43;
stroke-width: 10;
stroke-linecap: round;
stroke-linejoin: round;
stroke-miterlimit: 10;
}
.st17 {
fill: none;
stroke: #FFFFFF;
stroke-width: 10.11154;
stroke-linecap: round;
stroke-linejoin: round;
stroke-miterlimit: 10;
}
.st18 {
fill: none;
stroke: #FFFFFF;
stroke-width: 11.01703;
stroke-linecap: round;
stroke-linejoin: round;
stroke-miterlimit: 10;
}
.st19 {
fill: #FFFFFF;
stroke: #FFFFFF;
stroke-width: 10;
stroke-linecap: round;
stroke-linejoin: round;
stroke-miterlimit: 10;
}
.st20 {
fill: none;
stroke: #333333;
stroke-width: 10.07235;
stroke-linecap: round;
stroke-linejoin: round;
stroke-miterlimit: 10;
}
.st21 {
fill: none;
stroke: #333333;
stroke-width: 10.0209;
stroke-linecap: round;
stroke-linejoin: round;
stroke-miterlimit: 10;
}
.st22 {
fill: none;
stroke: #AF1B43;
stroke-width: 10.07235;
stroke-linecap: round;
stroke-linejoin: round;
stroke-miterlimit: 10;
}
.st23 {
fill: none;
stroke: #AF1B43;
stroke-width: 10.0209;
stroke-linecap: round;
stroke-linejoin: round;
stroke-miterlimit: 10;
}
.st24 {
fill: none;
stroke: #FFFFFF;
stroke-width: 10.07235;
stroke-linecap: round;
stroke-linejoin: round;
stroke-miterlimit: 10;
}
.st25 {
fill: none;
stroke: #FFFFFF;
stroke-width: 10.0209;
stroke-linecap: round;
stroke-linejoin: round;
stroke-miterlimit: 10;
}
.st26 {
fill: none;
stroke: #333333;
stroke-width: 10;
stroke-linecap: round;
stroke-miterlimit: 10;
}
.st27 {
fill: none;
stroke: #AF1B43;
stroke-width: 10;
stroke-linecap: round;
stroke-miterlimit: 10;
}
.st28 {
fill: none;
stroke: #FFFFFF;
stroke-width: 10;
stroke-linecap: round;
stroke-miterlimit: 10;
}
</style>
<g>
<circle class="st4" cx="200" cy="200" r="168.90668" />
<line class="st4" x1="31.09333" y1="200" x2="348.98587" y2="200" />
<line class="st4" x1="200" y1="31.09333" x2="200" y2="368.90668" />
<ellipse class="st4" cx="200" cy="200" rx="86.05878" ry="168.90668" />
<path class="st4" d="M84.50507,100.5538c86.32178,26.70246,165.8439,24.67728,244.36984-5.50942" />
<path class="st4" d="M67.65932,304.95563c91.3526-31.23828,178.50104-31.79688,261.21558,0" />
</g>
</svg>
</span>
<span class="max-sm:hidden">Deutsch</span>
</button>
</div>
<div x-data="{ open: false }" class="inline-flex bg-gray-600 p-8 px-8 sm:px-16 lg:py-10 lg:px-20 relative z-0">
<div :class="open ? 'left-0 lg:right-0 lg:left-auto z-20 opacity-100' : '-left-1/2 lg:left-auto lg:-right-1/2 opacity-0 -z-10' " class="h-20 bg-gray-600 duration-300 transition-all fixed lg:absolute max-lg:mt-3 max-lg:ml-3 top-0 w-max">
{# content goes here #}
<ul class="flex items-center w-full h-full gap-6 px-8 py-4 text-white">
<li>
<a class="text-white" href="#">Englisch</a>
</li>
<div class="w-px h-full bg-gray-500"></div>
<li>
<a class="text-white" href="#">Deustch</a>
</li>
<div class="w-px h-full bg-gray-500"></div>
<li>
<button @click="open = false" type="button" class="flex">
{% render "@icon" with {
name: 'cross',
size: 'md',
strokeColor: "stroke-white"
} %}
</button>
</li>
</ul>
</div>
{# content section trigger #}
<button @click="open = true" href="#" class="scale-120 absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 flex items-center gap-4 text-white">
{% render "@icon" with {
name: 'language-globe',
size: 'md',
strokeColor: "stroke-white"
} %}
<span class="max-sm:hidden">Deutsch</span>
</button>
</div>
/* No context defined. */
No notes defined.