add side-nav for filters

examples/azure_auth/main.rs

@@ -110,7 +110,8 @@ fn create_actix_admin_builder() -> ActixAdminBuilder {
         }),
         login_link: Some("/azure-auth/login".to_string()),
         logout_link: Some("/azure-auth/logout".to_string()),
-        file_upload_directory: "./file_uploads"
+        file_upload_directory: "./file_uploads",
+        navbar_title: "ActixAdmin Example"
     };
 
     let mut admin_builder = ActixAdminBuilder::new(configuration);

examples/basic/main.rs

@@ -28,7 +28,8 @@ fn create_actix_admin_builder() -> ActixAdminBuilder {
         user_is_logged_in: None,
         login_link: None,
         logout_link: None,
-        file_upload_directory: "./file_uploads"
+        file_upload_directory: "./file_uploads",
+        navbar_title: "ActixAdmin Example"
     };
 
     let mut admin_builder = ActixAdminBuilder::new(configuration);

src/lib.rs

@@ -74,6 +74,7 @@ pub struct ActixAdminConfiguration {
     pub login_link: Option<String>,
     pub logout_link: Option<String>,
     pub file_upload_directory: &'static str,
+    pub navbar_title: &'static str
 }
 
 #[derive(Clone)]

src/routes/helpers.rs

