Merge pull request sqlpage#440 from pchemguy/fixed-top-navbar

Adds fixed top menu option to shell

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

@@ -776,6 +776,7 @@ INSERT INTO parameter(component, name, description, type, top_level, optional) S
     ('social_image', 'The URL of the preview image that will appear in the Open Graph metadata when the page is shared on social media.', 'URL', TRUE, TRUE),
     ('icon', 'Name of an icon (from tabler-icons.io) to display next to the title in the navigation bar.', 'ICON', TRUE, TRUE),
     ('menu_item', 'Adds a menu item in the navigation bar at the top of the page. The menu item will have the specified name, and will link to as .sql file of the same name. A dropdown can be generated by passing a json object with a `title` and `submenu` properties.', 'TEXT', TRUE, TRUE),
+    ('fixed_top_menu', 'Fixes the top bar with menu at the top (the top bar remains visible when scrolling long pages).', 'BOOLEAN', TRUE, TRUE),
     ('search_target', 'When this is set, a search field will appear in the top navigation bar, and load the specified sql file with an URL parameter named "search" when the user searches something.', 'TEXT', TRUE, TRUE),
     ('search_value', 'This value will be placed in the search field when "search_target" is set. Using the "$search" query parameter value will mirror the value that the user has searched for.', 'TEXT', TRUE, TRUE),
     ('norobot', 'Forbids robots to save this page in their database and follow the links on this page. This will prevent this page to appear in Google search results for any query, for instance.', 'BOOLEAN', TRUE, TRUE),

sqlpage/templates/shell.handlebars

@@ -67,7 +67,7 @@
 <div class="page">
     {{#if title}}
         <header id="sqlpage_header">
-        <nav class="navbar navbar-expand-md navbar-light">
+        <nav class="navbar navbar-expand-md navbar-light{{#if fixed_top_menu}} fixed-top{{/if}}">
         <div class="container-fluid">
             <a class="navbar-brand flex-grow-1 overflow-hidden" href="{{#if link}}{{link}}{{else}}/{{/if}}">
                 {{#if image}}
@@ -130,7 +130,7 @@
         </nav>
         </header>
     {{/if}}
-    <main class="page-wrapper container-xl pt-3 px-md-5 px-sm-3" id="sqlpage_main_wrapper">
+    <main class="page-wrapper container-xl pt-3 px-md-5 px-sm-3 {{#if fixed_top_menu}} mt-5{{/if}}" id="sqlpage_main_wrapper">
         {{~#each_row~}}{{~/each_row~}}
     </main>
 </div>