Skip to content

Commit fa12f8a

Browse files
lovasoalovasoa
authored
Merge pull request #442 from pchemguy/menu-item-icon
Adds support for icons and image-based icons in menu
2 parents dc0ff9b + d55c645 commit fa12f8a

File tree

3 files changed

+95
-35
lines changed

3 files changed

+95
-35
lines changed

‎examples/official-site/examples/menu_icon.sql

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
SELECT
2+
'shell' AS component,
3+
'SQLPage' AS title,
4+
'database' AS icon,
5+
'/' AS link,
6+
TRUE AS fixed_top_menu,
7+
'{"title":"About","icon": "settings","submenu":[{"link":"/safety.sql","title":"Security","icon": "logout"},{"link":"/performance.sql","title":"Performance"}]}' AS menu_item,
8+
'{"title":"Examples","image": "https://upload.wikimedia.org/wikipedia/en/6/6b/Terrestrial_globe.svg","submenu":[{"link":"/examples/tabs.sql","title":"Tabs","image": "https://upload.wikimedia.org/wikipedia/en/6/6b/Terrestrial_globe.svg"},{"link":"/examples/layouts.sql","title":"Layouts"}]}' AS menu_item,
9+
'{"title":"Examples","size":"sm","image": "https://upload.wikimedia.org/wikipedia/en/6/6b/Terrestrial_globe.svg","submenu":[{"link":"/examples/tabs.sql","title":"Tabs","image": "https://upload.wikimedia.org/wikipedia/en/6/6b/Terrestrial_globe.svg"},{"link":"/examples/layouts.sql","title":"Layouts"}]}' AS menu_item,
10+
'Official [SQLPage](https://sql.ophir.dev) documentation' as footer;

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

