Mirrors/tabler
1
0
Fork 0
mirror of https://github.com/tabler/tabler.git synced 2026-07-29 14:34:37 +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
pages/_includes/layout/header.html
+2 -2
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>
pages/_includes/layout/menu.html
+1 -1
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 %}
pages/_includes/layout/sidenav-content.html
+1 -1
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" %}
pages/_includes/layout/sidenav.html
+1 -1
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>
pages/_includes/layout/topnav.html
+2 -6
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>
pages/_includes/parts/navbar.html
+221 -223
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>