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

<% options = account_settings_sidebar(assigns) %>
<div class="container pt-6">
  <.styled_link class="font-semibold text-sm" href="/sites">
    ← Back to sites
  </.styled_link>
  <div class="pb-5 border-b border-gray-200 dark:border-gray-750">
    <h2 class="text-2xl font-bold leading-7 text-gray-900 dark:text-gray-100 sm:text-3xl sm:leading-9 sm:truncate">
      Settings
    </h2>
  </div>
  <div class="lg:grid lg:grid-cols-12 lg:gap-x-5 lg:mt-4">
    <div class="lg:col-span-3">
      <.mobile_nav_dropdown
        name="settings"
        options={options}
        selected_fn={&current_tab?(@current_path, &1)}
        href_base="/settings/"
      />

      <div class="hidden lg:flex flex-col gap-8 py-4 top-0 sticky">
        <div class="flex flex-col gap-4">
          <div>
            <h3 class="text-gray-900 dark:text-gray-100 font-bold">Account</h3>
            <p class="text-sm text-gray-500 dark:text-gray-400 truncate">
              {@current_user.email}
            </p>
          </div>
          <Layout.settings_sidebar
            selected_fn={&current_tab?(@current_path, &1)}
            options={options["Account"]}
          />
        </div>

        <div :if={Plausible.Teams.setup?(@current_team)} class="flex flex-col gap-4">
          <div>
            <h3 class="text-gray-900 dark:text-gray-100 font-bold">Team</h3>
            <p class="text-sm text-gray-500 dark:text-gray-400 truncate">
              {Plausible.Teams.name(@current_team)}
            </p>
          </div>
          <Layout.settings_sidebar
            selected_fn={&current_tab?(@current_path, &1)}
            options={options["Team"]}
          />
        </div>
      </div>
    </div>

    <div class="space-y-6 lg:col-span-9 lg:mt-4">
      {@inner_content}
    </div>
  </div>
</div>