open-law/app/templates/sidebar.html

<aside
  id="logo-sidebar"
  class="md:hidden fixed top-0 left-0 z-40 w-64 h-screen pt-5 transition-transform -translate-x-full bg-white border-r border-gray-200 md:translate-x-0 dark:bg-gray-800 dark:border-gray-700"
  aria-label="Sidebar">
  <div class="h-full px-3 pb-4 overflow-y-auto bg-white dark:bg-gray-800">
    <!-- prettier-ignore -->
    <div class="flex justify-between mb-10">
     <!-- prettier-ignore -->
    <a href="/" class="flex dark:text-white items-center font-bold"><img src="{{url_for('static',filename='img/logo.svg')}}" class="h-8 mr-3" alt="OpenLaw Logo" />Open Law</a>
    <button type="button" data-drawer-hide="logo-sidebar" aria-controls="logo-sidebar" class="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm p-1.5 items-center dark:hover:bg-gray-600 dark:hover:text-white">
      <svg aria-hidden="true" class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"> <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path> </svg>
      <span class="sr-only">Close menu</span>
    </button>
    </div>
    <!-- prettier-ignore -->
    <ul class="space-y-2 font-medium">
      {% if current_user.is_authenticated %}
        <li class="md:hidden">
          <!-- prettier-ignore -->
          <span class="flex items-center p-2 text-gray-900 rounded-lg dark:text-white bg-gray-200 dark:bg-gray-700" >
            {% 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 %}
            <a href="{{ url_for('user.profile',user_id=current_user.id) }}" class="ml-2">{{ current_user.username }}</a>
          </span>
        </li>
        <li class="md:hidden">
          <a href="{{ url_for('user.edit_profile') }}" class="flex items-center p-2 text-gray-900 rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700">
            <!-- prettier-ignore -->
            <span >Edit profile</span>
          </a>
        </li>
        <li class="md:hidden" id="dropdownNotificationButton" data-dropdown-toggle="dropdownNotification" >
          <!-- prettier-ignore -->
          <span class="flex items-center p-2 text-gray-900 rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700" >
            {% 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 %}
            <p>Notifications</p>
          </span>
        </li>
      {% endif %}
      {% if current_user.is_authenticated %}
      <li>
        <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">
          <!-- prettier-ignore -->
          <span>My Library</span >
        </a>
      </li>
        <li>
          <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">
            <!-- prettier-ignore -->
            <span>My Contributions</span>
          </a>
        </li>
      <li>
        <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">
          <!-- prettier-ignore -->
          <span>Favorite Books</span>
        </a>
      </li>
      {% endif %}
      {% if not current_user.is_authenticated %}
        <li>
          <a
            href="https://join.status.im/b/{{url_for('main.index', _external=True)}}"
            class="md:hidden flex justify-center 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"
          >
            <span>Connect wallet</span>
          </a>
        </li>
      {% endif %}
       <li>
        <a href="{{ url_for('search.search_interpretations',q='')}}" class="flex items-center p-2 text-gray-900 rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700">
          <!-- prettier-ignore -->
          <span>Search</span>
        </a>
      </li>
      <li class="md:hidden">
        <div id="theme-toggle" class="absolute bottom-14 left-3 cursor-pointer flex items-center mt-2  p-2 text-gray-900 rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700">
          <button type="button" class=" text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none rounded-lg text-sm">
            <!-- prettier-ignore -->
            <svg id="theme-toggle-dark-icon" class="hidden w-6 h-6" 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-6 h-6" 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>
          <span class="ml-3 dark:hidden">Dark Mode</span>
          <span class="ml-3 dark:block hidden">Light Mode</span>
        </div>
      </li>

      {% if current_user.is_authenticated %}
      <li>
        <!-- prettier-ignore -->
        <a href="{{ url_for('auth.logout') }}" class="absolute bottom-3 left-3 flex items-center p-2 text-gray-900 rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700">
          <!-- prettier-ignore -->
          <svg aria-hidden="true" class="flex-shrink-0 w-6 h-6 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"> <path fill-rule="evenodd" d="M3 3a1 1 0 00-1 1v12a1 1 0 102 0V4a1 1 0 00-1-1zm10.293 9.293a1 1 0 001.414 1.414l3-3a1 1 0 000-1.414l-3-3a1 1 0 10-1.414 1.414L14.586 9H7a1 1 0 100 2h7.586l-1.293 1.293z" clip-rule="evenodd"></path> </svg>
          <span class="flex-1 ml-3 whitespace-nowrap">Sign Out</span>
        </a>
      </li>
      {% endif %}
    </ul>
  </div>
</aside>