new adminbar using django-cotton

Author: theskumar

hypha/apply/funds/templates/funds/rounds.html

@@ -5,10 +5,10 @@
 {% block title %}{% trans "Rounds" %}{% endblock %}
 
 {% block hero %}
-    {% adminbar %}
-        {% slot header %}{% trans "Rounds" %}{% endslot %}
-        {% slot sub_heading %}{% trans "Explore current and past rounds" %}{% endslot %}
-    {% endadminbar %}
+    <c-adminbar
+        title="{% trans 'Rounds' %}"
+        subtitle="{% trans 'Explore current and past rounds' %}"
+    />
 {% endblock %}
 
 

hypha/static_src/sass/components/_admin-bar.scss

@@ -6,23 +6,6 @@
     &__inner {
       max-width: variables.$site-width;
       margin: 0 auto;
-
-      &--with-button {
-        @include mixins.media-query(md) {
-          display: flex;
-          align-items: center;
-          flex-direction: row;
-          justify-content: space-between;
-        }
-      }
-    }
-
-    &__meta {
-      margin: 0 0 10px;
-
-      span {
-        margin: 0 5px;
-      }
     }
 
     &__back-link {

hypha/templates/cotton/adminbar/index.html

@@ -0,0 +1,34 @@
+{% load i18n %}
+
+<c-vars padding="py-4" />
+{% translate "Go back" as back_default_text %}
+
+<div
+    class="bg-neutral text-neutral-content {{ padding }}"
+    x-data="{ showBackButton: {{ back_link|yesno:'true,false' }} || (window.history && window.history.length > 1) }"
+    data-test-id="admin-bar"
+>
+    <div class="items-center md:flex md:justify-between container-constrained">
+        <div>
+            <a
+                x-show="showBackButton"
+                class="inline-flex items-center font-semibold transition-all hover:-translate-x-0.5 text-fg-muted hover:text-neutral-content"
+                href="{{ back_link|default:'#' }}"
+                {% if not back_link %}@click.prevent="window.history.back()"{% endif %}
+            >
+                ← {{ back_link_text|default:back_default_text }}
+            </a>
+            <h1 class="mb-2 text-2xl font-medium md:m-0 md:text-3xl">{{ title }}</h1>
+            {% if subtitle %}<p class="max-w-3xl text-sm truncate">{{ subtitle }}</p>
+            {% endif %}
+        </div>
+
+        {% if buttons %}
+            <div class="self-end -mb-4">
+                {{ buttons }}
+            </div>
+        {% endif %}
+
+        {{ slot }}
+    </div>
+</div>