From ad9aec2f4ffcb991ddb27d1f7695469e88f09319 Mon Sep 17 00:00:00 2001 From: Andrews Innovations Date: Fri, 2 May 2025 23:09:26 -0500 Subject: [PATCH 1/4] Added active indicator to the nav-item to highlight active navigation item --- sqlpage/templates/shell.handlebars | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/sqlpage/templates/shell.handlebars b/sqlpage/templates/shell.handlebars index 8d8513c2..f0530052 100644 --- a/sqlpage/templates/shell.handlebars +++ b/sqlpage/templates/shell.handlebars @@ -94,7 +94,7 @@ {{~#if (or (eq (typeof this) 'object') (and (eq (typeof this) 'string') (starts_with this '{')))}} {{~#with (parse_json this)}} {{#if (or (or this.title this.icon) this.image)}} -
  • +
  • Date: Sat, 3 May 2025 23:36:25 -0500 Subject: [PATCH 2/4] Update documentation to reflect active property on a menu_item --- .../official-site/sqlpage/migrations/01_documentation.sql | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/examples/official-site/sqlpage/migrations/01_documentation.sql b/examples/official-site/sqlpage/migrations/01_documentation.sql index 21a163b6..1c26b5bd 100644 --- a/examples/official-site/sqlpage/migrations/01_documentation.sql +++ b/examples/official-site/sqlpage/migrations/01_documentation.sql @@ -1208,6 +1208,8 @@ and in its object form, to generate a dropdown menu named "Community" with links 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=dynamic#component) component to generate the same result. +In this example, the "About" submenu is marked as active, which will highlight it in the navigation bar. + You see the [page layouts demo](./examples/layouts.sql) for a live example of the different layouts. ', json('[{ @@ -1216,7 +1218,7 @@ You see the [page layouts demo](./examples/layouts.sql) for a live example of th "icon": "database", "link": "/", "menu_item": [ - {"title": "About", "submenu": [ + {"active": true, "title": "About", "submenu": [ {"link": "/safety.sql", "title": "Security", "icon": "lock"}, {"link": "/performance.sql", "title": "Performance", "icon": "bolt"}, {"link": "//github.com/sqlpage/SQLPage/blob/main/LICENSE.txt", "title": "License", "icon": "file-text"}, From d84e6969b526865d923c7cfd30cf50bb4596ad6c Mon Sep 17 00:00:00 2001 From: Andrews Innovations Date: Mon, 5 May 2025 10:47:46 -0500 Subject: [PATCH 3/4] Updated shell component examples to separate active flag as its own example --- .../sqlpage/migrations/01_documentation.sql | 18 +++++++++++++++++- 1 file changed, 17 insertions(+), 1 deletion(-) diff --git a/examples/official-site/sqlpage/migrations/01_documentation.sql b/examples/official-site/sqlpage/migrations/01_documentation.sql index 1c26b5bd..3dab5cae 100644 --- a/examples/official-site/sqlpage/migrations/01_documentation.sql +++ b/examples/official-site/sqlpage/migrations/01_documentation.sql @@ -1218,7 +1218,7 @@ You see the [page layouts demo](./examples/layouts.sql) for a live example of th "icon": "database", "link": "/", "menu_item": [ - {"active": true, "title": "About", "submenu": [ + {"title": "About", "submenu": [ {"link": "/safety.sql", "title": "Security", "icon": "lock"}, {"link": "/performance.sql", "title": "Performance", "icon": "bolt"}, {"link": "//github.com/sqlpage/SQLPage/blob/main/LICENSE.txt", "title": "License", "icon": "file-text"}, @@ -1264,6 +1264,22 @@ You see the [page layouts demo](./examples/layouts.sql) for a live example of th "footer": "[Built with SQLPage](https://github.com/sqlpage/SQLPage/tree/main/examples/official-site)" }]')), ('shell', ' +This example shows how to set menu items as active in the navigation, so that they are highlighted in the nav bar. + +In this example you can see that two menu items are created, "Home" and "About" and the "Home" tab is marked as active. +', + json('[{ + "component": "shell", + "title": "SQLPage: SQL websites", + "icon": "database", + "link": "/", + "menu_item": [ + {"title": "Home", "active": true}, + {"title": "About"} + ] + }]')), + + ('shell', ' ### Sharing the shell between multiple pages It is common to want to share the same shell between multiple pages. From d5f5619700e335b15f88e046fd83e52c1122a989 Mon Sep 17 00:00:00 2001 From: Ophir LOJKINE Date: Tue, 6 May 2025 09:36:16 +0200 Subject: [PATCH 4/4] Update examples/official-site/sqlpage/migrations/01_documentation.sql --- examples/official-site/sqlpage/migrations/01_documentation.sql | 1 - 1 file changed, 1 deletion(-) diff --git a/examples/official-site/sqlpage/migrations/01_documentation.sql b/examples/official-site/sqlpage/migrations/01_documentation.sql index 3dab5cae..f7dc35dc 100644 --- a/examples/official-site/sqlpage/migrations/01_documentation.sql +++ b/examples/official-site/sqlpage/migrations/01_documentation.sql @@ -1208,7 +1208,6 @@ and in its object form, to generate a dropdown menu named "Community" with links 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=dynamic#component) component to generate the same result. -In this example, the "About" submenu is marked as active, which will highlight it in the navigation bar. You see the [page layouts demo](./examples/layouts.sql) for a live example of the different layouts. ',