{assign var=Setting value=$Template->getAttribute('TemplateSetting')}
{assign var=Project value=$Site->getProject()}
{assign var=logos value=$Setting->getAttribute('navigationLogos')}
{assign var=logoSize value=$Setting->getAttribute('logoSize')}
{assign var=logoMaxWidth value=$Setting->getAttribute('logoMaxWidth')}
{assign var=logoTitle value=$Setting->getAttribute('logoTitle')}
{assign var=colorMode value=$Setting->getAttribute('colorMode')}

{if $logos.standard || $logos.dark || $logos.transparent}
<div class="header-bar-logo" style="{if $logoMaxWidth}--_q-controlConf-logo-width: {$logoMaxWidth}px;{/if}{if $logoSize.height}--_q-controlConf-logo-height: {$logoSize.height}px;{/if}">
    <a href="{$Project->get(1)->getUrlRewritten()|escape:'html'}" class="header-bar-logo__link" aria-label="{$Project->get(1)->getAttribute('title')|escape:'html'}"{if $logoTitle} title="{$logoTitle|escape:'html'}"{/if}>
        {foreach $logos as $variant => $Logo}
            {if $Logo}
                <span class="header-bar-logo__variant" data-logo-variant="{$variant|escape:'html'}">
                    {image image=$Logo class="header-bar-logo__img" height=$logoSize.height}
                </span>
            {/if}
        {/foreach}
    </a>
</div>
{/if}
{* rendered in both MegaMenu wrappers; nav.css shows it only in the mobile one, next to the menu button *}
{if $colorMode.menuSwitch === 'both' || $colorMode.menuSwitch === 'mobile'}
<div class="header-bar__colorMode header-bar__colorMode--mobile">
    {fetch template="template/colorModeSwitch.html" view=$colorMode.menuView mode=$colorMode.defaultMode}
</div>
{/if}