@@ -8,6 +8,7 @@ use actix_web::{error, Error, HttpResponse};
 pub fn add_auth_context(session: &Session, actix_admin: &ActixAdmin, ctx: &mut Context) {
     let enable_auth = &actix_admin.configuration.enable_auth;
     ctx.insert("enable_auth", &enable_auth);
+    ctx.insert("navbar_title", &actix_admin.configuration.navbar_title);
     if *enable_auth {
         let func = &actix_admin.configuration.user_is_logged_in.unwrap();
         ctx.insert("user_is_logged_in", &func(session));

src/templates/base.html

@@ -24,11 +24,19 @@
             {% endfor %}
             {% endif %}
         </div>
+
         <div id="content">
+            <div class="columns">
+                <aside id="nav_aside" class="column is-2 is-hidden is-narrow-mobile is-fullheight is-hidden-mobile">
+                    {% block aside %}
+                    {% endblock aside %}
+                </aside>
+
                 {% block content %}
                 {% endblock content %}
             </div>
         </div>
+    </div>
 </body>
 
 </html>

src/templates/head.html

@@ -1,6 +1,6 @@
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
-<title>Actix Admin</title>
+<title>{{ navbar_title }}</title>
 
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css">
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
@@ -51,6 +51,15 @@
         document.getElementById('table_form').requestSubmit();
     }
 
+    function toggle_aside() {
+        el = document.getElementById("nav_aside");
+        if(el.classList.contains("is-hidden")) {
+            el.classList.remove("is-hidden");
+        } else {
+            el.classList.add("is-hidden");
+        }
+    }
+
     document.addEventListener('DOMContentLoaded', () => {
         // Get all "navbar-burger" elements
         const $navbarBurgers = Array.prototype.slice.call(document.querySelectorAll('.navbar-burger'), 0);

src/templates/list.html

@@ -1,14 +1,22 @@
 {% extends "base.html" %}
 
+{% block aside %}
+    <p class="menu-label is-hidden-touch">Filter</p>
+    <ul class="menu-list">
+    </ul>
+{% endblock aside %}
+
 {% block content %}
 
 {% if not render_partial or render_partial == false %}
+    <div class="column">
         <div class="columns">
             <div class="column">
                 <div class="buttons">
-            <a class="button is-primary" href="/admin/{{ entity_name }}/create" hx-boost="true" hx-indicator="#loading"><i class="fa-solid fa-circle-plus"></i></a>
+                    <a class="button is-primary" href="/admin/{{ entity_name }}/create" hx-boost="true"
+                        hx-indicator="#loading"><i class="fa-solid fa-circle-plus"></i></a>
 
-            <div class="dropdown is-hoverable">
+                    <div class="dropdown mr-2 is-hoverable">
                         <div class="dropdown-trigger">
                             <button class="button" aria-haspopup="true" aria-controls="dropdown-menu4">
                                 <span><i class="fa-solid fa-list"></i></span>
@@ -26,6 +34,8 @@
                             </div>
                         </div>
                     </div>
+
+                    <button class="button" onclick="toggle_aside()"><i class="fa-solid fa-filter"></i></button>
                 </div>
             </div>
             <form id="search_form" action="/admin/{{ entity_name }}/list" hx-boost="true" hx-indicator="#loading"
@@ -49,7 +59,8 @@
                                 <select id="entities_per_page" class="select" name="entities_per_page"
                                     onchange="this.dispatchEvent(new Event('reload_table'));">
                                     {% for a in [10,20,50,100,] %}
-                            <option {% if entities_per_page==a %}selected{% endif %} value="{{ a }}">{{ a }}</option>
+                                    <option {% if entities_per_page==a %}selected{% endif %} value="{{ a }}">{{ a }}
+                                    </option>
                                     {% endfor %}
                                 </select>
                                 <p class="help">Entities per Page</p>
@@ -87,7 +98,8 @@
                                     {% endif %}
                                     {% endif %}
                                 </th>
-                        {% for model_field in view_model.fields | filter(attribute="list_hide_column", value=false) |
+                                {% for model_field in view_model.fields | filter(attribute="list_hide_column",
+                                value=false) |
                                 sort(attribute="list_sort_position") -%}
                                 <th onclick="sort_by('{{ model_field.field_name }}');" class="is-clickable">{{
                                     model_field.field_name | split(pat="_") | join(sep=" ") | title }}
@@ -144,7 +156,8 @@
                             }'>
                                 <i class="fa-solid fa-pen-to-square"></i>
                             </a>
-                    <a hx-target="closest tr" hx-confirm="Are you sure?" hx-delete="delete/{{ entity.primary_key }}">
+                            <a hx-target="closest tr" hx-confirm="Are you sure?"
+                                hx-delete="delete/{{ entity.primary_key }}">
                                 <i class="fa-solid fa-trash"></i>
                             </a>
                         </td>
@@ -168,26 +181,26 @@
             "render_partial" : "true"
         }' hx-indicator="#loading" class="pagination is-rounded is-centered" role="pagination" aria-label="pagination">
                 {% if page > 1 %}
-        <a href="/admin/{{ entity_name }}/list?&page={{ page - 1 }}" class="pagination-previous left-arrow-click"><i
+                <a href="/admin/{{ entity_name }}/list?&page={{ page - 1 }}"
-                class="fa-solid fa-arrow-left"></i>
+                    class="pagination-previous left-arrow-click"><i class="fa-solid fa-arrow-left"></i>
                 </a>
                 {% endif %}
-        {% if page < num_pages %} 
+                {% if page < num_pages %} <a href="/admin/{{ entity_name }}/list?page={{ page + 1 }}"
-            <a href="/admin/{{ entity_name }}/list?page={{ page + 1 }}" class="pagination-next right-arrow-click"><i
+                    class="pagination-next right-arrow-click"><i class="fa-solid fa-arrow-right"></i>
-                class="fa-solid fa-arrow-right"></i>
                     </a>
                     {% endif %}
                     <ul class="pagination-list">
                         <li>
-                <a class="pagination-link {% if page == 1 %}is-current{% endif %}" href="/admin/{{ entity_name }}/list?page={{ 1 }}"
+                            <a class="pagination-link {% if page == 1 %}is-current{% endif %}"
-                    aria-label="Goto page 1">1</a>
+                                href="/admin/{{ entity_name }}/list?page={{ 1 }}" aria-label="Goto page 1">1</a>
                         </li>
                         <li>
                             <span class="pagination-ellipsis">&hellip;</span>
                         </li>
                         {% for i in range(start=min_show_page,end=max_show_page) %}
                         <li><a class="pagination-link {% if page == i+1 %}is-current{% endif %}"
-                    aria-label="Goto page {{ i + 1 }}" href="/admin/{{ entity_name }}/list?page={{ i + 1 }}">{{
+                                aria-label="Goto page {{ i + 1 }}"
+                                href="/admin/{{ entity_name }}/list?page={{ i + 1 }}">{{
                                 i + 1 }}</a></li>
                         {%- endfor %}
                         <li>
@@ -199,6 +212,7 @@
                                 aria-label="Goto page {{ num_pages }}">{{ num_pages }} </a>
                         </li>
                     </ul>
+        </div>
     </nav>
 </div>
 

src/templates/navbar.html

@@ -1,7 +1,7 @@
-<nav class="navbar is-dark mb-4" role="navigation" aria-label="main navigation">
+<nav class="navbar has-shadow mb-4" role="navigation" aria-label="main navigation">
   <div class="navbar-brand">
     <a class="navbar-item" href="/admin/">
-      Actix Admin
+      {{ navbar_title }}
     </a>
 
     <a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false" data-target="navbar">