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

header-primary switch

Browse Source
This commit is contained in:
codecalm
2019-07-01 22:21:18 +02:00
parent 0537dc1be6
commit 736b4ac035
10 changed files with 64 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
_config.yml
View File

@@ -4,7 +4,7 @@ destination: tmp
title: UI Kit title: UI Kit
description: Premium and Open Source dashboard template with responsive and high quality UI. description: Premium and Open Source dashboard template with responsive and high quality UI.
debug: true debug: false
plugins: plugins:
- jekyll-random - jekyll-random

6
pages/_data/menu.yml
View File

@@ -34,12 +34,18 @@ layout:
sidebar-white: sidebar-white:
title: White sidebar title: White sidebar
url: layout-navbar-white.html url: layout-navbar-white.html
sidebar-folded:
title: Folded sidebar
url: layout-navbar-folded.html
navbar-top: navbar-top:
title: Navbar top title: Navbar top
url: layout-navbar-top.html url: layout-navbar-top.html
header-dark: header-dark:
title: Dark header title: Dark header
url: layout-header-dark.html url: layout-header-dark.html
header-sticky:
title: Sticky header
url: layout-header-sticky.html
dark-mode: dark-mode:
title: Dark mode title: Dark mode
url: layout-dark-mode.html url: layout-dark-mode.html

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

@@ -19,7 +19,7 @@
</span> </span>
</a> </a>
{% if level-1[1].children or level-1[1].docs %} {% if level-1[1].children or level-1[1].docs %}
<div class="navbar-subnav collapse{% if level-1[0] == current-page[0] %} show{% endif %}" id="sidebar-{{ level-1[0] }}"> <div class="navbar-subnav collapse" id="sidebar-{{ level-1[0] }}">
<ul class="nav"> <ul class="nav">
{% if level-1[1].docs %} {% if level-1[1].docs %}
@@ -52,7 +52,7 @@
</span> </span>
</a> </a>
{% if level-2[1].children %} {% if level-2[1].children %}
<div class="navbar-subnav collapse{% if level-2[0] == current-page[1] %} show{% endif %}" id="sidebar-{{ level-2[0] }}"> <div class="navbar-subnav collapse" id="sidebar-{{ level-2[0] }}">
<ul class="nav nav-sm flex-column"> <ul class="nav nav-sm flex-column">
{% for level-3 in level-2[1].children %} {% for level-3 in level-2[1].children %}
<li class="nav-item"> <li class="nav-item">
@@ -66,7 +66,7 @@
</a> </a>
{% if level-3[1].children %} {% if level-3[1].children %}
<div class="navbar-subnav collapse{% if level-3[0] == current-page[2] %} show{% endif %}" id="sidebar-{{ level-3[0] }}"> <div class="navbar-subnav collapse" id="sidebar-{{ level-3[0] }}">
<ul class="nav nav-sm flex-column"> <ul class="nav nav-sm flex-column">
{% for level-4 in level-3[1].children %} {% for level-4 in level-3[1].children %}
<li class="nav-item"> <li class="nav-item">

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

@@ -1,11 +1,11 @@
<header class="navbar navbar-expand-md{% if include.dark %} navbar-dark{% endif %} navbar-sticky"> <header class="navbar navbar-expand-md{% if include.dark %} navbar-dark{% endif %}{% if include.sticky %} navbar-sticky{% endif %}">
{% include parts/navbar.html logo=true search=true user-menu=1 person=1 dark=include.dark %} {% include parts/navbar.html logo=true search=true user-menu=1 person=1 dark=include.dark %}
</header> </header>
{% if page.nav-position == "top" or page.nav-position == "all" %} {% if page.nav-position == "top" or page.nav-position == "all" %}
<header class="navbar navbar-expand-md"> <div class="navbar navbar-expand-md">
<div class="container"> <div class="container">
{% include layout/menu.html top=true %} {% include layout/menu.html top=true %}
</div> </div>
</header> </div>
{% endif %} {% endif %}

2
pages/_layouts/base.html
View File

