doughnut-wedding/app/Resources/views/off_canvas.html.twig

<div id="offcanvas" uk-offcanvas="overlay: true; mode:reveal">
    <div class="uk-offcanvas-bar uk-offcanvas-bar-animation">
        <button class="uk-offcanvas-close" type="button" uk-close></button>
        <ul class="uk-nav uk-nav-primary">
            <li class="uk-nav-header">Navigation</li>
            <li class="uk-nav-divider"></li>
            <li><a href="{{ path('sikofitt_doughnutwedding_default_index') }}"><span class="uk-margin-small-right" uk-icon="icon: home"></span> Home</a></li>
            <li><a href="{{ path('sikofitt_doughnutwedding_default_ourstory') }}"><span class="uk-margin-small-right" uk-icon="icon: heart"></span> Our Story</a></li>
            <li><a href="{{ path('sikofitt_doughnutwedding_rsvp_index') }}"><span class="uk-margin-small-right" uk-icon="icon: bolt"></span> RSVP</a></li>
            <li><a href="{{ path('sikofitt_doughnutwedding_gallery_index') }}"><span class="uk-margin-small-right" uk-icon="icon: image"></span> Gallery</a></li>
            <li><a href="{{ path('sikofitt_doughnutwedding_default_location') }}"><span class="uk-margin-small-right" uk-icon="icon: location"></span> Location</a></li>
            <li><a href="{{ path('sikofitt_doughnutwedding_default_contact') }}"><span class="uk-margin-small-right" uk-icon="icon: mail"></span> Get In Touch</a></li>

            {% if not is_granted('IS_AUTHENTICATED_FULLY') %} {% set social_prefix = 'Login with' %} {% else %} {% set social_prefix = 'Link Account With' %} {% endif %}
            {% if is_granted('IS_AUTHENTICATED_FULLY') %}
                <li class="uk-nav-header">{{ app.user.name }}</li>
                <li class="uk-nav-divider"></li>
                <li><a href="{{ path('fos_user_profile_show') }}"><span class="uk-margin-small-right" uk-icon="icon: user"></span> Profile</a></li>
                <li><a href="{{ path('fos_user_change_password') }}"><span class="uk-margin-small-right" uk-icon="icon: lock"></span> Change password</a></li>
                <li><a href="{{ path('fos_user_security_logout') }}"><span class="uk-margin-small-right" uk-icon="icon: sign-out"></span> Logout</a></li>
            {% else %}
                <li class="uk-nav-header">User</li>
                <li class="uk-nav-divider"></li>
                <li><a href="{{ path('fos_user_security_login') }}" title="Login"><span class="uk-margin-small-right" uk-icon="icon: sign-in"></span> Login</a></li>
                <li><a href="{{ path('fos_user_registration_register') }}" title="Register"><span class="uk-margin-small-right" uk-icon="icon: star"></span> Register / RSVP</a></li>
            {% endif %}

            <li>
                <div class="uk-position-fixed uk-position-bottom uk-padding-small">
                    <p class="uk-text-meta uk-text-center uk-margin-small-bottom">{{ social_prefix }}</p>
                    <ul class="uk-iconnav">
                        <li><a><span class="uk-margin-small-right" uk-icon="icon: facebook"></span></a></li>
                        <li><a><span class="uk-margin-small-right" uk-icon="icon: google"></span></a></li>
                        <li><a><span class="uk-margin-small-right" uk-icon="icon: instagram"></span></a></li>
                        <li><a><span class="uk-margin-small-right" uk-icon="icon: twitter"></span></a></li>
                        <li><a><span class="uk-margin-small-right uk-icon-image uk-login uk-login-yahoo"><img height="20" width="20" src="{{ asset('images/yahoo.svg') }}" uk-svg></span></a></li>
                        <li><a><span class="uk-margin-small-right uk-icon-image uk-login uk-login-amazon"><img height="20" width="20" src="{{ asset('images/amazon.svg') }}" uk-svg></span></a></li>
                    </ul>
                </div>
            </li>
        </ul>

    </div>
</div>