register/marko_unpacked/marko/cms/views/layouts/cms_header.php

<?php
$lg = !empty($_COOKIE['cookie_lg']) ? $_COOKIE['cookie_lg'] : 'bg'
?>
<div class="flex">
    <div class="header-left">
        <div id="google_translate_element"></div>
        <div class="flex flex-center">
            <div data-ts-button="bg" class="pointer <?= $lg == 'bg' ? 'sl' : ''?>"><i class="lg lg-bg"></i></div>
            <div data-ts-button="en" class="pointer <?= $lg == 'en' ? 'sl' : ''?>"><i class="lg lg-en"></i></div>
        </div>
    </div>
    <div class="header-right">
        <div class="flex">
            <div class="top-navigation flex">
                <?php

                use app\services\navigation\NavigationAdminGlobal;
                use app\services\navigation\NavigationPartner;

                if (!empty(Yii::$app->controller->userTypeKey)) {
                    switch (Yii::$app->controller->userTypeKey):
                        case 'admin-global':
                            echo NavigationAdminGlobal::top();
                            break;
                        case 'admin-cms':
                            //echo \app\services\navigation\NavigationPartner::left();
                            break;
                        case  'partner':
                            echo NavigationPartner::top();
                            break;
                    endswitch;
                }
                ?>
            </div>

            <div class="top-user" onclick="accountMenuOpen(this)">

                <div class="account-button default-dark la la-user"></div>
                <div class="menu shadow">
                    <a href="<?= Yii::$app->params['id_server'] /*Yii::$app->goTo('user/profile') */ ?>"><i
                                class="la la-user-cog"></i> <?= Yii::t('cms', 'Profile settings') ?></a>
                    <a href="/<?= Yii::$app->controller->id ?>/logout"><i
                                class="la la-sign-out"></i> <?= Yii::t('cms', 'Logout') ?></a>
                </div>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript">
    //<![CDATA[
    function setCookie(key, value, expiry) {
        var expires = new Date();
        expires.setTime(expires.getTime() + (expiry * 24 * 60 * 60 * 1000));
        document.cookie = key + '=' + value + ';expires=' + expires.toUTCString();
    }

    //function googleTranslateElementInit() {

    //const trans = new google.translate.TranslateElement({pageLanguage: 'bg'}, 'lg_selector');

    //gt.translate.

    //setTimeout(function () {
    //var select = document.querySelector('.goog-te-combo')


    //function triggerChange(element) {
    //    let changeEvent = new Event('change');
    //    element.dispatchEvent(changeEvent);
    //}
    const btnBG = document.querySelector('[data-ts-button="bg"]');
    const btnEn = document.querySelector('[data-ts-button="en"]');

    const changeLocale = function (lg) {
        request({
            url: '/remote/change-locale/', post: {lg}, done: function (r) {
                window.location.reload();
                ///const img = document.getElementById('bottom-logo');
                //img.src = `/_public/assets/images/logo-bottom-${lg}.png`
                //const imgHeader = document.getElementById('header-logo');
                //imgHeader.src = `/_public/assets/images/header-logo-${lg}.png`
            }
        })
    }

    btnBG.addEventListener('click', function () {
        changeLocale('bg')
    })
    btnEn.addEventListener('click', function () {
        changeLocale('en')
        //setCookie('googtrans', '/bg/en', 1);
        //var gt = new google.translate.TranslateElement({
        //    pageLanguage: 'bg', includedLanguages: 'en,bg', autoDisplay: true,
        //layout: google.translate.TranslateElement.InlineLayout.SIMPLE
        //}, 'google_translate_element');
    })


    // }, 2000)
    //}
    //]]>
</script>

<script>
    const accountMenuOpen = e => {
        one('.top-user .menu').toggleClass('open');
        one('.top-user .account-button').toggleClass('close');
    }


    /*
                    setTimeout(function () {

                    const btnBG = document.querySelector('[data-ts-button="bg"]');
                    const btnEn = document.querySelector('[data-ts-button="en"]');

                    btnBG.addEventListener('click', () => {
                        const frame = document.querySelector('.skiptranslate iframe');
                        if (frame) {
                            var showOriginal = frame.contentWindow.document.getElementById(':1.restore')
                            if (showOriginal) {
                                showOriginal.click();
                            }
                            request({
                                url: '/remote/change-locale/', post: {lg: 'bg'}, done: function (r) {
                                    window.location.reload()
                                    const img = document.getElementById('bottom-logo');
                                    img.src = '/_public/assets/images/logo-bottom-bg.png'
                                    const imgHeader = document.getElementById('header-logo');
                                    imgHeader.src = '/_public/assets/images/header-logo-bg.png'
                                }
                            })
                        }
                    })

                    btnEn.addEventListener('click', () => {
                        let option = select.querySelector(`option[value="en"]`);
                        if (option) {
                            option.setAttribute('selected', true);
                        }
                        // firing the event properly according to StackOverflow
                        // http://stackoverflow.com/questions/2856513/how-can-i-trigger-an-onchange-event-manually
                        let changeEvent = new Event('change');
                        select.dispatchEvent(changeEvent)

                        request({
                            url: '/remote/change-locale/', post: {lg: 'en'}, done: function (r) {
                                window.location.reload();
                                const img = document.getElementById('bottom-logo');
                                img.src = '/_public/assets/images/logo-bottom-en.png'
                                const imgHeader = document.getElementById('header-logo');
                                imgHeader.src = '/_public/assets/images/header-logo-en.png'

                            }
                        })
                    })
                })
     */
</script>