<link rel="stylesheet" href="/stylesheets/navbar.css" />

<div class="header">
  <img class="mobile-logo" src="/images/website_logo.png" alt="website logo" />
  <div class="navbar">
    <!-- 1 -->
    <div class="heading-logo">
      <img class="logo" src="/images/website_logo.png" alt="website logo" />
      <h1 data-name="ReadIt" class="heading">ReadIt</h1>
    </div>

    <!-- 2 -->
    <ul class="navbar-list">
      <li>
        <a href="/">Home</a>
      </li>
      <li>
        <a href="/blogs">Read</a>
      </li>
      <li class="dropdown">
        <a href="/categories">Categories</a>
        <ul class="dropdown-content">
          <a>Life</a>
          <a>Travel</a>
          <a>Food</a>
          <a>Technology</a>
          <a>Management</a>
        </ul>
      </li>

      <li>
        <a href="/blogs/write">Write</a>
      </li>
      <li>
        <a href="/about">About</a>
      </li>
      <li>
        <a href="/contact">Contact</a>
      </li>
    </ul>

    <!-- 3 -->
    <div class="rightbar">
      <% if(!currentUser) {%>
      <button id="getStarted" class="btn">
        <a href="/signup" style="color: black">Get Started</a>
      </button>
      <% } else {%>
      <button id="getStarted" class="btn">
        <a href="/logout" style="color: black">Logout</a>
      </button>
      <% } %>
    </div>
  </div>

  <div class="mobile-navbar-btn">
    <ion-icon name="menu-outline" class="mobile-navbar-icon"></ion-icon>
    <ion-icon name="close-outline" class="mobile-navbar-icon"></ion-icon>
  </div>
</div>

<script src="/javascripts/navbar.js"></script>
<!-- Ionicons -->
<script
  type="module"
  src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"
></script>
<script
  nomodule
  src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"
></script>
