<menu id="nav-bar">
    <li id="nav-bar-profile" data-pjax="/users/me" <% if(selection === 0) {%>class="selected"<%}%>>
        <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="#373F53" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-user">
            <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/>
            <circle cx="12" cy="7" r="4"/>
        </svg>
        <a><%= lang.global.user_page %></a>
    </li>
    <li id="nav-bar-activity-feed" data-pjax="/activity-feed" style="margin-top: 1px;"<% if(selection === 1) {%>class="selected"<%}%>>
        <svg id="test" xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="#373F53" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-inbox">
            <polyline points="22 12 16 12 14 15 10 15 8 12 2 12"/>
            <path d="M5.45 5.11L2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z"/>
        </svg>
        <a><%= lang.global.activity_feed %></a>
    </li>
    <li id="nav-bar-communities" data-pjax="/communities" <% if(selection === 2) {%>class="selected"<%}%>>
        <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="#373F53" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-users">
            <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/>
            <circle cx="9" cy="7" r="4"/>
            <path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/>
        </svg>
        <a><%= lang.global.communities %></a>
    </li>
    <li id="nav-bar-messages" data-pjax="/messages" <% if(selection === 3) {%>class="selected"<%}%>>
        <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="#373F53" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-mail">
            <path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/>
            <polyline points="22,6 12,13 2,6"/>
        </svg>
        <a><%= lang.global.messages %><span id="messages-badge" class="badge" style=""></span></a>
    </li>
    <li id="nav-bar-news" data-pjax="/news" <% if(selection === 4) {%>class="selected"<%}%>>
        <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="#373F53" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-bell">
            <path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"/>
            <path d="M13.73 21a2 2 0 0 1-3.46 0"/>
        </svg>
        <a><%= lang.global.notifications %><span id="news-badge" class="badge" style=""></span></a>
    </li >
    <li id="nav-bar-exit" onclick="exit()">
        <svg xmlns="http://www.w3.org/2000/svg" width="75" height="75" viewBox="0 0 24 24" fill="none" stroke="url(#grad1)" stroke-width="4" stroke-linecap="butt" stroke-linejoin="round" class="feather feather-x">
            <linearGradient id="grad1" x1="0%" y1="0%" x2="0%" y2="100%">
                <stop offset="0%" style="stop-color:#495167;stop-opacity:1"/>
                <stop offset="100%" style="stop-color:#676E87;stop-opacity:1"/>
            </linearGradient>

            <line x1="18" y1="6" x2="6" y2="18"/>
            <line x1="6" y1="6" x2="18" y2="18"/>
        </svg>
        <a href=""><%= lang.global.close %></a>
    </li>
</menu>