Trying to create a Sidebar component #504

Ajotah98 · 2024-07-22T19:56:31Z

Ajotah98
Jul 22, 2024

Hi everyone,

I'm trying to create a sidebar navbar component (I just enjoy more having the navbar on side) and by now, it looks like this:

As SQLPage uses, I'm making it with Tabler:

sidebar.handlebars:

<aside class="navbar navbar-vertical navbar-expand-lg navbar-dark" data-bs-theme="dark">
    <div class="container-fluid">
        <div class="navbar-brand navbar-brand-autodark">
            {{this.header}}
        </div>
        <div class="navbar-collapse collapse" id="navbar-menu">
            <ul class="navbar-nav pt-lg-3">
                {{#each_row}}
                <li class="nav-item">
                    <a class="nav-link" href="{{this.link}}">
                        <span class="nav-link-icon d-md-none d-lg-inline-block">
                            {{~icon_img icon~}}
                        </span>
                        <span class="nav-link-title">
                            {{this.title}}
                        </span>
                    </a>
                </li>
                {{/each_row}}
            </ul>
        </div>
    </div>
</aside>

The final result I want to make is something similar to the Tabler Dashboard:

So I want to ask:

I noticed that Tabler loads the "sidebar" and the "main page" in different hierarchy than SQLPage does by loading components (because of the shell component behaviour). Do you know any CSS trick or something to make a proper display block without modifying the shell component? Will be mandatory modifying it in order to show the Sidebar and the contents without overlapping on them?

Thank you all.

lovasoa · 2024-07-23T07:17:22Z

lovasoa
Jul 23, 2024
Maintainer

If you want a quick solution, you can probably just create a css file with

body {
   margin-left: 200px; /* (or whatever size you need) */
}

But in the end, it would be nice if we could integrate that in the default shell component for everyone. I know @srcarvalho12 had started working on that in #265 .

4 replies

Ajotah98 Jul 23, 2024
Author

Hi! Tysm, I'll try to update it then (the template used by @srcarvalho12). Atm, looks like this:

With this shell.json config:

{
    "component": "shell",
    "title": "SQL + JSON = <3",
    "link": "/",
    "sidebar":"TRUE",
    "sidebar-theme":"dark",
    "menu_item": [
        {"link": "index.sql", "title": "Home"},
        {"title": "Community", "submenu": [
            {"link": "blog.sql", "title": "Blog"},
            {"link": "//github.com/lovasoa/sqlpage", "title": "Github"}
        ]}
    ]
}

(I'm just dealing with some examples of the docs to do it, so the page doesn't make any sense but I guess you get the point)

I want to add a button to toggle the sidebar, and make some tests to see that I dont f**** up something with the shell component. Then I'll do a pull request.

lovasoa Jul 23, 2024
Maintainer

Good ! The opened pull request is quite old; make sure you start from the current latest version of the shell.

Ajotah98 Jul 23, 2024
Author

Good ! The opened pull request is quite old; make sure you start from the current latest version of the shell.

Yep! That's what I did. I fused the template that was made with the last version. For now, I'll leave it as this:

<!DOCTYPE html>
<html lang="{{language}}" style="font-size: {{default font_size 18}}px" {{#if class}}class="{{class}}"{{/if}}>
<head>
    <meta charset="utf-8" />
    <title>{{default title "SQLPage"}}</title>
    <link rel="icon" href="{{#if favicon}}{{favicon}}{{else}}{{static_path 'favicon.svg'}}{{/if}}">
    {{#if manifest}}
    <link rel="manifest" href="{{manifest}}">
    {{/if}}
    <link rel="stylesheet" href="{{static_path 'sqlpage.css'}}">
    {{#each (to_array css)}}
    {{#if this}}
    <link rel="stylesheet" href="{{this}}">
    {{/if}}
    {{/each}}

    {{#if font}}
    {{#if (starts_with font "/")}}
    <style>
        @font-face {
            font-family: 'LocalFont';
            src: url('{{font}}') format('woff2');
            font-weight: normal;
            font-style: normal;
        }

        :root {
            --tblr-font-sans-serif: 'LocalFont', Arial, sans-serif;
        }
    </style>
    {{else}}
    <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-serif;
        }
        
    </style>
    {{/if}}
    {{/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}}
    {{#if rss}}
    <link rel="alternate" type="application/rss+xml" title="{{title}}" href="{{rss}}">
    {{/if}}
    <meta name="generator" content="SQLPage" />
    {{#if social_image}}
    <meta property="og:image" content="{{social_image}}" />
    {{/if}}
</head>

<body class="{{#if sidebar}}layout-horizontal{{else}}layout-{{default layout 'boxed'}}{{/if}}" {{#if theme}}data-bs-theme="{{theme}}"{{/if}}>
    <div class="page">
        {{#if (or (or title (or icon image)) menu_item)}}
        <header id="sqlpage_header"></header>
            {{#if sidebar}}
            <aside class="navbar navbar-vertical navbar-expand-lg" {{#if sidebar-theme}}data-bs-theme="{{sidebar-theme}}"{{/if}}>
                <div class="container-fluid">
                    <button class="navbar-toggler collapsed" type="button" data-bs-target="#sidebar-menu" aria-controls="sidebar-menu" data-bs-toggle="collapse" aria-expanded="false" aria-label="Toggle navigation">
                        <span class="navbar-toggler-icon"></span>
                    </button>
                    <h1 class="navbar-brand navbar-brand-autodark">
                        <a style="text-decoration: none" href="{{#if link}}{{link}}{{else}}/{{/if}}">
                            {{#if image}}
                            <img src="{{image}}" alt="{{title}}" height="32" class="navbar-brand-image">
                            {{/if}}
                            {{#if icon}}
                            {{~icon_img icon~}}
                            {{/if}}
                            <span class="pe-2 pe-lg-0 align-middle">{{title}}</span>
                        </a>
                    </h1>
                    <div class="navbar-collapse collapse" id="sidebar-menu">
                        {{#if search_target}}
                        <form class="px-2" role="search" action="{{search_target}}">
                            <div class="input-group">
                                <input class="form-control" type="search" placeholder="Search" aria-label="Search" name="search">
                                <button class="btn" type="submit">Search</button>
                            </div>
                        </form>
                        {{/if}}
                        <ul class="navbar-nav pt-lg-3">
                            {{#each (to_array menu_item)}}
                            {{#if (eq (typeof this) 'object')}}
                            <li class="nav-item{{#if this.submenu}} dropdown{{/if}}">
                                <a class="nav-link {{#if this.submenu}}dropdown-toggle{{/if}}" href="{{#if this.link}}{{this.link}}{{else}}#{{/if}}" {{#if this.submenu}}data-bs-toggle="dropdown" data-bs-auto-close="outside"{{/if}} role="button">
                                    {{#if this.icon}}
                                    <span class="nav-link-icon d-md-none d-lg-inline-block">
                                        {{~icon_img icon~}}
                                    </span>
                                    {{/if}}
                                    <span class="nav-link-title">
                                        {{this.title}}
                                    </span>
                                </a>
                                {{#if this.submenu}}
                                <div class="dropdown-menu dropdown-menu-end" data-bs-popper="static">
                                    {{#each this.submenu}}
                                    <a class="dropdown-item" href="{{this.link}}">
                                        {{#if this.icon}}
                                        <span class="nav-link-icon d-md-none d-lg-inline-block">
                                            {{~icon_img icon~}}
                                        </span>
                                        {{/if}}
                                        <span class="nav-link-title">
                                            {{this.title}}
                                        </span>
                                    </a>
                                    {{/each}}
                                </div>
                                {{/if}}
                            </li>
                            {{else}}
                            <li class="nav-item">
                                <a class="nav-link text-capitalize" href="{{this}}.sql">
                                    <span class="nav-link-title">
                                        {{this}}
                                    </span>
                                </a>
                            </li>
                            {{/if}}
                            {{/each}}
                        </ul>
                    </div>
                </div>
            </aside>
            {{else}}
            <nav class="navbar navbar-expand-md navbar-light{{#if fixed_top_menu}} fixed-top{{/if}}">
                <div class="container-fluid gap-2">
                    <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}}
                    </a>
                    {{#if title}}
                    <h1 class="mb-0 fs-2 text-truncate">
                        <a class="navbar-brand" href="{{#if link}}{{link}}{{else}}/{{/if}}">{{title}}</a>
                    </h1>
                    {{/if}}
                    <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 (to_array menu_item)}}
                            {{#if (or (eq (typeof this) 'object') (and (eq (typeof this) 'string') (starts_with this '{')))}}
                            {{#with (parse_json this)}}
                            {{#if (or (or this.title this.icon) this.image)}}
                            <li class="nav-item{{#if this.submenu}} dropdown{{/if}}">
                                <a class="nav-link {{#if this.submenu}}dropdown-toggle{{/if}}" href="{{#if this.link}}{{this.link}}{{else}}#{{/if}}" {{#if this.submenu}}data-bs-toggle="dropdown" data-bs-auto-close="outside"{{/if}} role="button">
                                    {{#if this.image}}
                                    <span {{#if this.title}}class="me-1"{{/if}}>
                                        {{#if (eq this.size 'sm')}}
                                        <img width="16" height="16" src="{{this.image}}">
                                        {{else}}
                                        <img width="24" height="24" src="{{this.image}}">
                                        {{/if}}
                                    </span>
                                    {{/if}}
                                    {{#if this.icon}}
                                    {{#if this.title}}<span class="me-1">{{/if}}
                                        {{~icon_img this.icon~}}
                                        {{#if this.title}}</span>{{/if}}
                                    {{/if}}
                                    {{this.title}}
                                </a>
                                {{#if this.submenu}}
                                <div class="dropdown-menu dropdown-menu-end" data-bs-popper="static">
                                    {{#each this.submenu}}
                                    {{#if (or (or this.title this.icon) this.image)}}
                                    <a class="dropdown-item" href="{{this.link}}">
                                        {{#if this.image}}
                                        <span {{#if this.title}}class="me-1"{{/if}}>
                                            {{#if (eq ../this.size 'sm')}}
                                            <img width="16" height="16" src="{{this.image}}">
                                            {{else}}
                                            <img width="24" height="24" src="{{this.image}}">
                                            {{/if}}
                                        </span>
                                        {{/if}}
                                        {{#if this.icon}}
                                        {{#if this.title}}<span class="me-1">{{/if}}
                                            {{~icon_img this.icon~}}
                                            {{#if this.title}}</span>{{/if}}
                                        {{/if}}
                                        {{this.title}}
                                    </a>
                                    {{/if}}
                                    {{/each}}
                                </div>
                                {{/if}}
                            </li>
                            {{/if}}
                            {{/with}}
                            {{else}}
                            {{#if (gt (len this) 0)}}
                            <li class="nav-item">
                                <a class="nav-link text-capitalize" href="{{this}}.sql">{{this}}</a>
                            </li>
                            {{/if}}
                            {{/if}}
                            {{/each}}
                        </ul>
                        {{#if search_target}}
                        <form class="d-flex" role="search" action="{{search_target}}">
                            <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search" name="search" value="{{search_value}}">
                            <button class="btn btn-outline-success" type="submit">Search</button>
                        </form>
                        {{/if}}
                    </div>
                </div>
            </nav>
            {{/if}}
        
        {{/if}}
        <div class="page-wrapper">
            <main class="page-body container-xl pt-3 px-md-5 px-sm-3 {{#if fixed_top_menu}}mt-5{{#unless (eq layout 'boxed')}}pt-5{{/unless}}{{/if}}" id="sqlpage_main_wrapper">
            {{~#each_row~}}{{~/each_row~}}
            </main>
        </div> 
    </div>
    <footer class="w-100 text-center fs-6 my-2 text-secondary" id="sqlpage_footer">
        {{#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}}
    </footer>
</body>
</html>

The only problem I see is I can't figure out how to stretch the sidebar.

If you look at the Tabler example:

Compared with the "actual" version of the shell with sidebar:

The Tabler version is a little bit stretched/smaller than the actual implementation. I don't see any differences on the CSS classes used (as I copy-pasted entirely from the Tabler one...) so the only thing I'm considering is the font used on SQLPage is "bigger" than the Tabler page uses and that makes the sidebar wider.

lovasoa Jul 23, 2024
Maintainer

The width is fixed by tabler to 15 rem, so it depends on the root font size.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Trying to create a Sidebar component #504

{{title}}

Replies: 1 comment 4 replies

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Select a reply

Trying to create a Sidebar component #504

Ajotah98 Jul 22, 2024

Replies: 1 comment · 4 replies

lovasoa Jul 23, 2024 Maintainer

Ajotah98 Jul 23, 2024 Author

lovasoa Jul 23, 2024 Maintainer

Ajotah98 Jul 23, 2024 Author

lovasoa Jul 23, 2024 Maintainer

Ajotah98
Jul 22, 2024

Replies: 1 comment 4 replies

lovasoa
Jul 23, 2024
Maintainer

Ajotah98 Jul 23, 2024
Author

lovasoa Jul 23, 2024
Maintainer

Ajotah98 Jul 23, 2024
Author

lovasoa Jul 23, 2024
Maintainer