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 gap-2 flex flex-row flex-wrap justify-center lg:flex-col lg:w-48 h-fit text-sm font-medium text-gray-900"
    >
      {{ range .SettingsSidebar }}
        <li
          class="flex items-center gap-2 p-2 lg:flex-col lg:items-start rounded-lg has-[.active]:shadow-md has-[.active]:bg-white"
        >
          <p
            class="text-xs font-semibold text-gray-600 uppercase tracking-wider"
          >
            {{ .Group }}
          </p>
          <ul class="flex flex-row flex-wrap gap-1 lg:flex-col w-full">
            {{ range .Pages }}
              <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 "Incidents" }}
                    <span class="text-slate-400">(3)</span>
                  {{ end }}
                  {{ if eq .Title "Targets" }}
                    <span class="text-slate-400">(3)</span>
                  {{ end }}
                  {{ if eq .Title "Checks" }}
                    <span class="text-slate-400">(3)</span>
                  {{ end }}
                  {{ if eq .Title "Hooks" }}
                    <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>
        </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">
          <li class="inline-flex items-center">
            <p
              class="inline-flex items-center text-sm font-medium text-gray-700"
            >
              {{ .SettingsGroupName }}
              <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>
            </p>
          </li>
          {{ 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 }}