How to combine Custom language variable with <?= html($language->name()) ?>

I am using both individually and its working just fine, but I don’t know how to combine them.

I want the language menu to show the languages translated.

<grid-item class="topbar">
	<!-- Language Menu -->
			<?php foreach($kirby->languages() as $language): ?> 
			<li <?php e($kirby->language() == $language, ' class="active"') ?>>
				<a href="<?= $page->url($language->code()) ?>" hreflang="<?php echo $language->code() ?>"><?= html($language->name()) ?></a>
		    <?php endforeach ?>

My es.php in languages

return [
    'code' => 'es',
    'default' => false,
    'direction' => 'ltr',
    'locale' => [
        'LC_ALL' => 'es_ES'
    'name' => 'Spanish',
    'translations' => [
        'readmore' => 'Leer más',
        'finduson' => 'Encuéntranos en',
        'english' => 'Inglés',
        'spanish' => 'Español',
        'dutch' => 'Holandés',
        'german' => 'Alemán',
    'url' => NULL

Your language names should actually be in the target language here, then you don’t have to translate them in the language switcher.

Language names that change according to the used language in the frontend don’t actually make sense.

Sonja, sorry I didn’t get it. Are you saying it makes no sense to translate language switches?

Yes. It is best practice to show the languages in their target language, ie. Deutsch for German, Français for French etc. Everyone will then recognize their desired language immediately. You are not providing the language switch for the readers of the current language.

Example from the FB page

Another example from the website:

MDN (Learn web development | MDN)

Kirby Panel:

OMG. I never noticed this before. Got it now, Thanks.