dawarich/app/views/shared/_navbar.html.erb

<div class="navbar bg-base-100">
  <div class="navbar-start">
    <div class="dropdown">
      <label tabindex="0" class="btn btn-ghost lg:hidden">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h8m-8 6h16" /></svg>
      </label>
      <ul tabindex="0" class="menu menu-sm dropdown-content mt-3 z-[1] p-2 shadow bg-base-100 rounded-box w-52">
        <li><%= link_to 'Map', map_url, class: "#{active_class?(map_url)}" %></li>
        <li><%= link_to 'Trips<sup>α</sup>'.html_safe, trips_url, class: "#{active_class?(trips_url)}" %></li>
        <li><%= link_to 'Stats', stats_url, class: "#{active_class?(stats_url)}" %></li>
        <li>
          <details>
            <summary>My data</summary>
            <ul class="p-2 bg-base-100">
              <li><%= link_to 'Points', points_url, class: "#{active_class?(points_url)}" %></li>
              <li><%= link_to 'Visits & Places<sup>α</sup>'.html_safe, visits_url(status: :confirmed), class: "#{active_class?(visits_url)}" %></li>
              <li><%= link_to 'Imports', imports_url, class: "#{active_class?(imports_url)}" %></li>
              <li><%= link_to 'Exports', exports_url, class: "#{active_class?(exports_url)}" %></li>
            </ul>
          </details>
        </li>
      </ul>
    </div>
    <%= link_to 'Dawarich', root_path, class: 'btn btn-ghost normal-case text-xl'%>
    <div class="badge mx-4 <%= 'badge-outline' if new_version_available? %>">
      <a href="https://github.com/Freika/dawarich/releases/latest" target="_blank" class="inline-flex items-center">
        <% if new_version_available? %>
          <span class="tooltip tooltip-bottom" data-tip="New version available! Check out Github releases!">
            <span class="hidden sm:inline"><%= APP_VERSION %>&nbsp;!</span>
          </span>
        <% else %>
          <span class="hidden sm:inline"><%= APP_VERSION %></span>
        <% end %>
      </a>
    </div>

    <% if user_signed_in? %>
      <% if current_user.theme == 'light' %>
        <%= link_to settings_theme_path(theme: 'dark'), data: { turbo: false }, class: 'btn btn-ghost' do %>
          <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path></svg>
        <% end %>
      <% else %>
        <%= link_to settings_theme_path(theme: 'light'), data: { turbo: false }, class: 'btn btn-ghost' do %>
          <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><path d="M12 1v2M12 21v2M4.2 4.2l1.4 1.4M18.4 18.4l1.4 1.4M1 12h2M21 12h2M4.2 19.8l1.4-1.4M18.4 5.6l1.4-1.4"/></svg>
        <% end %>
      <% end %>
    <% end %>
  </div>
  <div class="navbar-center hidden lg:flex">
    <ul class="menu menu-horizontal px-1">
      <li><%= link_to 'Map', map_url, class: "mx-1 #{active_class?(map_url)}" %></li>
      <li><%= link_to 'Trips<sup>α</sup>'.html_safe, trips_url, class: "mx-1 #{active_class?(trips_url)}" %></li>
      <li><%= link_to 'Stats', stats_url, class: "mx-1 #{active_class?(stats_url)}" %></li>
      <li>
        <details>
          <summary>My data</summary>
          <ul class="p-2 bg-base-100 rounded-box shadow-md z-10">
            <li><%= link_to 'Points', points_url, class: "mx-1 #{active_class?(points_url)}" %></li>
            <li><%= link_to 'Visits & Places<sup>α</sup>'.html_safe, visits_url(status: :confirmed), class: "mx-1 #{active_class?(visits_url)}" %></li>
            <li><%= link_to 'Imports', imports_url, class: "#{active_class?(imports_url)}" %></li>
            <li><%= link_to 'Exports', exports_url, class: "#{active_class?(exports_url)}" %></li>
          </ul>
        </details>
      </li>
    </ul>
  </div>
  <div class="navbar-end">
    <ul class="menu menu-horizontal bg-base-100 rounded-box px-1">
      <% if user_signed_in? %>
        <div class="dropdown dropdown-end dropdown-bottom dropdown-hover"
          data-controller="notifications"
          data-notifications-user-id-value="<%= current_user.id %>">
          <div tabindex="0" role="button" class='btn btn-sm btn-ghost hover:btn-ghost'>
            <svg
              xmlns="http://www.w3.org/2000/svg"
              class="h-5 w-5"
              fill="none"
              viewBox="0 0 24 24"
              stroke="currentColor">
              <path
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="2"
                d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" />
            </svg>
            <% if @unread_notifications.present? %>
              <span class="badge badge-xs badge-primary absolute top-0 right-0" data-notifications-target="badge">
                <%= @unread_notifications.size %>
              </span>
            <% end %>
          </div>
          <ul tabindex="0" class="dropdown-content z-[5000] menu p-2 shadow-lg bg-base-100 rounded-box min-w-52" data-notifications-target="list">
            <li><%= link_to 'See all', notifications_path %></li>
            <div class="divider p-0 m-0"></div>
            <% @unread_notifications.first(10).each do |notification| %>
              <li class='notification-item'>
                <%= link_to notification do %>
                  <%= notification.title %>
                  <div class="badge badge-xs justify-self-end badge-<%= notification.kind %>"></div>
                <% end %>
              </li>
            <% end %>
          </ul>
        </div>
        <li>
          <details>
            <summary>
              <%= "#{current_user.email}" %>
              <% if current_user.admin? %>
                <span class='tooltip tooltip-bottom' data-tip="You're an admin, Harry!">⭐️</span>
              <% end %>
            </summary>
            <ul class="p-2 bg-base-100 rounded-t-none z-10">
              <li><%= link_to 'Account', edit_user_registration_path %></li>
              <li><%= link_to 'Settings', settings_path %></li>
              <li><%= link_to 'Logout', destroy_user_session_path, method: :delete, data: { turbo_method: :delete } %></li>
            </ul>
          </details>
        </li>
      <% else %>
        <li><%= link_to 'Login', new_user_session_path %></li>
      <% end %>
    </ul>
  </div>
</div>