chore(demo): add example for nav:back

demo/backend/advanced/community/elements/nav-back/_styles.xml.njk

@@ -0,0 +1,5 @@
+<style
+  id="text"
+  marginHorizontal="24"
+  marginBottom="16"
+/>

demo/backend/advanced/community/elements/nav-back/index.xml.njk

@@ -0,0 +1,26 @@
+---
+permalink: "/backend/advanced/community/nav-back/index.xml"
+tags: "Advanced/Community/Elements"
+hv_button_behavior: "back"
+hv_title: "Nav Back"
+---
+
+{% from 'macros/button/index.xml.njk' import button %}
+{% from 'macros/description/index.xml.njk' import description %}
+{% extends 'templates/scrollview.xml.njk' %}
+
+{% block content %}
+  {{ description('Tapping one of the button will render the same screen with a different navigation style. The control to navigate back will be dynamic, based on the navigation context.') }}
+  {% call button('Push') -%}
+    <behavior
+      action="push"
+      href="/hyperview/public/advanced/community/elements/nav-back/screen.xml"
+    />
+  {%- endcall %}
+  {% call button('New') -%}
+    <behavior
+      action="new"
+      href="/hyperview/public/advanced/community/elements/nav-back/screen.xml"
+    />
+  {%- endcall %}
+{% endblock %}

demo/backend/advanced/community/elements/nav-back/screen.xml.njk

@@ -0,0 +1,44 @@
+---
+permalink: "/backend/advanced/community/nav-back/screen.xml"
+hv_title: "Nav Back"
+---
+
+{% from 'macros/button/index.xml.njk' import button %}
+{% from 'macros/description/index.xml.njk' import description %}
+{% extends 'templates/base.xml.njk' %}
+
+{% block styles %}
+  {% include './_styles.xml.njk' %}
+{% endblock %}
+
+{% block body %}
+  <header style="header">
+    <nav:back xmlns:nav="https://hyperview.org/navigation">
+      <view
+        nav:role="close"
+        action="close"
+        href="#"
+        style="header-btn"
+      >
+        {% include 'icons/close.svg' %}
+      </view>
+      <view
+        nav:role="back"
+        action="back"
+        href="#"
+        style="header-btn"
+      >
+        {% include 'icons/back.svg' %}
+      </view>
+    </nav:back>
+    <text style="header-title">{{ hv_title }}</text>
+  </header>
+  <text style="text">
+    The button to navigate back to the previous screen will be rendered dynamically,
+    based on which kind of navigator the screen is currently loaded on. For regular screens
+    (added to the stack via "push" action), a back-arrow button will be rendered. For
+    modal screens (added to the stack via "new" action), a cross button will be rendered.
+    Also (not demo'd here), if the screen is the first screen of the stack and there is no
+    place to navigate back to, no button will be rendered.
+  </text>
+{% endblock %}