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

navigation refactoring

Browse Source
This commit is contained in:
codecalm
2019-10-28 10:51:40 +01:00
parent df6718f1ed
commit 0ad2c38c61
21 changed files with 360 additions and 327 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pages/_data/layouts.yml
+24
View File
@@ -0,0 +1,24 @@
- name: sidebar-left
title: Left sidebar
url: layout-navbar-left.html
- name: sidebar-right
title: Right sidebar
url: layout-navbar-right.html
- name: sidebar-dark
title: Dark sidebar
url: layout-navbar-dark.html
- name: sidebar-folded
title: Folded sidebar
url: layout-navbar-folded.html
- name: navbar-top
title: Navbar top
url: layout-navbar-top.html
- name: header-dark
title: Dark header
url: layout-header-dark.html
- name: header-sticky
title: Sticky header
url: layout-header-sticky.html
- name: dark-mode
title: Dark mode
url: layout-dark-mode.html
pages/_data/menu.yml
+3 -40
View File
@@ -18,47 +18,10 @@ charts:
title: Charts
icon: pie-chart
level-1:
title: Level 1
icon: menu
children:
level-2:
title: Level 2
children:
level-3:
title: Level 3
children:
level-4:
title: Level 4
layout:
title: Layout
layouts:
title: Layouts
icon: layout
children:
sidebar-left:
title: Left sidebar
url: layout-navbar-left.html
sidebar-right:
title: Right sidebar
url: layout-navbar-right.html
sidebar-white:
title: White sidebar
url: layout-navbar-white.html
sidebar-folded:
title: Folded sidebar
url: layout-navbar-folded.html
navbar-top:
title: Navbar top
url: layout-navbar-top.html
header-dark:
title: Dark header
url: layout-header-dark.html
header-sticky:
title: Sticky header
url: layout-header-sticky.html
dark-mode:
title: Dark mode
url: layout-dark-mode.html
url: layouts.html
docs:
title: Documentation
pages/_includes/layout/layouts.html
+9
View File
@@ -0,0 +1,9 @@
<div class="card">
<div class="card-body">
{% for layout in site.data.layouts %}
<a href="{{ layout.url }}" class="d-block">
{{ layout.title }}
</a>
{% endfor %}
</div>
</div>
pages/_includes/layout/menu.html
+26 -59
View File
@@ -1,11 +1,17 @@
{% removeemptylines %}
{% assign side = false %}
<ul class="navbar-nav{% if include.class %} {{ include.class }}{% endif %}">
{% assign current-page = page.menu | default: layout.menu | split: '.' %}
{% for level-1 in site.data.menu %}
{% assign icon = level-1[1].icon %}
<li class="nav-item{% if level-1[0] == current-page[0] %} active{% endif %}{% if level-1[1].children or level-1[1].docs %} dropdown{% endif %}">
<a class="nav-link{% if level-1[1].children or level-1[1].docs %} dropdown-toggle{% endif %}" {% if level-1[1].children or level-1[1].docs %}href="#sidebar-{{ level-1[0] }}" data-toggle="dropdown" role="button" aria-expanded="{% if level-1[0] == current-page[0] %}true{% else %}false{% endif %}"{% elsif level-1[1].toggle %}href="{{ level-1[1].url }}" data-toggle="{{ level-1[1].toggle }}"{% else %}href="{{ site.base }}/{{ level-1[1].url }}"{% endif %}>
<li
class="nav-item{% if level-1[0] == current-page[0] %} active{% endif %}{% if level-1[1].children or level-1[1].docs %} {% if side %}dropright{% else %}dropdown{% endif %}{% endif %}">
<a class="nav-link{% if level-1[1].children or level-1[1].docs %} dropdown-toggle{% endif %}" {% if
level-1[1].children or level-1[1].docs %}href="#sidebar-{{ level-1[0] }}" data-toggle="dropdown" role="button"
aria-expanded="{% if level-1[0] == current-page[0] %}true{% else %}false{% endif %}" {% elsif level-1[1].toggle
%}href="{{ level-1[1].url }}" data-toggle="{{ level-1[1].toggle }}" {% else
%}href="{{ site.base }}/{{ level-1[1].url }}" {% endif %}>
<span class="nav-icon">
{% include ui/icon.html icon=icon %}
</span>
@@ -20,75 +26,36 @@
</span>
</a>
{% if level-1[1].children or level-1[1].docs %}
<ul class="dropdown-menu">
<div class="dropdown-menu">
{% if level-1[1].docs %}
{% for d in site.data.docs %}
{% assign doc = site.docs | where: "slug", d.page | first %}
{% if doc %}
<li class="nav-item{% if current-page[0] == 'docs' and current-page[1] == doc.slug %} active{% endif %}{% if level-1[1].children %} dropdown{% endif %}">
<a href="{{ site.base }}/docs/{{ doc.slug }}.html" class="nav-link">
<span class="nav-text">
{{ doc.title }}
<a class="dropdown-item{% if current-page[0] == 'docs' and current-page[1] == doc.slug %} active{% endif %}{% if level-1[1].children %} dropdown{% endif %}">
<span class="nav-text">
{{ doc.title }}
{% if doc.new %}
<span class="badge bg-primary text-white ml-auto text-uppercase">new</span>
{% endif %}
</span>
</a>
</li>
{% if doc.new %}
<span class="badge bg-primary text-white ml-auto text-uppercase">new</span>
{% endif %}
</span>
</a>
{% endif %}
{% endfor %}
{% endif %}
{% for level-2 in level-1[1].children %}
<li class="nav-item{% if level-2[0] == current-page[1] %} active{% endif %}{% if level-2[1].children %} dropdown{% endif %}">
<a class="nav-link" {% if level-2[1].children %}href="#sidebar-{{ level-2[0] }}" data-toggle="dropdown" role="button" aria-expanded="false"{% else %}href="{{ site.base }}/{{ level-2[1].url }}"{% endif %}>
<span class="nav-text">
{{ level-2[1].title }}
{% if level-2[1].label %}
<span class="badge bg-{{ level-2[1].label-color | default: 'primary' }} text-white ml-auto">{{ level-2[1].label }}</span>
{% endif %}
</span>
</a>
{% if level-2[1].children %}
<ul class="dropdown-menu">
{% for level-3 in level-2[1].children %}
<li class="nav-item{% if level-3[0] == current-page[2] %} active{% endif %}">
<a class="nav-link" {% if level-3[1].children %}href="#sidebar-{{ level-3[0] }}" data-toggle="dropdown" role="button" aria-expanded="false"{% else %}href="{{ site.base }}/{{ level-3[1].url }}"{% endif %}>
<span class="nav-text">
{{ level-3[1].title }}
{% if level-3[1].label %}
<span class="badge bg-{{ level-3[1].label-color | default: 'primary' }} text-white ml-auto">{{ level-3[1].label }}</span>
{% endif %}
</span>
</a>
{% if level-3[1].children %}
<div class="navbar-subnav collapse">
<ul class="nav nav-sm flex-column">
{% for level-4 in level-3[1].children %}
<li class="nav-item{% if level-4[0] == current-page[3] %} active{% endif %}">
<a class="nav-link" href="{% if level-4[1].url %}{{ site.base }}/{{ level-4[1].url }}{% else %}#{% endif %}">
<span class="nav-text">
{{ level-4[1].title }}
{% if level-4[1].label %}
<span class="badge bg-{{ level-4[1].label-color | default: 'primary' }} text-white ml-auto">{{ level-4[1].label }}</span>
{% endif %}
</span>
</a>
</li>
{% endfor %}
</ul>
</div>
{% endif %}
</li>
{% endfor %}
</ul>
{% endif %}
</li>
<a class="dropdown-item" {% if level-2[1].children %}href="#sidebar-{{ level-2[0] }}" data-toggle="dropdown" role="button" aria-expanded="false" {% else %}href="{{ site.base }}/{{ level-2[1].url }}" {% endif %}>
<span class="nav-text">
{{ level-2[1].title }}
{% if level-2[1].label %}
<span class="badge bg-{{ level-2[1].label-color | default: 'primary' }} text-white ml-auto">{{ level-2[1].label }}</span>
{% endif %}
</span>
</a>
{% endfor %}
</ul>
</div>
{% endif %}
</li>
{% endfor %}
pages/_includes/layout/sidenav-content.html
+6 -12
View File
@@ -1,21 +1,15 @@
{% assign id = 0 | random_id %}
<div class="pb-3">
<a href="{{ site.base }}" class="navbar-brand text-reset">
<img src="{{ site.base }}/img/logo{% if include.white %}-white{% endif %}.svg" alt="" class="hide-navbar-folded navbar-brand-logo">
<img src="{{ site.base }}/img/logo-small{% if include.white %}-white{% endif %}.svg" alt="" class="hide-navbar-expanded navbar-brand-logo">
</a>
</div>
<a href="{{ site.base }}" class="navbar-brand">
<img src="{{ site.base }}/img/logo{% if include.dark %}-white{% endif %}.svg" alt="" class="hide-navbar-folded navbar-brand-logo">
<img src="{{ site.base }}/img/logo-small{% if include.dark %}-white{% endif %}.svg" alt="" class="hide-navbar-expanded navbar-brand-logo">
</a>
<div class="flex-fill">
<h6 class="navbar-heading">
Docs
</h6>
<h6 class="navbar-heading">Docs</h6>
{% include layout/menu.html menu=include.menu class="mb-md-4" %}
<h6 class="navbar-heading">
Other
</h6>
<h6 class="navbar-heading">Other</h6>
</div>
pages/_includes/layout/sidenav.html
+2 -3
View File
@@ -1,7 +1,6 @@
{% assign menu = page.menu | default: layout.menu %}
<aside class="navbar navbar-side{% if include.dark %} navbar-dark{% endif %}{% if include.fixed %} navbar-fixed{% endif %}{% if include.right %} navbar-right{% endif %}{% if include.folded %} navbar-folded{% endif %} js-sidebar">
<aside class="navbar navbar-side {% if include.dark %}navbar-dark bg-dark text-white{% else %}navbar-light{% endif %}{% if include.fixed %} navbar-fixed{% endif %}{% if include.right %} navbar-right{% endif %}{% if include.folded %} navbar-folded{% endif %} js-sidebar" id="sidebar">
{% unless include.empty %}
{% include layout/sidenav-content.html menu=menu %}
{% include layout/sidenav-content.html menu=menu dark=include.dark %}
{% endunless %}
</aside>
<div class="navbar-bg"></div>
pages/_includes/layout/topnav.html
+1 -1
View File
@@ -1,4 +1,4 @@
<header class="navbar navbar-expand-lg {% if include.dark %}navbar-dark{% else %}navbar-light{% endif %}{% if include.sticky %} navbar-sticky{% endif %}">
<header class="navbar navbar-expand-lg {% if include.dark %}navbar-dark bg-dark text-white{% else %}navbar-light{% endif %}{% if include.sticky %} navbar-sticky{% endif %}">
<div class="container{% if include.fluid %} container-fluid{% endif %}">
{% include parts/navbar.html logo=true search=true user-menu=1 person=1 dark=include.dark notifications=true %}
</div>
pages/_layouts/default.html
+5 -4
View File
@@ -2,13 +2,14 @@
layout: base
---
<div class="d-flex flex-row h-100p">
{% comment %}{% include layout/sidenav.html dark=true folded=false fixed=true %}{% endcomment %}
<div class="layout d-flex flex-row vh-100">
{% if page.nav-side %}
{% include layout/sidenav.html dark=page.nav-dark folded=page.nav-folded fixed=page.nav-fixed right=page.nav-right %}
{% endif %}
<div class="layout-main d-flex flex-column flex-fill max-w-full">
{% unless page.nav-side %}
{% include layout/topnav.html dark=page.header-dark sticky=page.header-sticky %}
{% unless page.nav-position == 'left' or page.nav-position == 'right'%}
{% include layout/topmenu.html %}
{% endunless %}
pages/layout-dark-mode.html
+2
View File
@@ -2,5 +2,7 @@
title: Dark mode
dark-theme: true
page-title: Dashboard
menu: layouts
---
{% include layout/layouts.html %}
pages/layout-header-dark.html
+2
View File
@@ -2,5 +2,7 @@
title: Dark header
header-dark: true
page-title: Dashboard
menu: layouts
---
{% include layout/layouts.html %}
pages/layout-header-sticky.html
+2
View File
@@ -3,5 +3,7 @@ title: Sticky header
menu: layout.header-sticky
page-title: Dashboard
header-sticky: true
menu: layouts
---
{% include layout/layouts.html %}
pages/layout-navbar-white.html → pages/layout-navbar-dark.html
+4 -1
View File
@@ -1,7 +1,10 @@
---
title: Sidebar white
menu: layout.sidebar-white
nav-position: left
nav-side: true
nav-dark: true
page-title: Dashboard
menu: layouts
---
{% include layout/layouts.html %}
pages/layout-navbar-folded.html
+5 -3
View File
@@ -1,9 +1,11 @@
---
title: Folded sidebar
menu: layout.sidebar-folded
nav-position: left
nav-side: true
nav-folded: true
nav-dark: true
page-title: Dashboard
sidenav-folded: true
sidenav-dark: true
menu: layouts
---
{% include layout/layouts.html %}
pages/layout-navbar-left.html
+3 -2
View File
@@ -1,8 +1,9 @@
---
title: Sidebar left
menu: layout.sidebar-left
nav-position: left
nav-side: true
page-title: Dashboard
sidenav-dark: true
menu: layouts
---
{% include layout/layouts.html %}
pages/layout-navbar-right.html
+4 -2
View File
@@ -1,8 +1,10 @@
---
title: Sidebar right
menu: layout.sidebar-right
nav-position: right
nav-side: true
nav-right: true
page-title: Dashboard
sidenav-dark: true
menu: layouts
---
{% include layout/layouts.html %}
pages/layout-navbar-top.html
+2
View File
@@ -1,5 +1,7 @@
---
title: Navbar top
page-title: Dashboard
menu: layouts
---
{% include layout/layouts.html %}
pages/layouts.html
+6
View File
@@ -0,0 +1,6 @@
---
page-title: Page Layouts
menu: layouts
---
{% include layout/layouts.html %}