Skip to content

V0.19.x : broken custom shell top menu #246

New issue
New issue
Closed
Closed
V0.19.x : broken custom shell top menu#246
Labels
bugSomething isn't working
@gourk

Description

@gourk
gourk
opened on Mar 1, 2024

Introduction

I wrote a custom shell component in August to display a custom menu. It works fine after you help me here

But since v.19.x, the menu isn't visible anymore without error message.

To Reproduce

use this shell.handlebars page

<!DOCTYPE html>
<html lang="{{language}}" style="font-size: {{default font_size 18}}px">
<head>
    <meta charset="utf-8"/>
    <title>{{default title "SQLPage"}}</title>

    <link rel="stylesheet" href="/{{static_path 'sqlpage.css'}}">
   {{#each (to_array css)}}
        {{#if this}}
            <link rel="stylesheet" href="{{this}}">
        {{/if}}
   {{/each}}

   {{#if font}}
        <link rel="preconnect" href="https://fonts.googleapis.com">
        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
        <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family={{font}}&display=fallback">
        <style>:root { --tblr-font-sans-serif: '{{font}}', Arial, sans;}</style>
    {{/if}}

    <script src="/{{static_path 'sqlpage.js'}}" defer></script>
    {{#each (to_array javascript)}}
        {{#if this}}
            <script src="{{this}}" defer></script>
        {{/if}}
    {{/each}}

    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <meta name="description" content="{{description}}"/>
    {{#if norobot}}
        <meta name="robots" content="noindex,nofollow">
    {{/if}}

    {{#if refresh}}
        <meta http-equiv="refresh" content="{{refresh}}">
    {{/if}}
    <meta name="generator" content="SQLPage"/>
</head>

<body class="layout-boxed">
<div class="page">
    {{#if title}}
        <nav class="navbar navbar-expand-md navbar-light">
            <div class="container-fluid">
                <a class="navbar-brand" href="{{#if link}}{{link}}{{else}}/{{/if}}">
                    {{#if image}}
                        <img src="{{image}}" alt="{{title}}" width="32" height="32"
                             class="navbar-brand-image">
                    {{/if}}
                    {{#if icon}}
                        {{~icon_img icon~}}
                    {{/if}}
                    {{title}}
                </a>
                <button class="navbar-toggler" type="button" data-bs-toggle="collapse"
                        data-bs-target="#navbar-menu" aria-controls="navbar-menu" aria-expanded="false"
                        aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class="collapse navbar-collapse" id="navbar-menu">
                    <ul class="navbar-nav ms-auto">
                        {{#each (parse_json menu_item)}}
                            <li class="nav-item">
                                <a class="nav-link text-capitalize" href="{{menulink}}">{{menuname}}</a>
                            </li>
                        {{/each}}
                    </ul>
                    {{#if search_target}}
                        <form class="d-flex" role="search" target="{{search_target}}">
                            <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search"
                                   name="search">
                            <button class="btn btn-outline-success" type="submit">Search</button>
                        </form>
                    {{/if}}
                </div>
            </div>
        </nav>
    {{/if}}
    <main class="page-wrapper container-xl pt-3 px-md-5 px-sm-3">
        {{~#each_row~}}{{~/each_row~}}
    </main>
</div>
<div class="w-100 text-center fs-6 my-2 text-secondary">
    {{#if footer}}
        {{{markdown footer}}}
    {{else}}
        <!-- You can change this footer using the 'footer' parameter of the 'shell' component -->
        Built with <a class="text-reset" href="https://sql.ophir.dev" title="SQLPage v{{buildinfo 'CARGO_PKG_VERSION'}}">SQLPage</a>
    {{/if}}
</div>
</body>
</html>

This index.sql

Select 'shell' as component,
    'MyTitle' AS title,
    'heart-filled' AS icon,
    '/' AS link,
    (select json('[
         {"menulink":"Connexion.sql","menuname":"Connexion"},
         {"menulink":"./user/inscription.sql","menuname":"Inscription"}]')) as menu_item,
    'fr' as lang,
   'MyFooter'  AS footer;

Actual behavior

The top menu is not visible anymore
image

Expected behavior

The top menu should be visible., like previous version.
Uploading image.png…

Version information

  • OS: official container (main,v.0.19.0, v.0.19.1)
  • Database: Postgres
  • SQLPage Version: v.0.19.0, v.0.19.1

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't working

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions