<nav>
    <a href="/dashboard" class="title">
        <img src="/assets/img/logo.png">
        <h1>Argus</h1>
    </a>
    <div class="right" style="display: flex; align-items: center;">
        <div class="navlinks">
            <a href="/support">Support</a>
            <a href="/premium">Premium</a>
            <a href="/vote">Vote</a>
        </div>

        <div class="username-box">
            <% if (user) {%>
                <a class="username" href="#" onclick="toggleSidenav()">
                    <div style="display: flex; flex-direction: column;">
                        <span><%= user.global_name %><% if (user.discriminator && user.discriminator !== "0") {%> #<%= user.discriminator %> <%}%></span>
                    </div>
                    <%- user.avatar ? `<img src="https://cdn.discordapp.com/avatars/${user.id}/${user.avatar}.png">` : `<img src="/assets/img/nopp.png">` %>
                </a>
            <%} else {%>
                <a class="username" href="#" onclick="toggleSidenav()">
                    <div style="display: flex; flex-direction: column;">
                        <span></span>
                    </div>
                    <img src="/assets/img/nopp.png">
                </a>
            <%}%>
        </div>
    </div>
</nav>
<div class="usermenu" id="sidenav">
    <div class="top">
        <% if (user) {%>
            <a class="username" href="#" onclick="toggleSidenav()">
                <div style="display: flex; flex-direction: column;">
                    <span><%= user.global_name %><% if (user.discriminator && user.discriminator !== "0") {%> #<%= user.discriminator %> <%}%></span>
                </div>
                <%- user.avatar ? `<img src="https://cdn.discordapp.com/avatars/${user.id}/${user.avatar}.png">` : `<img src="/assets/img/nopp.png">` %>
            </a>
        <%} else {%>
            <a class="username" href="#" onclick="toggleSidenav()">
                <div style="display: flex; flex-direction: column;">
                    <span></span>
                </div>
                <img src="/assets/img/nopp.png">
            </a>
        <%}%>
        <a href="/" class="menuItem">
            <div class="listItem">
                <span>Home</span>
                <svg height="200px" width="200px" version="1.1" id="_x32_" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 512 512" xml:space="preserve" fill="#fefefe" stroke="#fefefe"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <style type="text/css"> .st0{fill:#fefefe;} </style> <g> <polygon class="st0" points="434.162,293.382 434.162,493.862 308.321,493.862 308.321,368.583 203.682,368.583 203.682,493.862 77.841,493.862 77.841,293.382 256.002,153.862 "></polygon> <polygon class="st0" points="0,242.682 256,38.93 512,242.682 482.21,285.764 256,105.722 29.79,285.764 "></polygon> <polygon class="st0" points="439.853,18.138 439.853,148.538 376.573,98.138 376.573,18.138 "></polygon> </g> </g></svg>
            </div>
        </a>

        <a href="/dashboard" class="menuItem">
            <div class="listItem">
                <span>Dashboard</span>
                <svg viewBox="0 0 48.00 48.00" xmlns="http://www.w3.org/2000/svg" fill="#fefefe" stroke="#fefefe" stroke-width="0.00048000000000000007"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <title>dashboard-tile-solid</title> <g id="Layer_2" data-name="Layer 2"> <g id="invisible_box" data-name="invisible box"> <rect width="48" height="48" fill="none"></rect> </g> <g id="icons_Q2" data-name="icons Q2"> <g> <path d="M20,30H8a2,2,0,0,0-2,2V42a2,2,0,0,0,2,2H20a2,2,0,0,0,2-2V32a2,2,0,0,0-2-2Z"></path> <path d="M20,4H8A2,2,0,0,0,6,6V24a2,2,0,0,0,2,2H20a2,2,0,0,0,2-2V6a2,2,0,0,0-2-2Z"></path> <path d="M40,4H28a2,2,0,0,0-2,2V16a2,2,0,0,0,2,2H40a2,2,0,0,0,2-2V6a2,2,0,0,0-2-2Z"></path> <path d="M40,22H28a2,2,0,0,0-2,2V42a2,2,0,0,0,2,2H40a2,2,0,0,0,2-2V24a2,2,0,0,0-2-2Z"></path> </g> </g> </g> </g></svg>
            </div>
        </a>

        <a href="/premium" class="menuItem">
            <div class="listItem">
                <span>Premium</span>
                <svg fill="#fefefe" viewBox="0 -5.47 56.254 56.254" xmlns="http://www.w3.org/2000/svg" stroke="#fefefe"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <path id="diamond_premium" data-name="diamond premium" d="M494.211,354.161l1.174-1.366H482.552L469.8,367.5h12.94Zm-8.4,13.336H510.05l-6.589-7.664-5.528-6.429-8.354,9.713Zm-15.856,2.329,24.1,25.356L482.53,369.826Zm40.824,0h-2.1l-8.829,0H485.083l12.774,28.1.082.178,12.17-26.8Zm-8.94,25.322,24.057-25.32H513.337Zm24.215-27.65L513.3,352.8H500.478l12.642,14.7Z" transform="translate(-469.802 -352.795)"></path> </g></svg>
            </div>
        </a>
        <% if (user) {%>
            <a href="/logout" class="menuItem">
                <div class="listItem">
                    <span>Logout</span>
                    <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" stroke="#fefefe"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <path d="M15 4H18C19.1046 4 20 4.89543 20 6V18C20 19.1046 19.1046 20 18 20H15M8 8L4 12M4 12L8 16M4 12L16 12" stroke="#fefefe" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"></path> </g></svg>
                </div>
            </a>
        <%} else {%>
            <a href="/dashboard" class="menuItem">
                <div class="listItem">
                    <span>Login</span>
                    <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" stroke="#fefefe"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <path d="M15 4H18C19.1046 4 20 4.89543 20 6V18C20 19.1046 19.1046 20 18 20H15M11 16L15 12M15 12L11 8M15 12H3" stroke="#fefefe" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"></path> </g></svg>
                </div>
            </a>
        <%}%>
    </div>
    <div class="bottom"></div>
</div>
<div class="shadow" id="sidenav-shadow" onclick="toggleSidenav()"></div>