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

<div class="navbar bg-base-100 h-16">
  <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', preferred_map_path, class: "#{active_class?(preferred_map_path)}" %></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>
        <% if user_signed_in? && DawarichSettings.family_feature_enabled? %>
          <li>
            <% if current_user.in_family? %>
              <div data-controller="family-navbar-indicator"
                   data-family-navbar-indicator-enabled-value="<%= current_user.family_sharing_enabled? %>">
                <%= link_to family_path, class: "#{active_class?(family_path)} flex items-center space-x-2" do %>
                  <span>Family</span>
                  <div data-family-navbar-indicator-target="indicator"
                       class="w-2 h-2 <%= current_user.family_sharing_enabled? ? 'bg-green-500 animate-pulse' : 'bg-gray-400' %> rounded-full"
                       title="<%= current_user.family_sharing_enabled? ? 'Location sharing enabled' : 'Location sharing disabled' %>"></div>
                <% end %>
              </div>
            <% else %>
              <%= link_to 'Family<sup>α</sup>'.html_safe, new_family_path, class: "#{active_class?(new_family_path)}" %>
            <% end %>
          </li>
        <% end %>
        <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&nbsp;&amp;&nbsp;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>
              <li><%= link_to 'Tags', tags_url, class: "#{active_class?(tags_url)}" %></li>
            </ul>
          </details>
        </li>
        <% if user_signed_in? && current_user.can_subscribe? %>
          <li>
            <%= link_to 'Subscribe', "#{MANAGER_URL}/auth/dawarich?token=#{current_user.generate_subscription_token}", class: 'btn btn-sm btn-success' %>
          </li>
        <% end %>
      </ul>
    </div>
    <%= link_to 'Dawarich<sup>α</sup>'.html_safe, (user_signed_in? ? preferred_map_path : 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', preferred_map_path, class: "mx-1 #{active_class?(preferred_map_path)}" %></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>
      <% if user_signed_in? && DawarichSettings.family_feature_enabled? %>
        <li>
          <% if current_user.in_family? %>
            <div data-controller="family-navbar-indicator"
                 data-family-navbar-indicator-enabled-value="<%= current_user.family_sharing_enabled? %>"
                 class="<%= active_class?(family_path) %>">
              <%= link_to family_path, class: "mx-1 flex items-center space-x-2" do %>
                <span>Family<sup>α</sup></span>
                <div data-family-navbar-indicator-target="indicator"
                     class="w-2 h-2 <%= current_user.family_sharing_enabled? ? 'bg-green-500 animate-pulse' : 'bg-gray-400' %> rounded-full"
                     title="<%= current_user.family_sharing_enabled? ? 'Location sharing enabled' : 'Location sharing disabled' %>"></div>
              <% end %>
            </div>
          <% else %>
            <%= link_to 'Family<sup>α</sup>'.html_safe, new_family_path, class: "mx-1 #{active_class?(new_family_path)}" %>
          <% end %>
        </li>
      <% end %>
      <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&nbsp;&amp;&nbsp;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>
            <li><%= link_to 'Tags', tags_url, class: "#{active_class?(tags_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? %>
        <% if current_user.can_subscribe? %>
          <div class="join">
            <%= link_to "#{MANAGER_URL}/auth/dawarich?token=#{current_user.generate_subscription_token}" do %>
              <span class="join-item btn btn-sm <%= trial_button_class(current_user) %>">
                <% expiry = current_user.active_until %>
                <% if expiry.blank? || expiry.past? %>
                  <span class="tooltip tooltip-bottom" data-tip="Trial expired" title="Trial expired">Trial expired 🥺</span>
                <% else %>
                  <% days_left = [(expiry.to_date - Time.zone.today).to_i, 0].max %>
                  <span class="tooltip tooltip-bottom"
                        data-tip="Your trial will end in <%= distance_of_time_in_words(expiry, Time.current) %>"
                        title="Your trial will end in <%= distance_of_time_in_words(expiry, Time.current) %>">
                    <%= pluralize(days_left, 'day') %> remaining
                  </span>
                <% end %>
              </span><span class="join-item btn btn-sm btn-success">
                Subscribe
              </span>
            <% end %>
          </div>
        <% end %>

        <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 p-2'>
            <%= icon 'bell' %>
            <% 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>
            <% @unread_notifications.first(10).each do |notification| %>
              <div class="divider p-0 m-0"></div>
              <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>
              <span class="inline"><%= icon 'user' %></span>
              <% if onboarding_modal_showable?(current_user) %>
                <span class="indicator-item badge badge-secondary badge-xs"></span>
              <% end %>
              <% if current_user.admin? %>
                <span class='tooltip tooltip-bottom' data-tip="You're an admin, Harry!">
                  <%= icon 'star' %>
                </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>
              <% if !DawarichSettings.self_hosted? %>
                <li><%= link_to 'Subscription', "#{MANAGER_URL}/auth/dawarich?token=#{current_user.generate_subscription_token}" %></li>
              <% end %>
              <li>
                <a onclick="getting_started.showModal()" class="relative">
                  Get started
                  <% if onboarding_modal_showable?(current_user) %>
                    <span class="indicator-item badge badge-secondary badge-xs"></span>
                  <% end %>
                </a>
              </li>

              <li><%= link_to 'Logout', destroy_user_session_path, method: :delete, data: { turbo: false } %></li>
            </ul>
          </details>
        </li>
      <% else %>
        <li><%= link_to 'Login', new_user_session_path %></li>
        <% if !SELF_HOSTED && defined?(devise_mapping) && devise_mapping&.registerable? %>
          <li><%= link_to 'Register', new_user_registration_path %></li>
        <% end %>
      <% end %>
    </ul>
  </div>
</div>