@@ -23,7 +23,7 @@
{% include layout/css.html %} {% include layout/css.html %}
{% include 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="d-flex flex-column antialiased {% if page.dark-theme %} theme-dark{% endif %}{% if layout.body-class %} {{ layout.body-class }}{% endif %}{% if page.body-class %} {{ page.body-class }}{% endif %}">
{{ content}} {{ content}}

12
pages/_layouts/default.html
View File

@@ -2,6 +2,10 @@
layout: base layout: base
--- ---
{% if page.header-primary %}
{% include layout/topnav.html dark=page.header-dark sticky=page.header-sticky %}
{% endif %}
<div class="d-flex h-auto min-h-screen"> <div class="d-flex h-auto min-h-screen">
<div class="d-flex flex-fill"> <div class="d-flex flex-fill">
{% if page.nav-position == "all" %} {% if page.nav-position == "all" %}
@@ -9,11 +13,13 @@ layout: base
{% endif %} {% endif %}
{% if page.nav-position == "left" or page.nav-position == "right" or page.nav-position == "all" %} {% if page.nav-position == "left" or page.nav-position == "right" or page.nav-position == "all" %}
{% include layout/sidenav.html dark=page.sidenav-dark %} {% include layout/sidenav.html dark=page.sidenav-dark folded=page.sidenav-folded %}
{% endif %} {% endif %}
<div class="main-content flex-fill d-flex flex-column max-w-full"> <div class="main-content flex-fill d-flex flex-column max-w-full">
{% include layout/topnav.html dark=page.header-dark %} {% unless page.header-primary %}
{% include layout/topnav.html dark=page.header-dark sticky=page.header-sticky %}
{% endunless %}
<div class="d-flex flex-fill max-w-full"> <div class="d-flex flex-fill max-w-full">
@@ -27,6 +33,4 @@ layout: base
</div> </div>
</div> </div>
</div> </div>
</div> </div>

1
pages/index.html
View File

@@ -1,6 +1,7 @@
--- ---
title: Dashboard title: Dashboard
page-title: Dashboard page-title: Dashboard
header-primary: false
--- ---
{% include_cached layout/homepage.html %} {% include_cached layout/homepage.html %}

8
pages/layout-header-sticky.html Normal file
View File

@@ -0,0 +1,8 @@
---
title: Sticky header
menu: layout.header-sticky
page-title: Dashboard
header-sticky: true
---
{% include_cached layout/homepage.html %}

10
pages/layout-navbar-folded.html Normal file
View File

@@ -0,0 +1,10 @@
---
title: Folded sidebar
menu: layout.sidebar-folded
nav-position: left
page-title: Dashboard
sidenav-folded: true
sidenav-dark: true
---
{% include_cached layout/homepage.html %}

36
scss/layout/_navbar.scss
View File

@@ -138,9 +138,8 @@ Sidebar
box-shadow: inset 2px 0 0 0 transparent; box-shadow: inset 2px 0 0 0 transparent;
transition: .3s background, .3s box-shadow; transition: .3s background, .3s box-shadow;
&.active, &[aria-expanded=true],
&:hover { &:hover {
color: $body-color;
background: rgba($link-color, .04); background: rgba($link-color, .04);
border-color: $primary; border-color: $primary;
box-shadow: inset 2px 0 0 0 $primary; box-shadow: inset 2px 0 0 0 $primary;
@@ -151,11 +150,6 @@ Sidebar
} }
&[data-toggle="collapse"] { &[data-toggle="collapse"] {
&.active {
background: none;
box-shadow: none;
}
&:after { &:after {
display: block; display: block;
font-family: $font-icons !important; font-family: $font-icons !important;
@@ -170,6 +164,13 @@ Sidebar
} }
} }
&:not(.navbar-folded) {
&[data-toggle="collapse"][aria-expanded=true] {
background: none;
box-shadow: none;
}
}
&:not(.hide-navbar-folded) { &:not(.hide-navbar-folded) {
.nav-item .nav-item .nav-link { .nav-item .nav-item .nav-link {
padding-left: 2.5rem; padding-left: 2.5rem;
@@ -226,12 +227,6 @@ Dark navbar
.nav-link { .nav-link {
color: inherit; color: inherit;
&.active,
&:hover {
color: $white;
background: rgba($white, .04);
}
} }
} }
@@ -283,6 +278,21 @@ Folded navbar
opacity: 1; opacity: 1;
justify-content: center; justify-content: center;
} }
.navbar-subnav {
position: absolute;
left: 100%;
top: 0;
background: #fff;
.nav-text {
display: block;
}
.nav-link {
color: $body-color;
}
}
} }
.nav-icon { .nav-icon {