customize top navigation links and to create submenus in shell

Author: lovasoa

CHANGELOG.md

@@ -5,6 +5,7 @@
  - Fix a bug where the new geojson support in the map component would not work when the geojson was passed as a string. This impacted databases that do not support native json objects, such as SQLite.
  - Improve support for geojson points (in addition to polygons and lines) in the map component.
  - Add a new `size` parameter to the map component to set the size of markers.
+ - Add the ability to customize top navigation links and to create submenus in the `shell` component.
 
 ## 0.15.1 (2023-11-07)
 

examples/official-site/sqlpage/migrations/01_documentation.sql

@@ -500,7 +500,7 @@ INSERT INTO parameter(component, name, description, type, top_level, optional) S
     ('javascript', 'The URL of a Javascript file to load and execute on the page.', 'URL', TRUE, TRUE),
     ('image', 'The URL of an image to display next to the page title.', 'URL', TRUE, TRUE),
     ('icon', 'Name of an icon (from tabler-icons.io) to display next to the title in the navigation bar.', 'ICON', TRUE, TRUE),
-    ('menu_item', 'Adds a menu item in the navigation bar at the top of the page. The menu item will have the specified name, and will link to as .sql file of the same name.', 'TEXT', TRUE, TRUE),
+    ('menu_item', 'Adds a menu item in the navigation bar at the top of the page. The menu item will have the specified name, and will link to as .sql file of the same name. A dropdown can be generated by passing a json object with a `title` and `submenu` properties.', 'TEXT', TRUE, TRUE),
     ('search_target', 'When this is set, a search field will appear in the top navigation bar, and load the specified sql file with an URL parameter named "search" when the user searches something.', 'TEXT', TRUE, TRUE),
     ('norobot', 'Forbids robots to save this page in their database and follow the links on this page. This will prevent this page to appear in Google search results for any query, for instance.', 'BOOLEAN', TRUE, TRUE),
     ('font', 'Name of a font to display the text in. This has to be a valid font name from fonts.google.com.', 'TEXT', TRUE, TRUE),
@@ -512,12 +512,30 @@ INSERT INTO parameter(component, name, description, type, top_level, optional) S
 ) x;
 
 INSERT INTO example(component, description, properties) VALUES
-    ('shell', 'This example contains the values used for the shell of the page you are currently viewing.',
+    ('shell', '
+This example contains the values used for the shell of the page you are currently viewing.
+
+The `menu_item` property is used both in its simple string form, to generate a link named "functions" that points to "functions.sql",
+and in its object form, to generate a dropdown menu named "Community" with links to the blog, the github repository, and the issues page.
+
+The object form can be used directly only on database engines that have a native JSON type.
+On other engines (such as SQLite), you can use the `dynamic` component to generate the same result.
+',
      json('[{
             "component": "shell",
             "title": "SQLPage documentation",
             "link": "/",
-            "menu_item": ["index", "blog", "components", "functions"],
+            "menu_item": [
+                {"link": "index.sql", "title": "Home"},
+                {"title": "Community", "submenu": [
+                    {"link": "blog.sql", "title": "Blog"},
+                    {"link": "//github.com/lovasoa/sqlpage/issues", "title": "Issues"},
+                    {"link": "//github.com/lovasoa/sqlpage/discussions", "title": "Discussions"},
+                    {"link": "//github.com/lovasoa/sqlpage", "title": "Github"}
+                ]},
+                "functions",
+                "components"
+            ],
             "language": "en-US",
             "description": "Documentation for the SQLPage low-code web application framework.",
             "font": "Poppins",

sqlpage/templates/shell.handlebars

@@ -60,9 +60,29 @@
                 <div class="collapse navbar-collapse" id="navbar-menu">
                     <ul class="navbar-nav ms-auto">
                         {{#each (to_array menu_item)}}
-                            <li class="nav-item">
-                                <a class="nav-link text-capitalize" href="{{this}}.sql">{{this}}</a>
-                            </li>
+                            {{#if (eq (typeof this) 'object')}}
+                                <li class="nav-item{{#if this.submenu}} dropdown{{/if}}">
+                                <a class="nav-link {{#if this.submenu}}dropdown-toggle{{/if}}" href="{{#if this.link}}{{this.link}}{{else}}#{{/if}}"
+                                    {{#if this.submenu}}data-bs-toggle="dropdown" data-bs-auto-close="outside"{{/if}}
+                                    role="button"
+                                >
+                                    {{this.title}}
+                                </a>
+                                {{#if this.submenu}}
+                                    <div class="dropdown-menu dropdown-menu-end" data-bs-popper="static">
+                                        {{#each this.submenu}}
+                                            <a class="dropdown-item" href="{{this.link}}">
+                                                {{this.title}}
+                                            </a>
+                                        {{/each}}
+                                    </div>
+                                {{/if}}
+                                </li>
+                            {{else}}
+                                <li class="nav-item">
+                                    <a class="nav-link text-capitalize" href="{{this}}.sql">{{this}}</a>
+                                </li>
+                            {{/if}}
                         {{/each}}
                     </ul>
                     {{#if search_target}}