Lines changed: 40 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -808,31 +808,31 @@ You see the [page layouts demo](./examples/layouts.sql) for a live example of th
808808
"link": "/",
809809
"menu_item": [
810810
{"title": "About", "submenu": [
811-
{"link": "/safety.sql", "title": "Security"},
812-
{"link": "/performance.sql", "title": "Performance"},
813-
{"link": "//github.com/lovasoa/SQLpage/blob/main/LICENSE.txt", "title": "License"},
814-
{"link": "/blog.sql", "title": "Articles"}
811+
{"link": "/safety.sql", "title": "Security", "icon": "lock"},
812+
{"link": "/performance.sql", "title": "Performance", "icon": "bolt"},
813+
{"link": "//github.com/lovasoa/SQLpage/blob/main/LICENSE.txt", "title": "License", "icon": "file-text"},
814+
{"link": "/blog.sql", "title": "Articles", "icon": "book"}
815815
]},
816816
{"title": "Examples", "submenu": [
817-
{"link": "/examples/tabs.sql", "title": "Tabs"},
818-
{"link": "/examples/layouts.sql", "title": "Layouts"},
819-
{"link": "/examples/multistep-form", "title": "Forms"},
820-
{"link": "/examples/handle_picture_upload.sql", "title": "File uploads"},
821-
{"link": "/examples/authentication/", "title": "Password protection"},
822-
{"link": "//github.com/lovasoa/SQLpage/blob/main/examples/", "title": "All examples & demos"}
817+
{"link": "/examples/tabs.sql", "title": "Tabs", "icon": "layout-navbar"},
818+
{"link": "/examples/layouts.sql", "title": "Layouts", "icon": "layout"},
819+
{"link": "/examples/multistep-form", "title": "Forms", "icon": "edit"},
820+
{"link": "/examples/handle_picture_upload.sql", "title": "File uploads", "icon": "upload"},
821+
{"link": "/examples/authentication/", "title": "Password protection", "icon": "password-user"},
822+
{"link": "//github.com/lovasoa/SQLpage/blob/main/examples/", "title": "All examples & demos", "icon": "code"}
823823
]},
824824
{"title": "Community", "submenu": [
825-
{"link": "blog.sql", "title": "Blog"},
826-
{"link": "//github.com/lovasoa/sqlpage/issues", "title": "Report a bug"},
827-
{"link": "//github.com/lovasoa/sqlpage/discussions", "title": "Discussions"},
828-
{"link": "//github.com/lovasoa/sqlpage", "title": "Github"}
825+
{"link": "blog.sql", "title": "Blog", "icon": "book"},
826+
{"link": "//github.com/lovasoa/sqlpage/issues", "title": "Report a bug", "icon": "bug"},
827+
{"link": "//github.com/lovasoa/sqlpage/discussions", "title": "Discussions", "icon": "message"},
828+
{"link": "//github.com/lovasoa/sqlpage", "title": "Github", "icon": "brand-github"}
829829
]},
830830
{"title": "Documentation", "submenu": [
831-
{"link": "/your-first-sql-website", "title": "Getting started"},
832-
{"link": "/components.sql", "title": "All Components"},
833-
{"link": "/functions.sql", "title": "SQLPage Functions"},
834-
{"link": "/custom_components.sql", "title": "Custom Components"},
835-
{"link": "//github.com/lovasoa/SQLpage/blob/main/configuration.md#configuring-sqlpage", "title": "Configuration"}
831+
{"link": "/your-first-sql-website", "title": "Getting started", "icon": "book"},
832+
{"link": "/components.sql", "title": "All Components", "icon": "list-details"},
833+
{"link": "/functions.sql", "title": "SQLPage Functions", "icon": "math-function"},
834+
{"link": "/custom_components.sql", "title": "Custom Components", "icon": "puzzle"},
835+
{"link": "//github.com/lovasoa/SQLpage/blob/main/configuration.md#configuring-sqlpage", "title": "Configuration", "icon": "settings"}
836836
]}
837837
],
838838
"layout": "boxed",
@@ -931,6 +931,27 @@ SELECT
931931
```
932932
933933
More about how to handle user sessions in the [authentication component documentation](?component=authentication#component).
934+
935+
### Menu with icons
936+
937+
The "icon" attribute may be specified for items in the top menu and submenus to display an icon
938+
before the title (or instead). Similarly, the "image" attribute defines a file-based icon. For
939+
image-based icons, the "size" attribute may be specified at the top level of menu_item only to
940+
reduce the size of image-based icons. The following snippet provides an example, which is also
941+
available [here](examples/menu_icon.sql).
942+
943+
```sql
944+
SELECT
945+
''shell'' AS component,
946+
''SQLPage'' AS title,
947+
''database'' AS icon,
948+
''/'' AS link,
949+
TRUE AS fixed_top_menu,
950+
''{"title":"About","icon": "settings","submenu":[{"link":"/safety.sql","title":"Security","icon": "logout"},{"link":"/performance.sql","title":"Performance"}]}'' AS menu_item,
951+
''{"title":"Examples","image": "https://upload.wikimedia.org/wikipedia/en/6/6b/Terrestrial_globe.svg","submenu":[{"link":"/examples/tabs.sql","title":"Tabs","image": "https://upload.wikimedia.org/wikipedia/en/6/6b/Terrestrial_globe.svg"},{"link":"/examples/layouts.sql","title":"Layouts"}]}'' AS menu_item,
952+
''{"title":"Examples","size":"sm","image": "https://upload.wikimedia.org/wikipedia/en/6/6b/Terrestrial_globe.svg","submenu":[{"link":"/examples/tabs.sql","title":"Tabs","image": "https://upload.wikimedia.org/wikipedia/en/6/6b/Terrestrial_globe.svg"},{"link":"/examples/layouts.sql","title":"Layouts"}]}'' AS menu_item,
953+
''Official [SQLPage](https://sql.ophir.dev) documentation'' as footer;
954+
```
934955
', NULL),
935956
('shell', '
936957
### A page without a shell

‎sqlpage/templates/shell.handlebars

Lines changed: 45 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -89,26 +89,55 @@
8989
{{~#each (to_array menu_item)~}}
9090
{{~#if (or (eq (typeof this) 'object') (and (eq (typeof this) 'string') (starts_with this '{')))}}
9191
{{~#with (parse_json this)}}
92-
<li class="nav-item{{#if this.submenu}} dropdown{{/if}}">
93-
{{#if (gt (len this.title) 0)}}
92+
{{#if (or (gt (len this.title) 0) (gt (len this.icon) 0) (gt (len this.image) 0))}}
93+
<li class="nav-item{{#if this.submenu}} dropdown{{/if}}">
9494
<a class="nav-link {{#if this.submenu}}dropdown-toggle{{/if}}" href="{{#if this.link}}{{this.link}}{{else}}#{{/if}}"
9595
{{~#if this.submenu}} data-bs-toggle="dropdown" data-bs-auto-close="outside" {{/if~}}
96-
role="button">
96+
role="button"
97+
>
98+
{{~#if this.image~}}
99+
<span {{~#if this.title}} class="me-1"{{/if}}>
100+
{{~#if (eq this.size 'sm')}}
101+
<img width=16 height=16 src="{{this.image}}">
102+
{{~else~}}
103+
<img width=24 height=24 src="{{this.image}}">
104+
{{~/if~}}
105+
</span>
106+
{{~/if~}}
107+
{{#if this.icon}}
108+
{{#if this.title}}<span class="me-1">{{/if}}
109+
{{~icon_img this.icon~}}
110+
{{#if this.title}}</span>{{/if}}
111+
{{/if}}
97112
{{~this.title~}}
98113
</a>
99-
{{~/if~}}
100-
{{~#if this.submenu~}}
101-
<div class="dropdown-menu dropdown-menu-end" data-bs-popper="static">
102-
{{~#each this.submenu~}}
103-
{{~#if (gt (len this.title) 0)~}}
104-
<a class="dropdown-item" href="{{this.link}}">
105-
{{~this.title~}}
106-
</a>
107-
{{~/if~}}
108-
{{~/each~}}
109-
</div>
110-
{{/if}}
111-
</li>
114+
{{~#if this.submenu~}}
115+
<div class="dropdown-menu dropdown-menu-end" data-bs-popper="static">
116+
{{~#each this.submenu~}}
117+
{{#if (or (gt (len this.title) 0) (gt (len this.icon) 0) (gt (len this.image) 0))}}
118+
<a class="dropdown-item" href="{{this.link}}">
119+
{{~#if this.image~}}
120+
<span {{~#if this.title}} class="me-1"{{/if}}>
121+
{{~#if (eq ../this.size 'sm')}}
122+
<img width=16 height=16 src="{{this.image}}">
123+
{{~else~}}
124+
<img width=24 height=24 src="{{this.image}}">
125+
{{~/if~}}
126+
</span>
127+
{{~/if~}}
128+
{{#if this.icon}}
129+
{{#if this.title}}<span class="me-1">{{/if}}
130+
{{~icon_img this.icon~}}
131+
{{#if this.title}}</span>{{/if}}
132+
{{/if}}
133+
{{~this.title~}}
134+
</a>
135+
{{~/if~}}
136+
{{~/each~}}
137+
</div>
138+
{{/if}}
139+
</li>
140+
{{/if}}
112141
{{/with}}
113142
{{~else}}
114143
{{~#if (gt (len this) 0)~}}

0 commit comments

Comments
 (0)