open-law/app/templates/header.html

<nav
  class="fixed top-0 z-[55] w-full bg-white border-b border-gray-200 dark:bg-gray-800 dark:border-gray-700">
  <div>
  <div class="px-3 py-3 lg:px-5 lg:pl-3">
    <div class="flex items-center justify-between">
      <div class="flex w-full items-center justify-start md:justify-between">
        <!-- prettier-ignore -->
        <button data-drawer-target="logo-sidebar" data-drawer-toggle="logo-sidebar" aria-controls="Sidebar" type="button" class="inline-flex items-center p-2 text-sm text-gray-500 rounded-lg md:hidden hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600">
          <span class="sr-only">Open sidebar</span>
          <!-- prettier-ignore -->
          <svg class="w-6 h-6" aria-hidden="true" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"> <path clip-rule="evenodd" fill-rule="evenodd" d="M2 4.75A.75.75 0 012.75 4h14.5a.75.75 0 010 1.5H2.75A.75.75 0 012 4.75zm0 10.5a.75.75 0 01.75-.75h7.5a.75.75 0 010 1.5h-7.5a.75.75 0 01-.75-.75zM2 10a.75.75 0 01.75-.75h14.5a.75.75 0 010 1.5H2.75A.75.75 0 012 10z"></path> </svg>
        </button>
        <!-- prettier-ignore -->
        <a href="/" class="flex ml-32 md:ml-2  md:mr-24"> <img src="{{url_for('static',filename='img/logo.svg')}}" class="h-8 md:mr-3" alt="OpenLaw Logo" /> <span class="hidden md:inline-block self-center text-xl font-semibold sm:text-2xl whitespace-nowrap dark:text-white" >OpenLaw</span > </a>
          <!-- prettier-ignore -->
          {% if selected_tab=='my_library' or selected_tab=='favorite_books' or selected_tab=='explore_books' or selected_tab=='latest_interpretations' or selected_tab=='my_contributions' %}
          <button id="dropdownDelayButton" data-dropdown-toggle="dropdownDelay" data-dropdown-delay="500" data-dropdown-trigger="hover" class="md:hidden text-white ml-4 bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-4 py-2.5 text-center inline-flex items-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800" type="button">
            Sort by
            {{request.args.get('sort',"")}}
            <!-- prettier-ignore -->
            <svg class="w-4 h-4 ml-auto" aria-hidden="true" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path> </svg>
          </button>

          <!-- Dropdown menu -->
          <!-- prettier-ignore -->
          <div id="dropdownDelay" class="z-10 hidden bg-white divide-y divide-gray-100 rounded-lg shadow w-44 dark:bg-gray-700">
            <ul class="py-2 text-sm text-gray-700 dark:text-gray-200" aria-labelledby="dropdownDelayButton">
              <!-- prettier-ignore -->
              {% if selected_tab=='latest_interpretations' or selected_tab=='my_contributions' %}
                <li>
                  <a href="?sort=upvoted" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white" >
                    Most upvoted
                  </a >
                </li>
              {% endif %}

              {% if selected_tab=='my_library' or selected_tab=='favorite_books' or selected_tab=='explore_books'%}
                <li>
                  <a href="?sort=favorited" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white" >
                    Most favorited
                  </a>
                </li>
              {% endif %}

              <li>
                <a href="?sort=recent" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white" >
                  Most recent
                </a >
              </li>
              {% if selected_tab=='latest_interpretations' or selected_tab=='my_contributions' %}
                <li>
                  <a href="?sort=commented" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white" >
                    Most comments
                  </a >
                </li>
              {% endif %}

              {% if selected_tab=='my_library' or selected_tab=='favorite_books' or selected_tab=='explore_books'%}
                <li>
                  <a href="?sort=interpretations" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white" >
                    Most interpretations
                  </a >
                </li>
              {% endif %}
            </ul>
          </div>
          {% endif %}
          {% include 'sidebar.html' %}

        {% include 'searchbar.html' %}
        <!-- prettier-ignore -->
        <button id="theme-toggle" type="button" class="md:block hidden md:ml-auto text-gray-500 dark:text-gray-400 hover:bg-gray-100 md:mr-2 dark:hover:bg-gray-700 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 rounded-lg text-sm p-2.5">
          <!-- prettier-ignore -->
          <svg id="theme-toggle-dark-icon" class="hidden w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"> <path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z"></path> </svg>
          <svg id="theme-toggle-light-icon" class="hidden w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"> <path d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z" fill-rule="evenodd" clip-rule="evenodd"></path> </svg>
        </button>

        <!-- prettier-ignore -->
        {% if not current_user.is_authenticated %}
        <button
          id="connectWalletBtn"
          type="button"
          class="text-white bg-gradient-to-r from-cyan-500 to-blue-500 hover:bg-gradient-to-bl focus:ring-4 focus:outline-none focus:ring-cyan-300 dark:focus:ring-cyan-800 font-medium rounded-lg text-sm px-5 py-2.5 text-center">
          Connect wallet
        </button>
        {% endif %} {% if current_user.is_authenticated %}
        <div class="md:flex hidden">
          <div class="items-center md:ml-3 hidden md:flex">
            <!-- prettier-ignore -->
            <button id="dropdownNotificationButton" data-dropdown-toggle="dropdownNotification" class="inline-flex items-center text-sm font-medium text-center text-gray-500 hover:text-gray-900 focus:outline-none dark:hover:text-white dark:text-gray-400" type="button">
              <svg class="w-6 h-6" aria-hidden="true" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"> <path d="M10 2a6 6 0 00-6 6v3.586l-.707.707A1 1 0 004 14h12a1 1 0 00.707-1.707L16 11.586V8a6 6 0 00-6-6zM10 18a3 3 0 01-3-3h6a3 3 0 01-3 3z"></path> </svg>
              {% if current_user.active_notifications %}
              <div class="relative flex">
                <div class="relative inline-flex w-3 h-3 bg-red-500 border-2 border-white rounded-full -top-2 right-3 dark:border-gray-900"></div>
              </div>
              {% endif %}
            </button>
          </div>
          <div class="items-center md:ml-3 hidden md:flex">
            <div class="flex justify-center items-center">
              <!-- prettier-ignore -->
              <button type="button" class=" text-gray-500 dark:text-gray-400 hover:bg-gray-100 md:mr-2 dark:hover:bg-gray-700 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 rounded-lg text-sm" aria-expanded="false" data-dropdown-toggle="dropdown-user" >
                  <span class="sr-only">Open user menu</span>
                  {% if current_user.avatar_img %}
                    <img class="w-9 h-9 rounded-full" src="data:image/jpeg;base64,{{ current_user.avatar_img }}" alt="user avatar">
                  {% else %}
                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6"> <path stroke-linecap="round" stroke-linejoin="round" d="M17.982 18.725A7.488 7.488 0 0012 15.75a7.488 7.488 0 00-5.982 2.975m11.963 0a9 9 0 10-11.963 0m11.963 0A8.966 8.966 0 0112 21a8.966 8.966 0 01-5.982-2.275M15 9.75a3 3 0 11-6 0 3 3 0 016 0z" /> </svg>
                  {% endif %}
                  <!-- prettier-ignore -->
                </button>
            </div>
            <!-- prettier-ignore -->
            <div class="z-50 hidden my-4 text-base list-none bg-white divide-y divide-gray-100 rounded shadow dark:bg-gray-700 dark:divide-gray-600" id="dropdown-user" >
                <div class="px-4 py-3" role="none">
                  <a href="{{ url_for('user.profile',user_id=current_user.id) }}" class="text-center text-sm text-gray-900 dark:text-white" role="none"> {{current_user.username}} </a>
                </div>
                <div class="px-4 py-3" role="none">
                  <a class="text-center text-sm text-gray-900 dark:text-white" role="none" href="{{ url_for('user.edit_profile') }}"> Edit profile </a>
                </div>
                <ul class="py-1" role="none">
                  <li>
                    <a href="{{ url_for('auth.logout') }}" class="block px-4 py-2 text-sm  dark:hover:bg-gray-600 dark:text-white" role="menuitem" >Sign out</a >
                  </li>
                </ul>
              </div>
          </div>
        </div>
        {% endif %}
      </div>
    </div>
  </div>

  {% if current_user.is_authenticated %}
  <!-- Dropdown menu -->
  <!--Those notification for now with dummy data-->
  <!-- prettier-ignore -->
  <div id="dropdownNotification" class="shadow-md z-50 hidden w-screen bg-white divide-y divide-gray-100 rounded-lg dark:bg-gray-800 dark:divide-gray-700 border border-gray-600 dark:shadow-gray-600 md:w-1/2" aria-labelledby="dropdownNotificationButton">
      <div class="block px-4 py-2 font-medium text-center text-gray-700 rounded-t-lg bg-gray-50 dark:bg-gray-800 dark:text-white"> Notifications </div>
      <div class="divide-y divide-gray-100 dark:divide-gray-700">
        {% include 'notification.html' %}
      <a href="{{url_for('notifications.get_all')}}" class="block py-2 text-sm font-medium text-center text-gray-900 rounded-b-lg bg-gray-50 hover:bg-gray-100 dark:bg-gray-800 dark:hover:bg-gray-700 dark:text-white">
        <div class="inline-flex items-center">
          <svg class="w-4 h-4 mr-2 text-gray-500 dark:text-gray-400" aria-hidden="true" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"> <path d="M10 12a2 2 0 100-4 2 2 0 000 4z"></path> <path fill-rule="evenodd" d="M.458 10C1.732 5.943 5.522 3 10 3s8.268 2.943 9.542 7c-1.274 4.057-5.064 7-9.542 7S1.732 14.057.458 10zM14 10a4 4 0 11-8 0 4 4 0 018 0z" clip-rule="evenodd"></path> </svg>
          View all
        </div>
      </a>
    </div>
  {% endif %}
