{#
    Responsive Menu Jinja template file.
    Safe to Copy
#}

<div id="upgrade-banner">
    <div id="upgrade-banner-title">Upgrade today to unlock the following features</div>
    <ul>
        <li>Desktop & Mega Menu</li>
        <li>Header Bar</li>
        <li>15+ Button Animations</li>
        <li>FontAwesome and GlyphIcon Support</li>
        <li>Keyboard Shortcuts</li>
        <li>Touch gestures</li>
        <li>Colour Opacity</li>
        <li>Preview Changes</li>
        <li>And much more</li>
    </ul>
    <a target="_blank" href="https://responsive.menu/pricing/?utm_source=free-plugin&utm_medium=banner&utm_campaign=free-plugin-banner" class="button">Upgrade Now</a>
</div>

<div id="docs-banner">
    Confused? Check out our documentation
    <a target="_blank" href="https://responsive.menu/docs" class="button">View Docs</a>
</div>

<div id="guide-banner">
    <div id="guide-title">
        Mini Admin Guide<br />
        <small>Hover the items to find their sections</small>
    </div>
    <div id="guide-wrapper">
        <a href="#responsive-menu-button-click-animation" class="scroll-to-option">
            <div id="guide-button-container" class="guide-helper-container{% if current_page() == 'button' %} guide-active{% endif %}">
                <div class="guide-helper">Button</div>
                <div id="guide-button-wrapper" class="guide-wrapper">
                    <div class="guide-button-line"></div>
                    <div class="guide-button-line"></div>
                    <div class="guide-button-line"></div>
                </div>
            </div>
        </a>
        <a href="#responsive-menu-menu-width" class="scroll-to-option">
            <div id="guide-container-container" class="guide-helper-container{% if current_page() == 'container' %} guide-active{% endif %}">
                <div id="guide-helper-container" class="guide-helper">Container</div>
                <div id="guide-container-wrapper" class="guide-wrapper">
                    <div class="guide-menu-text">Title</div>
                    <a href="#responsive-menu-menu-depth" class="scroll-to-option">
                        <div id="guide-menu-container" class="guide-helper-container{% if current_page() == 'menu' %} guide-active{% endif %}">
                            <div class="guide-helper">Menu</div>
                            <div id="guide-menu-wrapper" class="guide-wrapper">
                                <div class="guide-menu-item">Menu Item</div>
                                <div class="guide-menu-item">Menu Item</div>
                                <a href="#responsive-menu-arrow-position" class="scroll-to-option">
                                    <div id="guide-submenu-container" class="guide-helper-container{% if current_page() == 'sub-menus' %} guide-active{% endif %}">
                                        <div class="guide-helper guide-helper-submenus">Sub Menus</div>
                                        <div id="guide-submenu-wrapper" class="guide-wrapper">
                                            <div class="guide-menu-item guide-submenu-item">Sub Menu Item</div>
                                            <div class="guide-menu-item guide-submenu-item">Sub Menu Item</div>
                                        </div>
                                    </div>
                                </a>
                            </div>
                        </div>
                    </a>
                    <div class="guide-menu-text">Additional Content</div>
                    <div class="guide-menu-text">Search</div>
                </div>
            </div>
        </a>
    </div>
</div>