Skip to content

Commit 3db0bb7

Browse files
pchemguypchemguy
committed
Adds support for icons and image-based icons in menu
1 parent 3b72734 commit 3db0bb7

File tree

3 files changed

+76
-16
lines changed

3 files changed

+76
-16
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: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -929,6 +929,27 @@ SELECT
929929
```
930930
931931
More about how to handle user sessions in the [authentication component documentation](?component=authentication#component).
932+
933+
### Menu with icons
934+
935+
The "icon" attribute may be specified for items in the top menu and submenus to display an icon
936+
before the title (or instead). Similarly, the "image" attribute defines a file-based icon. For
937+
image-based icons, the "size" attribute may be specified at the top level of menu_item only to
938+
reduce the size of image-based icons. The following snippet provides an example, which is also
939+
available [here](examples/menu_icon.sql).
940+
941+
```sql
942+
SELECT
943+
''shell'' AS component,
944+
''SQLPage'' AS title,
945+
''database'' AS icon,
946+
''/'' AS link,
947+
TRUE AS fixed_top_menu,
948+
''{"title":"About","icon": "settings","submenu":[{"link":"/safety.sql","title":"Security","icon": "logout"},{"link":"/performance.sql","title":"Performance"}]}'' AS menu_item,
949+
''{"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,
950+
''{"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,
951+
''Official [SQLPage](https://sql.ophir.dev) documentation'' as footer;
952+
```
932953
', NULL),
933954
('shell', '
934955
### 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)