</div>
  <!-- Second top navbar -->
  <div
    class="hidden md:block px-3 py-3 lg:px-5 lg:pl-3 border-t border-gray-200 dark:border-gray-700">
    <div class="flex items-center justify-between">
      <div class="flex w-full items-center justify-between">
        <ul class="flex font-medium items-center">
          <li class="mx-2 {% if selected_tab == 'my_library' %} bg-slate-300 dark:bg-slate-700 rounded-lg {% endif %}">
            <a
              href="{{ url_for('book.my_library') }}"
              class="flex items-center p-2 text-gray-900 rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700">
              <span class="text-center md:text-left">My Library</span>
            </a>
          </li>
          <li class="mx-2 {% if selected_tab == 'my_contributions' %} bg-slate-300 dark:bg-slate-700 rounded-lg {% endif %}">
            <a
              href="{{url_for('book.my_contributions')}}"
              class="flex items-center p-2 text-gray-900 rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700">
              <span class="text-center md:text-left">My Contributions</span>
            </a>
          </li>
          <li class="mx-2 {% if selected_tab == 'favorite_books' %} bg-slate-300 dark:bg-slate-700 rounded-lg {% endif %}">
            <a
              href="{{ url_for('book.favorite_books')}}"
              class="flex items-center p-2 text-gray-900 rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700">
              <span class="text-center md:text-left">Favorite Books</span>
            </a>
          </li>
        </ul>
      </div>
    </div>
  </div>
</nav>