<link rel="stylesheet"
    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@48,400,1,0" />
<link rel="stylesheet"
    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0" />
<header class="flex space-between">
    <div class="header-branding">
        <h1 class="brandName">BagsForYou</h1>
    </div>
    <nav id="main-navigation" class="flex">
        <div class="site-nav">
            <a href="/" class="site-links">Home</a>
            <a href="/addReview" class="site-links">Add Review</a>
        </div>
        <div class="links-container flex">
            <div id="username" class="account-menu">
                <span class="material-symbols-outlined">
                    alternate_email
                </span>
                <a href="" class="account-box" id="accountUsername">
                    <%- username %>
                </a>
            </div>
            <div id="profile-box" class="account-menu">
                <span class="material-symbols-rounded">
                    person
                </span>
                <a href="/profile" class="active">
                    Profile
                </a>
            </div>
            <div id="user-setting" class="account-menu">
                <span class="material-symbols-outlined">
                    manage_accounts
                </span>
                <a href="/profile/edit" class="active">
                    Settings
                </a>
            </div>
            <div id="user-logout" class="account-menu">
                <span class="material-symbols-outlined">
                    logout
                </span>
                <a href="/logout" class="active">
                    Log Out
                </a>
            </div>
        </div>
    </nav>
</header>