ui: Show breadcrumbs on deeper pages

- Don't show them on section pages: home, apps, system and help pages.

- Tweak the appearance so that home icon is bigger, spacing between crumbs is
larger and to use '>' as separator.

- Change the name of the help menu item to show the value in breadcrumbs.

- Change the URLs for anchors in the help page so that they don't appear as part
of the breadcrumbs.

Tests:

- Section pages: home, apps, system and help pages don't have breadcrumbs.

- Visit various pages. Breadcrumbs are shown and all the links in the
breadcrumbs work as expected.

- Mobile view looks good.

Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org>
Reviewed-by: Veiko Aasa <veiko17@disroot.org>

plinth/modules/help/__init__.py

@@ -30,7 +30,7 @@ class HelpApp(app_module.App):
                                is_essential=True)
         self.add(info)
 
-        menu_item = menu.Menu('menu-help', _('Documentation'), None, 'fa-book',
+        menu_item = menu.Menu('menu-help', _('Help'), None, 'fa-book',
                               'help:index', parent_url_name='index')
         self.add(menu_item)
         menu_item = menu.Menu('menu-help-manual',

plinth/templates/base.html

@@ -252,6 +252,8 @@
         {% block content_row %}
             {% include 'messages.html' %}
 
+            {% include 'breadcrumbs.html' %}
+
             {% block content %}
               {# main content goes here #}
             {% endblock %}

plinth/templates/breadcrumbs.html

@@ -0,0 +1,25 @@
+{% comment %}
+# SPDX-License-Identifier: AGPL-3.0-or-later
+{% endcomment %}
+
+<nav aria-label="breadcrumb">
+  <ol class="breadcrumb">
+    {% for url, breadcrumb in breadcrumbs.items reversed %}
+      {% if breadcrumb.is_active %}
+        <li class="breadcrumb-item active" aria-current="page">
+          {{ breadcrumb.name }}
+        </li>
+      {% else %}
+        <li class="breadcrumb-item">
+          <a href="{{ url }}">
+            {% if breadcrumb.url_name == 'index' %}
+              <span class="fa fa-home"></span>
+            {% else %}
+              {{ breadcrumb.name }}
+            {% endif %}
+          </a>
+        </li>
+      {% endif %}
+    {% endfor %}
+  </ol>
+</nav>

plinth/urls.py

@@ -9,12 +9,11 @@ from stronghold.decorators import public
 from . import views
 
 system_urlpatterns = [
-    re_path(r'^sys/#visibility$', views.system_index, name='visibility'),
+    re_path(r'^sys/$', views.system_index, name='visibility'),
-    re_path(r'^sys/#data$', views.system_index, name='data'),
+    re_path(r'^sys/$', views.system_index, name='data'),
-    re_path(r'^sys/#system$', views.system_index, name='system'),
+    re_path(r'^sys/$', views.system_index, name='system'),
-    re_path(r'^sys/#security$', views.system_index, name='security'),
+    re_path(r'^sys/$', views.system_index, name='security'),
-    re_path(r'^sys/#administration$', views.system_index,
+    re_path(r'^sys/$', views.system_index, name='administration'),
-            name='administration'),
 ]
 
 urlpatterns = [

static/themes/default/css/main.css

@@ -554,6 +554,19 @@ footer {
     border-bottom: var(--freedombox-navbar-color) 3px solid;
 }
 
+/* Breadcrumbs */
+.breadcrumb-item {
+    --bs-breadcrumb-divider: ">";
+}
+
+.breadcrumb-item .fa-home {
+    font-size: 1.5rem;
+}
+
+.breadcrumb-item + .breadcrumb-item::before {
+    margin: 0 0.5rem;
+}
+
 /* Cards in Index, Apps, System and Help pages */
 .card-list {
     display: flex;