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 type: pages
values: values:
layout: default layout: default
nav-position: top
- -
scope: scope:
type: docs type: docs

2
package.json
View File

@@ -7,7 +7,7 @@
"build": "npm-run-all lint html-build css-compile js-compile", "build": "npm-run-all lint html-build css-compile js-compile",
"bundlesize": "bundlesize", "bundlesize": "bundlesize",
"browsersync": "node build/browsersync.js", "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", "html-build": "JEKYLL_ENV=production bundle exec jekyll build",
"lint": "npm-run-all --parallel js-lint css-lint", "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", "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: children:
level-2: level-2:
title: Level 2 title: Level 2
icon: menu
children: children:
level-3: level-3:
title: Level 3 title: Level 3
icon: menu
children: children:
level-4: level-4:
title: 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: docs:
title: Documentation title: Documentation
icon: file-text icon: file-text

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

@@ -1,3 +1,3 @@
<header class="header"> <header class="header{% if include.dark %} bg-dark text-white{% endif %}">
{% include parts/navbar.html logo=true user-menu=1 person=5 dark=false %} {% include parts/navbar.html logo=true user-menu=1 person=5 dark=false white-logo=include.dark %}
</header> </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: '.' %} {% assign current-page = include.menu | split: '.' %}
{% for level-1 in site.data.menu %} {% for level-1 in site.data.menu %}

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

@@ -10,4 +10,4 @@
Docs Docs
</h6> </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 %} {% 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 %} {% include layout/sidenav-content.html white=true menu=menu %}
</div> </div>

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

@@ -1,9 +1,5 @@
<div class="topnav"> <div class="topnav">
<div class="container-fluid"> <div class="container">
<nav class="navbar navbar-expand-lg topnav-menu"> {% include layout/menu.html %}
<div class="navbar-collapse active collapse show" id="topnav-menu-content" style="">
{% include layout/menu.html %}
</div>
</nav>
</div> </div>
</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 = site.data.people | where: "id", include.person %}
{% assign person = person[0] %} {% assign person = person[0] %}
<div class="navbar navbar-expand-lg{% if include.dark %} navbar-dark bg-dark{% endif %}"> <div class="navbar container{% if include.fluid %}-fluid{% endif %} 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">
<a class="d-lg-none px-1" data-toggle="modal" data-target="#aside"> {% include ui/icon.html icon="menu" %}
{% include ui/icon.html icon="menu" %} </a>
</a>
<a href="{{ site.base }}" class="navbar-brand text-inherit"> <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.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.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.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 %} {% if include.title %}<span class="d-inline">{{ include.title }}</span>{% endif %}
</a> </a>
{% if include.plus-left %} {% if include.plus-left %}
<a href="#" class="btn btn-primary"> <a href="#" class="btn btn-primary">
{% include ui/icon.html icon="plus" %} {% include ui/icon.html icon="plus" %}
</a> </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 %} {% endif %}
<div class="collapse navbar-collapse order-2 order-lg-1" id="navbarToggler"> <li class="nav-item d-lg-none">
{% if include.big-menu %} <a href="#" class="nav-link px-1" data-toggle="collapse" data-toggle-class=""
<ul class="navbar-nav"> data-target="#navbarToggler">
<li class="nav-item"> {% include ui/icon.html icon="menu" %}
<a class="nav-link" href="#">Homepage</a> </a>
</li> </li>
</ul>
<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>
</div> </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> <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 layout/css.html %}
{% include_cached layout/js.html %} {% include layout/js.html %}
</head> </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 %}"> <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"> <div class="d-flex h-auto min-h-screen">
{% if page.nav-position == "left" or page.nav-position == "right" %}
{% include layout/sidenav.html %} {% include layout/sidenav.html %}
{% endif %}
<div class="flex-fill d-flex flex-column mw-100"> <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"> <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 "xl": 6rem
) !default; ) !default;
$font-size-base: .9375rem !default; $font-size-base: 1rem !default;
$font-weight-base: 400 !default; $font-weight-base: 400 !default;
$line-height-base: (24 / 15) !default; $line-height-base: 1.5 !default;
$border-radius: 3px !default; $border-radius: 3px !default;