Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Added a small draft sidebar template #265

Draft
wants to merge 1 commit into
base: main
Choose a base branch
from
Draft

Added a small draft sidebar template #265

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
242 changes: 175 additions & 67 deletions sqlpage/templates/shell.handlebars
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand All @@ -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>