lib/plausible_web/templates/layout/_header.html.heex

<nav class="relative z-20 py-5">
  <div class="container print:max-w-full">
    <nav class="relative flex items-center justify-between sm:h-10 md:justify-center">
      <div class="flex items-center flex-1 md:absolute md:inset-y-0 md:left-0">
        <a href={home_dest(@conn)}>
          <Layout.logo />
        </a>
      </div>
      <div class="absolute inset-y-0 right-0 flex items-center justify-end">
        <%= cond do %>
          <% @conn.assigns[:current_user] -> %>
            <ul class="flex items-center gap-2 w-full sm:w-auto">
              <li :if={
                ee?() && @conn.assigns[:site] &&
                  Plausible.Auth.super_admin?(@conn.assigns[:current_user])
              }>
                <.styled_link
                  class="text-sm font-medium"
                  href={"/cs/sites/site/#{@conn.assigns.site.id}"}
                  new_tab={true}
                >
                  CS
                </.styled_link>
              </li>
              <li
                :if={
                  ee?() and Plausible.Teams.on_trial?(@conn.assigns[:current_team]) and
                    (not Plausible.Teams.setup?(@conn.assigns[:current_team]) or
                       @conn.assigns[:current_team_role] in Plausible.Billing.allowed_roles())
                }
                class="hidden sm:block"
              >
                <div class="flex items-center p-1 rounded-lg bg-yellow-100 dark:bg-yellow-600/35 overflow-hidden">
                  <span class="px-3 text-sm font-medium text-gray-900 dark:text-gray-100">
                    {trial_notification(@conn.assigns[:current_team])}
                  </span>
                  <.button_link
                    href={Routes.settings_path(@conn, :subscription)}
                    theme="yellow"
                    mt?={false}
                    class="!px-3 !py-2"
                  >
                    Upgrade
                  </.button_link>
                </div>
              </li>
              <li class="w-full sm:w-auto">
                <.dropdown>
                  <:button class="flex items-center gap-2 pl-3 pr-1.5 py-2 rounded-md transition-colors duration-150 hover:bg-gray-100 dark:hover:bg-gray-800">
                    <span class="hidden md:block text-sm font-medium truncate dark:text-gray-100">
                      {@conn.assigns[:current_user].name}
                    </span>
                    <img
                      src={Plausible.Auth.User.profile_img_url(@conn.assigns[:current_user])}
                      class="-my-0.5 w-7 rounded-full"
                    />
                  </:button>
                  <:menu class="max-w-xs">
                    <.dropdown_item>
                      <div class="text-xs text-gray-500 dark:text-gray-400">Signed in as</div>
                      <p class="truncate font-medium text-gray-900 dark:text-gray-100" role="none">
                        {@conn.assigns[:current_user].email}
                      </p>
                    </.dropdown_item>
                    <.team_switcher
                      conn={@conn}
                      teams={@teams}
                      my_team={@my_team}
                      current_team={@current_team}
                    />
                    <.dropdown_divider />
                    <.dropdown_item href={Routes.settings_path(@conn, :index)}>
                      Account settings
                    </.dropdown_item>

                    <div :if={@my_team && @my_team.id == @current_team.id}>
                      <.dropdown_item class="flex" href={Routes.team_setup_path(@conn, :setup)}>
                        <span data-test="create-a-team-cta" class="flex-1">
                          Create a team
                        </span>
                      </.dropdown_item>
                      <.dropdown_divider />
                    </div>

                    <div :if={Plausible.Teams.setup?(@current_team)}>
                      <.dropdown_item
                        class="flex"
                        href={Routes.settings_path(@conn, :team_general)}
                      >
                        <span class="flex-1">
                          Team settings
                        </span>
                      </.dropdown_item>
                      <.dropdown_divider />
                    </div>
                    <.dropdown_item
                      class="!flex justify-between gap-x-12"
                      new_tab
                      href="https://plausible.io/docs"
                    >
                      Help center
                    </.dropdown_item>
                    <.dropdown_item
                      :if={ee?()}
                      class="!flex justify-between gap-x-12"
                      new_tab
                      href="https://plausible.io/contact"
                    >
                      Contact support
                    </.dropdown_item>
                    <.dropdown_item
                      :if={ee?()}
                      class="!flex justify-between gap-x-12"
                      new_tab
                      href={feedback_link(@conn.assigns[:current_user])}
                    >
                      Feature requests
                    </.dropdown_item>
                    <.dropdown_item
                      :if={ce?()}
                      class="!flex justify-between gap-x-12"
                      new_tab
                      href="https://github.com/plausible/analytics"
                    >
                      Github repo
                    </.dropdown_item>
                    <.dropdown_item href="/logout">Log out</.dropdown_item>
                  </:menu>
                </.dropdown>
              </li>
              <%= if @conn.assigns[:current_user] && ee?() do %>
                <li id="changelog-notification" class="relative py-2"></li>
              <% end %>
            </ul>
          <% Keyword.fetch!(Application.get_env(:plausible, :selfhost), :disable_registration) != false -> %>
            <ul class="flex" x-show="!document.cookie.includes('logged_in=true')">
              <li>
                <div class="inline-flex">
                  <a
                    href="/login"
                    class="font-medium text-gray-500 dark:text-gray-200 hover:text-gray-900 dark:hover:text-gray-100 focus:outline-hidden focus:text-gray-900 transition duration-150 ease-in-out"
                  >
                    Login
                  </a>
                </div>
              </li>
            </ul>
          <% true -> %>
            <ul class="flex" x-show="!document.cookie.includes('logged_in=true')">
              <li>
                <div class="inline-flex">
                  <a
                    href="/login"
                    class="font-medium text-gray-500 dark:text-gray-200 hover:text-gray-900 dark:hover:text-gray-100 focus:outline-hidden focus:text-gray-900 transition duration-150 ease-in-out"
                  >
                    Login
                  </a>
                </div>
                <div class="inline-flex ml-6 rounded-sm shadow-sm">
                  <a
                    href="/register"
                    class="inline-flex items-center justify-center px-5 py-2 text-base font-medium text-white bg-indigo-600 border border-transparent leading-6 rounded-md hover:bg-indigo-500 focus:outline-hidden focus:ring transition duration-150 ease-in-out"
                  >
                    Sign up
                  </a>
                </div>
              </li>
            </ul>
        <% end %>
      </div>
    </nav>
  </div>
</nav>