music_library/lib/music_library_web/components/layouts/app.html.heex

<div
  :if={assigns[:static_changed]}
  class="bg-yellow-100 dark:bg-yellow-900 border-b border-yellow-300 dark:border-yellow-700 px-4 py-2 text-center text-sm text-yellow-700 dark:text-yellow-200"
>
  {gettext("The application has been updated.")}
  <a href="" onclick="window.location.reload()" class="underline font-medium">
    {gettext("Reload")}
  </a>
</div>
<nav class="border-b border-slate-900/10 dark:border-slate-300/10" aria-label="Sections">
  <div class="mx-auto max-w-screen-2xl px-4 sm:px-6 lg:px-8 2xl:px-0">
    <div class="flex h-16 justify-between">
      <div class="flex">
        <div class="flex space-x-2 md:space-x-4">
          <.nav_link route={~p"/"} section={:stats} current_section={@current_section}>
            <.icon
              name="hero-chart-pie"
              class="max-sm:hidden h-4 w-4 mr-2"
              aria-hidden="true"
              data-slot="icon"
            />
            {gettext("Stats")}
          </.nav_link>
          <.nav_link
            route={~p"/collection"}
            section={:collection}
            current_section={@current_section}
          >
            <.icon
              name="hero-circle-stack"
              class="max-sm:hidden h-4 w-4 mr-2"
              aria-hidden="true"
              data-slot="icon"
            />
            {gettext("Collection")}
          </.nav_link>
          <.nav_link route={~p"/wishlist"} section={:wishlist} current_section={@current_section}>
            <.icon
              name="hero-star"
              class="max-sm:hidden h-4 w-4 mr-2"
              aria-hidden="true"
              data-slot="icon"
            />
            {gettext("Wishlist")}
          </.nav_link>
          <.nav_link
            route={~p"/record-sets"}
            section={:record_sets}
            current_section={@current_section}
          >
            <.icon
              name="hero-rectangle-stack"
              class="max-sm:hidden h-4 w-4 mr-2"
              aria-hidden="true"
              data-slot="icon"
            />
            {gettext("Sets")}
          </.nav_link>
        </div>
      </div>
      <div class="flex items-center">
        <.button_group>
          <.universal_search_trigger />
          <.dropdown placement="bottom-end" class="pl-0">
            <:toggle>
              <.button variant="soft">
                <span class="sr-only">{gettext("Actions")}</span>
                <.icon
                  name="hero-ellipsis-vertical"
                  class="h-5 w-5 text-zinc-500 dark:text-zinc-400 cursor-pointer"
                  aria-hidden="true"
                  data-slot="icon"
                />
              </.button>
            </:toggle>
            <.dropdown_link
              href={~p"/scrobble"}
              class={[
                "rounded-none border-l-2",
                if(@current_section == :scrobble,
                  do: "border-l-red-500",
                  else: "border-l-transparent"
                )
              ]}
            >
              <.icon
                name="hero-play"
                class="h-4 w-4 mr-2"
                aria-hidden="true"
                data-slot="icon"
              />
              {gettext("Scrobble Anything")}
            </.dropdown_link>
            <.dropdown_link
              href={~p"/scrobbled-tracks"}
              class={[
                "rounded-none border-l-2",
                if(@current_section == :scrobble_activity,
                  do: "border-l-red-500",
                  else: "border-l-transparent"
                )
              ]}
            >
              <.icon
                name="hero-musical-note"
                class="h-4 w-4 mr-2"
                aria-hidden="true"
                data-slot="icon"
              />
              {gettext("Scrobbled Tracks")}
            </.dropdown_link>
            <.dropdown_link
              href={~p"/scrobble-rules"}
              class={[
                "rounded-none border-l-2",
                if(@current_section == :scrobble_rules,
                  do: "border-l-red-500",
                  else: "border-l-transparent"
                )
              ]}
            >
              <.icon
                name="hero-adjustments-horizontal"
                class="h-4 w-4 mr-2"
                aria-hidden="true"
                data-slot="icon"
              />
              {gettext("Scrobble Rules")}
            </.dropdown_link>
            <.dropdown_link
              href={~p"/online-store-templates"}
              class={[
                "rounded-none border-l-2",
                if(@current_section == :online_store_templates,
                  do: "border-l-red-500",
                  else: "border-l-transparent"
                )
              ]}
            >
              <.icon
                name="hero-building-storefront"
                class="h-4 w-4 mr-2"
                aria-hidden="true"
                data-slot="icon"
              />
              {gettext("Online Store Templates")}
            </.dropdown_link>
            <.dropdown_separator />
            <.dropdown_link href={~p"/dev/dashboard"}>
              <.icon
                name="hero-chart-bar"
                class="h-4 w-4 mr-2"
                aria-hidden="true"
                data-slot="icon"
              />
              {gettext("Live Dashboard")}
            </.dropdown_link>
            <.dropdown_link href={~p"/dev/oban"}>
              <.icon name="hero-cog" class="h-4 w-4 mr-2" aria-hidden="true" data-slot="icon" />
              {gettext("Oban")}
            </.dropdown_link>
            <.dropdown_link href={~p"/dev/errors"}>
              <.icon name="hero-bug-ant" class="h-4 w-4 mr-2" aria-hidden="true" data-slot="icon" />
              {gettext("Errors")}
            </.dropdown_link>
            <.dropdown_link href={~p"/dev/maintenance"}>
              <.icon
                name="hero-wrench-screwdriver"
                class="h-4 w-4 mr-2"
                aria-hidden="true"
                data-slot="icon"
              />
              {gettext("Maintenance")}
            </.dropdown_link>
            <.dropdown_separator />
            <.dropdown_link href={~p"/login"}>
              <.icon
                name="hero-arrow-left-start-on-rectangle"
                class="h-4 w-4 mr-2"
                aria-hidden="true"
                data-slot="icon"
              />
              {gettext("Logout")}
            </.dropdown_link>
          </.dropdown>
        </.button_group>
      </div>
    </div>
  </div>
</nav>
<main class="px-4 py-4 sm:px-6 lg:px-8">
  <div class="mx-auto max-w-screen-2xl">
    <LiveToast.toast_group
      flash={@flash}
      kinds={[:error, :warning, :info]}
      corner={:top_right}
      connected={assigns[:socket] != nil}
      toasts_sync={assigns[:toasts_sync]}
      toast_class_fn={&toast_class_fn/1}
    />
    {render_slot(@inner_block)}
  </div>
</main>

<.live_component module={MusicLibraryWeb.UniversalSearchLive.Index} id="universal-search" />