[viewBag]

[staticMenu]
code = "main-menu"

[builderDetails menuSEODetails]
modelClass = "Webmors\Webconfig\Models\Page"
identifierValue = 1
modelKeyColumn = "id"
displayColumn = "id"
notFoundMessage = "Record not found"
==
<div class="offcanvas__area__blk">
    {#
    <div class="offcanvas__top__blk">
        <div class="canvas__top__ico">
            <a href="#"><i class="fas fa-user"></i></a>
            <a href="#"><img src="{{ 'assets/img/love.png'|theme }}" alt=""></a>
            <a href="#"><i class="fas fa-sign-out"></i></a>
        </div>
    </div>
    #}
    <div class="offcanvas__menu shownonload" style="display:none">
        <h2 style="color: #fff">{{ menuSEODetails.record.menu_h2 }}</h2>
        <nav>
            <ul>
                {% if staticMenu.menuItems %}
                    {% set items = staticMenu.menuItems %}
                    {% set count = 0 %}
                    {% for item in items if not item.viewBag['isHidden'] %}
                        {% set count = count+1 %}
                        {% if not item.items %}
                        <li id="li{{ count }}"><a href="{{ item.url }}" class="has-submenu">{{ item.title|upper }}</a></li>
                        {% else %}
                        <li id="li{{ count }}"><a href="#" class="has-submenu">{{ item.title|upper }}<i class="far fa-angle-right"></i></a>
                            <div class="offcanvas__second__menu ">
                                <span class="close__offcanvas__second__menu">
                                    <i class="far fa-angle-left"></i>
                                </span>
                                <div class="second__offcanvas__menu shownonload" style="display:none">
                                    <h4>{{ item.title|upper }}</h4>
                                    <nav>
                                        <ul>
                                            {% set subcount = 0 %}
                                            {% for subitem in item.items %}
                                                {% set subcount = subcount+1 %}
                                                <li class="click__to__show_third">
                                                    {% if not subitem.items %}
                                                    <a href="{{ subitem.url }}" class="click__to__show_third_1">{{ subitem.title }}</a>
                                                    {% else %}
                                                    <a href="#" class="click__to__show_third_1" id="click__to__show_third_{{ count }}_{{ subcount }}">{{ subitem.title }}<i class="far fa-angle-right"></i></a>
                                                    <div class="offcanvas__third__menu offcanvas__menu_third_1 shownonload" id="offcanvas__menu_third_{{ count }}_{{ subcount }}">
                                                        <span class="close__offcanvas__third__menu">
                                                            <i class="far fa-angle-left"></i>
                                                        </span>
                                                        <div class="second__offcanvas__menu third__menu__blk shownonload" style="display:none">
                                                            <h4>{{ subitem.title }}</h4>
                                                            <nav>
                                                                <ul>
                                                                    {% for subsubitem in subitem.items %}
                                                                    <li><a href="{{ subsubitem.url }}" {{ subsubitem.viewBag.isExternal ? 'target="_blank"' }}>{{ subsubitem.title }}</a></li>
                                                                    {% endfor %}
                                                                </ul>
                                                            </nav>
                                                        </div>
                                                    </div>
                                                    {% endif %}
                                                </li>
                                                {% put scripts%}
                                                <script>
                                                $('#click__to__show_third_{{ count }}_{{ subcount }}').on('click', function () {
                                                    $('.offcanvas__third__menu').removeClass('active');
                                                    $('#offcanvas__menu_third_{{ count }}_{{ subcount }}').addClass('active');
                                                })
                                                </script>
                                                {% endput %}
                                            {% endfor %}
                                        </ul>
                                    </nav>
                                </div>
                            </div>
                        </li>
                        {% endif %}
                    {% endfor %}
                {% endif %}
                {#
                <li id="li1"><a href="#"  class="has-submenu">ISLANDS <i class="far fa-angle-right"></i></a>
                    <div class="offcanvas__second__menu">
                        <span class="close__offcanvas__second__menu">
                            <i class="far fa-angle-left"></i>
                        </span>
                        <div class="second__offcanvas__menu">
                            <h4>ISLANDS</h4>
                            <nav>
                                <ul>
                                    <li><a href="#">Lorem, ipsum.</a></li>
                                    <li><a href="#">Lorem, ipsum.</a></li>
                                    <li><a href="#">Lorem, ipsum.</a></li>
                                    <li><a href="#">Lorem, ipsum.</a></li>
                                    <li><a href="#">Lorem, ipsum.</a></li>
                                    <li><a href="#">Lorem, ipsum.</a></li>
                                    <li><a href="#">Lorem, ipsum.</a></li>
                                    <li><a href="#">Lorem, ipsum.</a></li>
                                    <li><a href="#">Lorem, ipsum.</a></li>
                                </ul>
                            </nav>
                        </div>
                    </div>
                </li>
                <li><a href="#"  class="">VILLAS</a></li>
                <li><a href="#"  class="">PACKAGES</a>
                <li><a href="#"  class="">ACTIVITIES</a>
                #}
            </ul>
        </nav>
    </div>
    {#
    <div class="header__single__item desk__none">
        <div class="header__right__wrapper">
            <div class="header__right__blk">
                <div class="heaer__single__select">
                    <div class="header__select">
                        <select>
                            <option data-display="EN">EN</option>
                            <option value="1">BZ</option>
                        </select>
                    </div>
                    <div class="header__select">
                        <select>
                            <option data-display="USD">USD</option>
                            <option value="1">GBP</option>
                            <option value="2">CAD</option>
                            <option value="3">XCD</option>
                        </select>
                    </div>
                </div>
            </div>
        </div>
    </div>
    #}
    <div class="close__menu">
        <i class="fas fa-times"></i>
    </div>
</div>
<div class="overlay"></div>
{% put scripts %}
<script>
    $(document).ready(function() {
    $(".shownonload").css("display", "block");
});
</script>
{% endput %}