Towards tree view vertical menu layout

[pchemguy]

The hierarchical sidebar menu is a common important tool for information navigation. At present, SQLPage does not offer such a feature, but several approaches can be used to implement it. First, the menu may be rendered on the server or the client side. When rendered on the client side, JavaScript is commonly used for this purpose, and there are a variety of JavaScript plugins/libraries, which can facilitate this process. The advantage of the library-based approach is the ability to implement feature-rich designs. SQLPage uses JavaScript for some of its interactive/dynamic components, so a hierarchical menu may be implemented in a similar fashion. Further, the data for the entire tree structure may be sent to the client browser in one go, or AJAX queries may be used to load the data dynamically.

Perhaps, the simplest approach is to let SQLPage render the entire menu on the server. For this purpose, the Inline Partials feature of Handlebars can be used. This feature supports recursive calls necessary to render trees. The branch focuses on such an approach. Because presently SQLPage does not offer a layout with a vertical menu, I used the Tabler combo ayout layout as the starting point. This layout has the "boxed" style, but by adding class="layout-fluid" to the "body" tag, the layout is switched to the "fluid" style. (Tabler offers several similar layouts with vertical designs).

The demo SQLPage project contains the working handlebars template draft shell_combo.handlebars. The file is a hard link (on Windows) to the same file. The template layout-combo.html (and other templates) has the top bar, and a separate main menu bar, which may be laid out as a vertical sidebar or a top menu below the top bar. The top bar may contain buttons and its own menus.

A large chunk of the original dummy content has been removed from the working template draft. The main menu has been replaced with a recursive handlebars template. I updated the header from the SQLPage shell.handlebars component, but most of the layout source code is still the original HTML. The definitions of inline partials are placed at the top of the template. The demo file, index.sql, loads this template draft and populates the menu from the main_menu.json file. Menu tree data is stored in a JSON file, which is probably the simplest solution. But my preferable approach is to have a dedicated "menu_items" table, storing individual menu items and associated metadata using the Adjacency List encoding of the tree structure (each record has a foreign key to its parent row or NULL for top-level items). As shown in my previous post, this design is convenient for configuring the menu, applying localization, if appropriate, and reconstructing the original structure via a recursive CTE query (it appears simpler than walking the JSON tree in SQL, though it might be just a matter of preference).

[lovasoa]

Thanks @pchemguy ! Unfortunately the link to shell_combo.handlebars is broken: https://github.com/lovasoa/SQLpage/discussions/branch_dev_dir/abc_dummy_proj/sqlpage/templates/shell_combo.handlebars

[pchemguy]

Thanks @lovasoa, I fixed local links.