diff --git a/sqlpage/templates/shell.handlebars b/sqlpage/templates/shell.handlebars
index 788cc12f..c60f7785 100644
--- a/sqlpage/templates/shell.handlebars
+++ b/sqlpage/templates/shell.handlebars
@@ -5,13 +5,13 @@
<title>{{default title "SQLPage"}}</title>
<link rel="stylesheet" href="/{{static_path 'sqlpage.css'}}">
- {{#each (to_array css)}}
+ {{#each (to_array css)}}
{{#if this}}
<link rel="stylesheet" href="{{this}}">
{{/if}}
- {{/each}}
+ {{/each}}
- {{#if font}}
+ {{#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">
@@ -38,78 +38,186 @@
<link rel="alternate" type="application/rss+xml" title="{{title}}" href="{{rss}}">
{{/if}}
<meta name="generator" content="SQLPage"/>
+
+ <style>
+ .scroll-transparent{
+ scrollbar-color: rgba(24, 36, 51, .16) transparent; !important;
+ }
+ </style>
+
</head>
-<body class="layout-{{default layout 'boxed'}}" {{#if theme}}data-bs-theme="{{theme}}"{{/if}}>
+<body class="{{#if sidebar}}layout-horizontal{{else}}layout-{{default layout 'boxed'}}{{/if}}" {{#if theme}}data-bs-theme="{{theme}}"{{/if}}>
<div class="page">
{{#if title}}
- <nav class="navbar navbar-expand-md navbar-light">
- <div class="container-fluid">
- <a class="navbar-brand flex-grow-1 overflow-hidden" 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}}
- <h1 class="mb-0 w-0 fs-2">{{title}}</h1>
- </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 (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"
- >
- {{this.title}}
- </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 sidebar}}
+ <aside class="navbar navbar-vertical navbar-expand-lg navbar-transparent scroll-transparent">
+ <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}}">
+<!-- <img src="..." width="110" height="32" alt="Tabler" class="navbar-brand-image">-->
+ {{#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}}
- </a>
- {{/each}}
- </div>
+ </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}}
- </li>
- {{else}}
- <li class="nav-item">
- <a class="nav-link text-capitalize" href="{{this}}.sql">{{this}}</a>
- </li>
- {{/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">
- <button class="btn btn-outline-success" type="submit">Search</button>
- </form>
- {{/if}}
+ {{/each}}
+ </ul>
+ </div>
</div>
- </div>
- </nav>
+ </aside>
+ {{else}}
+ <nav class="navbar navbar-expand-md navbar-light">
+ <div class="container-fluid">
+ <a class="navbar-brand flex-grow-1 overflow-hidden" 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}}
+ <h1 class="mb-0 w-0 fs-2">{{title}}</h1>
+ </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 (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"
+ >
+ {{this.title}}
+ </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}}">
+ {{this.title}}
+ </a>
+ {{/each}}
+ </div>
+ {{/if}}
+ </li>
+ {{else}}
+ <li class="nav-item">
+ <a class="nav-link text-capitalize" href="{{this}}.sql">{{this}}</a>
+ </li>
+ {{/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">
+ <button class="btn btn-outline-success" type="submit">Search</button>
+ </form>
+ {{/if}}
+ </div>
+ </div>
+ </nav>
+ {{/if}}
{{/if}}
- <main class="page-wrapper container-xl pt-3 px-md-5 px-sm-3">
- {{~#each_row~}}{{~/each_row~}}
+ <main class="page-wrapper{{#unless sidebar}}container-xl pt-3 px-md-5 px-sm-3{{/unless}}">
+ <div class="page-body">
+ {{#if sidebar}}<div class="container-xl">{{/if}}
+ {{~#each_row~}}{{~/each_row~}}
+ {{#if sidebar}}</div>{{/if}}
+ </div>
+ {{#if sidebar}}
+ <div class="footer text-center footer-transparent d-print-none">
+ {{#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>
+ {{/if}}
</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>
+{{#unless sidebar}}
+ <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>
+{{/unless}}
</body>
-</html>
+</html>
\ No newline at end of file