Skip to content

Add active indicator to the shell nav items #908

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 4 commits into from
May 6, 2025
+18 −1
Merged

Add active indicator to the shell nav items #908

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
ad9aec2
Added active indicator to the nav-item to highlight active navigation…
andrewsinnovations May 3, 2025
412bdae
Update documentation to reflect active property on a menu_item
andrewsinnovations May 4, 2025
d84e696
Updated shell component examples to separate active flag as its own e…
andrewsinnovations May 5, 2025
d5f5619
Update examples/official-site/sqlpage/migrations/01_documentation.sql
lovasoa May 6, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
18 changes: 18 additions & 0 deletions examples/official-site/sqlpage/migrations/01_documentation.sql
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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('[{
Expand Down Expand Up @@ -1262,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.
Expand Down
2 changes: 1 addition & 1 deletion sqlpage/templates/shell.handlebars
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}}
Expand Down
Loading