Mirrors/tabler
1
0
Fork 0
mirror of https://github.com/tabler/tabler.git synced 2025-12-21 17:34:25 +04:00
Code Issues Projects Releases Wiki Activity

sidebar layouts

Browse Source
This commit is contained in:
chomik
2019-05-23 21:16:15 +02:00
parent c4307886ea
commit 5f86fac04a
17 changed files with 277 additions and 247 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
_config.yml
View File

@@ -46,6 +46,7 @@ defaults:
type: pages
values:
layout: default
nav-position: top
-
scope:
type: docs

2
package.json
View File

@@ -7,7 +7,7 @@
"build": "npm-run-all lint html-build css-compile js-compile",
"bundlesize": "bundlesize",
"browsersync": "node build/browsersync.js",
"html-watch": "JEKYLL_ENV=development bundle exec jekyll build --watch --incremental",
"html-watch": "JEKYLL_ENV=development bundle exec jekyll build --watch",
"html-build": "JEKYLL_ENV=production bundle exec jekyll build",
"lint": "npm-run-all --parallel js-lint css-lint",
"css-compile": "node-sass --output-style expanded --source-map true --source-map-contents true --precision 6 scss/tabler.scss dist/css/tabler.css",

20
pages/_data/menu.yml
View File

@@ -8,15 +8,29 @@ level-1:
children:
level-2:
title: Level 2
icon: menu
children:
level-3:
title: Level 3
icon: menu
children:
level-4:
title: Level 4
icon: menu
layout:
title: Layout
icon: layout
children:
sidebar-left:
title: Left sidebar
url: navbar-left.html
sidebar-right:
title: Right sidebar
url: navbar-right.html
navbar-top:
title: Navbar top
url: navbar-top.html
header-dark:
title: Dark header
url: header-dark.html
docs:
title: Documentation
icon: file-text

4
pages/_includes/layout/header.html
View File

@@ -1,3 +1,3 @@
<header class="header">
{% include parts/navbar.html logo=true user-menu=1 person=5 dark=false %}
<header class="header{% if include.dark %} bg-dark text-white{% endif %}">
{% include parts/navbar.html logo=true user-menu=1 person=5 dark=false white-logo=include.dark %}
</header>

2
pages/_includes/layout/menu.html
View File

@@ -1,4 +1,4 @@
<ul class="navbar-nav mb-md-4">
<ul class="navbar-nav{% if include.class %} {{ include.class }}{% endif %}">
{% assign current-page = include.menu | split: '.' %}
{% for level-1 in site.data.menu %}

2
pages/_includes/layout/sidenav-content.html
View File

@@ -10,4 +10,4 @@
Docs
</h6>
{% include layout/menu.html menu=include.menu %}
{% include layout/menu.html menu=include.menu class="mb-md-4" %}

2
pages/_includes/layout/sidenav.html
View File

@@ -1,4 +1,4 @@
{% assign menu = page.menu | default: layout.menu %}
<div class="sidenav sidenav-dark sidenav-expand-md">
<div class="sidenav sidenav-dark{% if page.nav-position == "right" %} sidenav-right{% endif %} sidenav-expand-md">
{% include layout/sidenav-content.html white=true menu=menu %}
</div>

8
pages/_includes/layout/topnav.html
View File

@@ -1,9 +1,5 @@
<div class="topnav">
<div class="container-fluid">
<nav class="navbar navbar-expand-lg topnav-menu">
<div class="navbar-collapse active collapse show" id="topnav-menu-content" style="">
{% include layout/menu.html %}
</div>
</nav>
<div class="container">
{% include layout/menu.html %}
</div>
</div>

444
pages/_includes/parts/navbar.html
View File

