Add active indicator to the shell nav items (#908)

* Added active indicator to the nav-item to highlight active navigation item

* Update documentation to reflect active property on a menu_item

* Updated shell component examples to separate active flag as its own example

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

---------

Co-authored-by: Ophir LOJKINE <[email protected]>

Author: andrewsinnovations

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

@@ -1208,6 +1208,7 @@ 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.
 
+
 You see the [page layouts demo](./examples/layouts.sql) for a live example of the different layouts.
 ',
      json('[{
@@ -1262,6 +1263,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.

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)}}
-                        <li class="nav-item{{#if this.submenu}} dropdown{{/if}}">
+                        <li class="nav-item{{#if this.submenu}} dropdown{{/if}}{{#if this.active}} active{{/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~}}
                                 {{#if this.target}}target="{{this.target}}"{{/if}}