<header>
    <div id="topHead" class="logo_title">
      <a href="/search"><img src="/images/receipeasy_logo_v2.png" alt="RecipEasy logo"/></a>
      <% if (typeof(userLog) != "undefined" && userLog) {%>
        <b><i class="fa fa-user-circle" aria-hidden="true"></i> &nbsp; <%= user %> </b>
      <% } %>  
    </div>
    
    <nav class="navbar">
      <ul>
        <li>
          <div class="svg-wrapper">
            <svg height="50" width="130" xmlns="http://www.w3.org/2000/svg">
              <rect id="shape" height="50" width="130"/>
              <div id="text">
                <a href="/search"><span class="spot"></span>Search</a>
              </div>
            </svg>
          </div>       
        </li>
        <li>
          <div class="svg-wrapper">
            <svg height="50" width="130" xmlns="http://www.w3.org/2000/svg">
              <rect id="shape" height="50" width="130"/>
              <div id="text">
                <a href="/featured"><span class="spot"></span>Featured</a>
              </div>
            </svg>
          </div>       
        </li>
        <li>
          <div class="svg-wrapper">
            <svg height="50" width="130" xmlns="http://www.w3.org/2000/svg">
              <rect id="shape" height="50" width="130" />
              <div id="text">
                <a href="/add-recipe"><span class="spot"></span>Add Recipe</a>
              </div>
            </svg>
          </div> 
        </li>
        <% if (typeof(userLog) != "undefined" && userLog){ %> 
        <li>
          <div class="svg-wrapper">
            <svg height="50" width="130" xmlns="http://www.w3.org/2000/svg">
              <rect id="shape" height="50" width="130" />
              <div id="text">
                <a href="/dashboard"><span class="spot"></span>My Recipes</a>
              </div>
            </svg>
          </div> 
        </li>
        <li>
          <div class="svg-wrapper">
            <svg height="50" width="130" xmlns="http://www.w3.org/2000/svg">
              <rect id="shape" height="50" width="130" />
              <div id="text">
                <a href="/favourite-recipe"><span class="spot"></span>Favourites</a>
              </div>
            </svg>
          </div> 
        </li>
        <% } %>
          <% if (typeof(userLog) != "undefined" && userLog){ %> 
            <li>
            <div class="svg-wrapper">
              <svg height="50" width="130" xmlns="http://www.w3.org/2000/svg">
                <rect id="shape" height="50" width="130" />
                <div id="text">
                  <a href="/logout"><span class="spot"></span> Logout</a>
                </div>
              </svg>
            </div>
          </li>
            <% } else{%>
              <li>
              <div class="svg-wrapper">
                <svg height="50" width="130" xmlns="http://www.w3.org/2000/svg">
                  <rect id="shape" height="50" width="130" />
                  <div id="text">
                    <a href="/login"><span class="spot"></span>Login</a>
                  </div>
                </svg>
              </div>
              </li>
          <% } %> 
      </ul>
  </nav> 
  <div style="clear: both;"></div>
</header>