@@ -2,233 +2,231 @@
{% assign person = site.data.people | where: "id", include.person %}
{% assign person = person[0] %}
<div class="navbar navbar-expand-lg{% if include.dark %} navbar-dark bg-dark{% endif %}">
<div class="container{% if include.fluid %}-fluid{% endif %}">
<a class="d-lg-none px-1" data-toggle="modal" data-target="#aside">
{% include ui/icon.html icon="menu" %}
</a>
<div class="navbar container{% if include.fluid %}-fluid{% endif %} navbar-expand-lg{% if include.dark %} navbar-dark bg-dark{% endif %}">
<a class="d-lg-none px-1" data-toggle="modal" data-target="#aside">
{% include ui/icon.html icon="menu" %}
</a>
<a href="{{ site.base }}" class="navbar-brand text-inherit">
{% if include.icon %}<span class="text-green">{% include ui/icon.html icon=include.icon %}</span>{% endif %}
{% if include.stamp %}<span class="stamp bg-primary text-white">UI</span>{% endif %}
{% if include.logo %}<img src="{{ site.base }}/img/logo.svg" alt="" class="navbar-brand-logo mr-3">{% endif %}
{% if include.title %}<span class="d-inline">{{ include.title }}</span>{% endif %}
</a>
<a href="{{ site.base }}" class="navbar-brand text-inherit">
{% if include.icon %}<span class="text-green">{% include ui/icon.html icon=include.icon %}</span>{% endif %}
{% if include.stamp %}<span class="stamp bg-primary text-white">UI</span>{% endif %}
{% if include.logo %}<img src="{{ site.base }}/img/logo{% if include.white-logo %}-white{% endif %}.svg" alt="" class="navbar-brand-logo mr-3">{% endif %}
{% if include.title %}<span class="d-inline">{{ include.title }}</span>{% endif %}
</a>
{% if include.plus-left %}
<a href="#" class="btn btn-primary">
{% include ui/icon.html icon="plus" %}
</a>
{% if include.plus-left %}
<a href="#" class="btn btn-primary">
{% include ui/icon.html icon="plus" %}
</a>
{% endif %}
<div class="collapse navbar-collapse order-2 order-lg-1" id="navbarToggler">
{% if include.big-menu %}
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Homepage</a>
</li>
<li class="nav-item dropdown">
<div class="dropdown">
<a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown">Pages</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="##">App Pages</a>
<a class="dropdown-item" href="#">Utility Pages</a>
<a class="dropdown-item" href="#">Layouts</a>
</div>
</div>
</li>
<li class="nav-item">
<div class="dropdown">
<a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown">Components</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Bootstrap</a>
<a class="dropdown-item" href="#">Pipeline</a>
</div>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Documentation</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Changelog</a>
</li>
</ul>
{% endif %}
{% if include.search %}
<!-- Navbar Search -->
<form class="input-group m-2 my-lg-0 ">
<span class="input-group-prepend">
<button type="button"
class="btn no-shadow no-bg px-0">{% include ui/icon.html icon="search" %}</button>
</span>
<input type="text" class="form-control no-border no-shadow no-bg typeahead" placeholder="Search..."
data-plugin="typeahead">
</form>
{% endif %}
</div>
<ul class="nav navbar-menu order-1 order-lg-2">
{% if include.fullscreen %}
<li class="nav-item d-none d-sm-block">
<a class="nav-link px-2" data-toggle="fullscreen" data-title="Fullscreen">
{% include ui/icon.html icon="maximize" %}
</a>
</li>
{% endif %}
{% if include.customize %}
<li class="nav-item dropdown">
<a class="nav-link px-2" data-toggle="dropdown">
{% include ui/icon.html icon="droplet" %}
<span class="badge badge-pill badge-up bg-success"></span>
</a>
</li>
{% endif %}
{% if include.notifications %}
<!-- Notification -->
<li class="nav-item dropdown">
<a class="nav-link px-2" data-toggle="dropdown">
{% include ui/icon.html icon="bell" %}
<span class="badge badge-pill badge-up bg-primary">4</span>
</a>
<div class="dropdown-menu dropdown-menu-right mt-3 p-0">
<div class="scrollable">
<div class="list list-row">
</div>
</div>
<div class="d-flex px-3 py-2 b-t">
<div class="flex">
<span>6 Notifications</span>
</div>
<a href="#">See all <i class="fa fa-angle-right text-muted"></i></a>
</div>
</div>
</li>
{% endif %}
{% if include.progress %}
<li class="nav-item">
<a href="#" class="nav-link text-muted-light">
Profile Completeness: 70%
<!--<span class="progress progress-xs">-->
<!--<span class="progress-bar" style="width: 70%"></span>-->
<!--</span>-->
</a>
</li>
{% endif %}
{% if include.user-menu %}
<li class="nav-item dropdown">
<a href="#" data-toggle="dropdown"
class="nav-link d-flex align-items-center py-0 px-lg-0 px-2 text-color ml-2">
{% if include.user-menu == 1 %}
{% include ui/avatar.html src=person.photo %}
<span class="ml-2 d-none d-lg-block leading-none">
<span>{{ person.full_name }}</span>
<span class="text-muted d-block mt-1 text-h6">Administrator</span>
</span>
{% elsif include.user-menu == 2 %}
<span class="mx-2 d-none leading-none d-lg-block text-right">
<span class="text-default">{{ person.full_name }}</span>
</span>
{% include ui/avatar.html src=person.photo %}
{% elsif include.user-menu == 3 %}
{% include ui/avatar.html src=person.photo %}
{% elsif include.user-menu == 4 %}
<span class="btn btn-secondary">{% include ui/avatar.html src=person.photo class="mr-2 btn-avatar" %}{{ person.full_name }}</span>
{% endif %}
</a>
<div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
<a class="dropdown-item" href="#">
{% include ui/icon.html icon="user" class="dropdown-icon" %} Profile
</a>
<a class="dropdown-item" href="#">
{% include ui/icon.html icon="settings" class="dropdown-icon" %} Settings
</a>
<a class="dropdown-item" href="#">
<span class="float-right"><span class="badge badge-primary">6</span></span>
{% include ui/icon.html icon="mail" class="dropdown-icon" %} Inbox
</a>
<a class="dropdown-item" href="#">
{% include ui/icon.html icon="send" class="dropdown-icon" %} Message
</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">
{% include ui/icon.html icon="help-circle" class="dropdown-icon" %} Need help?
</a>
<a class="dropdown-item" href="#">
{% include ui/icon.html icon="log-out" class="dropdown-icon" %} Sign out
</a>
</div>
</li>
{% endif %}
{% if include.manage %}
<li class="nav-item">
<a href="#" class="btn btn-secondary">Manage Widgets</a>
</li>
{% endif %}
{% if include.register %}
<li class="nav-item ">
<a href="#" class="nav-link">
Sign in
</a>
</li>
<li class="d-flex align-items-center">
<a href="#" class="btn btn-pill btn-sm btn-primary d-none d-lg-block">
Register
</a>
</li>
{% endif %}
{% if include.plus %}
<li class="nav-item">
<a href="#" class="btn btn-primary btn-icon">{% include ui/icon.html icon="plus" %}</a>
</li>
{% endif %}
{% if include.premium %}
<li class="nav-item">
<a href="#" class="btn btn-success">Go Premium</a>
</li>
{% endif %}
{% if include.sync %}
<li class="nav-item">
<a href="#" class="btn btn-secondary">{% include ui/icon.html icon="rotate-cw" class="mr-2" %}Sync</a>
</li>
{% endif %}
{% if include.language %}
<li class="nav-item dropdown">
<a href="#" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown">
<span class="flag flag-gb mr-2"></span>English
</a>
<div class="dropdown-menu dropdown-menu-right dropdown-menu-scrollable">
{% for language in site.data.languages %}
<a href="#" class="dropdown-item"><span class="flag flag-{{ language.flag }} mr-2"></span>{{
language.name }}</a>
{% endfor %}
</div>
</li>
{% endif %}
<div class="collapse navbar-collapse order-2 order-lg-1" id="navbarToggler">
{% if include.big-menu %}
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Homepage</a>
</li>
<li class="nav-item dropdown">
<div class="dropdown">
<a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown">Pages</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="##">App Pages</a>
<a class="dropdown-item" href="#">Utility Pages</a>
<a class="dropdown-item" href="#">Layouts</a>
</div>
</div>
</li>
<li class="nav-item">
<div class="dropdown">
<a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown">Components</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Bootstrap</a>
<a class="dropdown-item" href="#">Pipeline</a>
</div>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Documentation</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Changelog</a>
</li>
</ul>
{% endif %}
{% if include.search %}
<!-- Navbar Search -->
<form class="input-group m-2 my-lg-0 ">
<span class="input-group-prepend">
<button type="button"
class="btn no-shadow no-bg px-0">{% include ui/icon.html icon="search" %}</button>
</span>
<input type="text" class="form-control no-border no-shadow no-bg typeahead" placeholder="Search..."
data-plugin="typeahead">
</form>
{% endif %}
</div>
<ul class="nav navbar-menu order-1 order-lg-2">
{% if include.fullscreen %}
<li class="nav-item d-none d-sm-block">
<a class="nav-link px-2" data-toggle="fullscreen" data-title="Fullscreen">
{% include ui/icon.html icon="maximize" %}
</a>
</li>
{% endif %}
{% if include.customize %}
<li class="nav-item dropdown">
<a class="nav-link px-2" data-toggle="dropdown">
{% include ui/icon.html icon="droplet" %}
<span class="badge badge-pill badge-up bg-success"></span>
</a>
</li>
{% endif %}
{% if include.notifications %}
<!-- Notification -->
<li class="nav-item dropdown">
<a class="nav-link px-2" data-toggle="dropdown">
{% include ui/icon.html icon="bell" %}
<span class="badge badge-pill badge-up bg-primary">4</span>
</a>
<div class="dropdown-menu dropdown-menu-right mt-3 p-0">
<div class="scrollable">
<div class="list list-row">
</div>
</div>
<div class="d-flex px-3 py-2 b-t">
<div class="flex">
<span>6 Notifications</span>
</div>
<a href="#">See all <i class="fa fa-angle-right text-muted"></i></a>
</div>
</div>
</li>
{% endif %}
{% if include.progress %}
<li class="nav-item">
<a href="#" class="nav-link text-muted-light">
Profile Completeness: 70%
<!--<span class="progress progress-xs">-->
<!--<span class="progress-bar" style="width: 70%"></span>-->
<!--</span>-->
</a>
</li>
{% endif %}
{% if include.user-menu %}
<li class="nav-item dropdown">
<a href="#" data-toggle="dropdown"
class="nav-link d-flex align-items-center py-0 px-lg-0 px-2 text-color ml-2">
{% if include.user-menu == 1 %}
{% include ui/avatar.html src=person.photo %}
<span class="ml-2 d-none d-lg-block leading-none">
<span>{{ person.full_name }}</span>
<span class="text-muted d-block mt-1 text-h6">Administrator</span>
</span>
{% elsif include.user-menu == 2 %}
<span class="mx-2 d-none leading-none d-lg-block text-right">
<span class="text-default">{{ person.full_name }}</span>
</span>
{% include ui/avatar.html src=person.photo %}
{% elsif include.user-menu == 3 %}
{% include ui/avatar.html src=person.photo %}
{% elsif include.user-menu == 4 %}
<span class="btn btn-secondary">{% include ui/avatar.html src=person.photo class="mr-2 btn-avatar" %}{{ person.full_name }}</span>
{% endif %}
</a>
<div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
<a class="dropdown-item" href="#">
{% include ui/icon.html icon="user" class="dropdown-icon" %} Profile
</a>
<a class="dropdown-item" href="#">
{% include ui/icon.html icon="settings" class="dropdown-icon" %} Settings
</a>
<a class="dropdown-item" href="#">
<span class="float-right"><span class="badge badge-primary">6</span></span>
{% include ui/icon.html icon="mail" class="dropdown-icon" %} Inbox
</a>
<a class="dropdown-item" href="#">
{% include ui/icon.html icon="send" class="dropdown-icon" %} Message
</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">
{% include ui/icon.html icon="help-circle" class="dropdown-icon" %} Need help?
</a>
<a class="dropdown-item" href="#">
{% include ui/icon.html icon="log-out" class="dropdown-icon" %} Sign out
</a>
</div>
</li>
{% endif %}
{% if include.manage %}
<li class="nav-item">
<a href="#" class="btn btn-secondary">Manage Widgets</a>
</li>
{% endif %}
{% if include.register %}
<li class="nav-item ">
<a href="#" class="nav-link">
Sign in
</a>
</li>
<li class="d-flex align-items-center">
<a href="#" class="btn btn-pill btn-sm btn-primary d-none d-lg-block">
Register
</a>
</li>
{% endif %}
{% if include.plus %}
<li class="nav-item">
<a href="#" class="btn btn-primary btn-icon">{% include ui/icon.html icon="plus" %}</a>
</li>
{% endif %}
{% if include.premium %}
<li class="nav-item">
<a href="#" class="btn btn-success">Go Premium</a>
</li>
{% endif %}
{% if include.sync %}
<li class="nav-item">
<a href="#" class="btn btn-secondary">{% include ui/icon.html icon="rotate-cw" class="mr-2" %}Sync</a>
</li>
{% endif %}
{% if include.language %}
<li class="nav-item dropdown">
<a href="#" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown">
<span class="flag flag-gb mr-2"></span>English
</a>
<div class="dropdown-menu dropdown-menu-right dropdown-menu-scrollable">
{% for language in site.data.languages %}
<a href="#" class="dropdown-item"><span class="flag flag-{{ language.flag }} mr-2"></span>{{
language.name }}</a>
{% endfor %}
</div>
</li>
{% endif %}
<li class="nav-item d-lg-none">
<a href="#" class="nav-link px-1" data-toggle="collapse" data-toggle-class=""
data-target="#navbarToggler">
{% include ui/icon.html icon="menu" %}
</a>
</li>
</ul>
</div>
<li class="nav-item d-lg-none">
<a href="#" class="nav-link px-1" data-toggle="collapse" data-toggle-class=""
data-target="#navbarToggler">
{% include ui/icon.html icon="menu" %}
</a>
</li>
</ul>
</div>

