zdravko/web/templates/components/settings.tmpl

{{ define "main" }}
  {{ $title := "" }}
  {{ $path := "" }}
  {{ if ne nil .SettingsSidebarActive }}
    {{ $title = .SettingsSidebarActive.Title }}
    {{ $path = .SettingsSidebarActive.Path }}
  {{ end }}


  <div
    class="md:px-4 lg:px-8 mx-auto mt-8 w-full max-w-screen-xl lg:mt-20 grid grid-cols-1 lg:grid-cols-[min-content_minmax(0,1fr)] gap-8"
  >
    <ul class="sidebar">
      {{ range .SettingsSidebar }}
        <li>
          <a
            {{ $active := eq .Path $path }}
            {{ if $active }}aria-current="true"{{ end }}
            href="{{ .Path }}"
            class="{{ if $active }}active{{ end }}"
            {{ if eq .Title "Temporal" }}
              target="_blank" rel="noreferrer noopener"
            {{ end }}
          >
            {{ .Title }}
            {{ if eq .Title "Targets" }}
              <span class="text-slate-400">(3)</span>
            {{ end }}
            {{ if eq .Title "Monitors" }}
              <span class="text-slate-400">(3)</span>
            {{ end }}
            {{ if eq .Title "Triggers" }}
              <span class="text-slate-400">(3)</span>
            {{ end }}
            {{ if eq .Title "Notifications" }}
              <span class="text-slate-400">(3)</span>
            {{ end }}
            {{ if eq .Title "Worker Groups" }}
              <span class="text-slate-400">(3)</span>
            {{ end }}
          </a>
        </li>
      {{ end }}
    </ul>
    <div class="settings">
      <nav
        aria-label="Breadcrumb"
        class="mx-8 lg:mx-0 grid justify-center lg:justify-start"
      >
        <ol class="inline-flex items-center">
          {{ range .SettingsBreadcrumbs }}
            <li class="inline-flex items-center">
              <a
                href="{{ .Path }}"
                class="inline-flex items-center text-sm font-medium text-gray-700 hover:text-blue-600"
              >
                {{ .Breadcrumb }}
                <svg
                  aria-hidden="true"
                  class="feather h-4 w-4 mx-1 text-gray-400 overflow-visible"
                >
                  <use href="/static/icons/feather-sprite.svg#chevron-right" />
                </svg>
              </a>
            </li>
          {{ end }}
        </ol>
      </nav>
      {{ template "settings" . }}
    </div>
  </div>
{{ end }}