<?php if (get_theme_mod('mobile_menu_style', 'slidepanel') === 'slidepanel'): ?>
    <div id="offcanvas_menu" class="rt-offcanvas-menu-slidepanel rt-slidepanel is-slidepanel-left" style="display:none">

        <div class="rt-slidepanel__overlay js-slidepanel-close">
            <a class="rt-slidepanel__close" role="button" aria-label="<?php echo esc_attr__('Close menu', 'kubelio'); ?>">
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-x-lg" viewBox="0 0 16 16">
                    <path fill-rule="evenodd" d="M13.854 2.146a.5.5 0 0 1 0 .708l-11 11a.5.5 0 0 1-.708-.708l11-11a.5.5 0 0 1 .708 0Z"></path>
                    <path fill-rule="evenodd" d="M2.146 2.146a.5.5 0 0 0 0 .708l11 11a.5.5 0 0 0 .708-.708l-11-11a.5.5 0 0 0-.708 0Z"></path>
                </svg>
            </a>
        </div>

        <div class="rt-slidepanel__inner is-style-offcanvas">

            <div class="rt-slidepanel__wrapper">
                <div class="rt-slidepanel__body is-layout-flow px-0">
                    <div class="rt-slidepanel__element px-30">
                        <div class="rt-search-form">
                            <form class="rt-search-form__inner" action="<?php echo esc_url(home_url('/')); ?>" method="get">
                                <input class="rt-search-form__input" type="search" placeholder="<?php echo esc_attr__('Search posts', 'kubelio'); ?>" name="s" id="s">
                                <input type="hidden" name="post_type" value="<?php echo esc_attr(get_theme_mod('global_search_post_type', 'product')); ?>" />
                                <button type="submit" class="rt-search-form__icon " aria-label="<?php echo esc_attr__('Submit search', 'kubelio'); ?>">
                                    <i class="rt-icon has-interaction">
                                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-search" viewBox="0 0 16 16">
                                            <path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z" />
                                        </svg>
                                    </i>
                                </button>
                            </form>
                        </div>
                    </div>
                    <nav id="menu-primary" class="rt-menu is-menu-vertical js-menu">
                        <?php
                        wp_nav_menu(
                            array(
                                'container'      => '',
                                'theme_location' => 'primary',
                                'fallback_cb'    => 'rt_menu_default',
                            )
                        );
                        ?>
                    </nav>

                </div>
                <div class="rt-slidepanel__footer flex flex-wrap gap-30 px-30" style="border: none">
                    <?php echo kubelio_get_template_part('global/currency-offcanvas'); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped 
                    ?>

                    <?php if (get_theme_mod('header_button', false)) : ?>
                        <a class="rt-btn is-style-primary is-size-sm has-x-small-font-size flex-1" href="<?php echo esc_url(get_theme_mod('header_button_url', '#')); ?>" target="<?php echo esc_attr(get_theme_mod('header_button_new_tab', false) ? '_blank' : '_self'); ?>">
                            <?php echo esc_html(get_theme_mod('header_button_text', esc_html__('Get Started', 'kubelio'))); ?>
                        </a>
                    <?php endif ?>
                </div>
            </div>

        </div>

    </div>
<?php endif ?>