4
pages/_layouts/base.html
View File

@@ -20,8 +20,8 @@
<title>{% if page.title %}{{ page.title }} - {% endif %}{% if layout.title %}{{ layout.title }} - {% endif %}{% if site.title %}{{ site.title }} - {% endif %}{{ site.description }}</title>
{% include_cached layout/css.html %}
{% include_cached layout/js.html %}
{% include layout/css.html %}
{% include layout/js.html %}
</head>
<body class="antialiased{% if page.dark-theme %} theme-dark{% endif %}{% if layout.body-class %} {{ layout.body-class }}{% endif %}{% if page.body-class %} {{ page.body-class }}{% endif %}">

10
pages/_layouts/default.html
View File

@@ -3,10 +3,18 @@ layout: base
---
<div class="d-flex h-auto min-h-screen">
{% if page.nav-position == "left" or page.nav-position == "right" %}
{% include layout/sidenav.html %}
{% endif %}
<div class="flex-fill d-flex flex-column mw-100">
{% include_cached layout/header.html %}
{{ page.header-dark }}
{% include layout/header.html dark=page.header-dark %}
{% if page.nav-position == "top" %}
{% include layout/topnav.html %}
{% endif %}
<div class="d-flex flex-fill">

4
pages/header-dark.html Normal file
View File

@@ -0,0 +1,4 @@
---
title: Dark header
header-dark: true
---

5
pages/navbar-left.html Normal file
View File

@@ -0,0 +1,5 @@
---
title: Sidebar left
menu: layout.sidebar-left
nav-position: left
---

5
pages/navbar-right.html Normal file
View File

@@ -0,0 +1,5 @@
---
title: Sidebar right
menu: layout.sidebar-right
nav-position: right
---

3
pages/navbar-top.html Normal file
View File

@@ -0,0 +1,3 @@
---
title: Navbar top
---

4
pages/sidebar.html
View File

@@ -1,4 +0,0 @@
---
title: Sidebar
body-class: sidebar-folded
---

4
scss/_variables.scss
View File

@@ -105,9 +105,9 @@ $avatar-sizes: (
"xl": 6rem
) !default;
$font-size-base: .9375rem !default;
$font-size-base: 1rem !default;
$font-weight-base: 400 !default;
$line-height-base: (24 / 15) !default;
$line-height-base: 1.5 !default;
$border-radius: 3px !default;