<div class="tm ui inverted right sidebar">
    <button class="ui icon button blue toggle-sidebar">
        <i class="info circle icon"></i>
    </button>

    <div>
        {{#if userApp.user }}
            <div class="ui segment container profile">
                {{#if userApp.user.image }}
                    <img class="ui small circular image" src="{{ userApp.user.image }}">
                {{ else }}
                    <img class="ui small circular image" src="{{ app.path.tamed.express }}/img/dev/user.png">
                {{/if }}
                <h3>{{ userApp.user.displayName }}</h3>
                <div class="ui fluid buttons">
                    <a class="ui button" href="/user/{{ userApp.user._key }}">Profile</a>
                    <a class="ui button" href="/logout">Logout</a>
                </div>
            </div>
        {{else}}
            <div class="ui user segment">
                <!-- <div class="image">
                    <img class="ui small circular image" src="https://semantic-ui.com/images/avatar2/large/kristy.png">
                </div> -->
                <div class="content">
                    <div class="ui fluid buttons">
                        <a class="ui button" href="{{ userApp.route.user.login }}">Login</a>
                        <a class="ui button" href="{{ userApp.route.user.signup }}">Sign Up</a>
                    </div>
                </div>
            </div>
        {{/if }}
    </div>

    <div class="ui vertical menu app-menu-mobile fluid menu inverted">
        {{> main/menu/app }}
    </div>
</div>
