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
description: Premium and Open Source dashboard template with responsive and high quality UI.
debug: true
debug: false
plugins:
- jekyll-random

6
pages/_data/menu.yml
View File

@@ -34,12 +34,18 @@ layout:
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

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

@@ -19,7 +19,7 @@
</span>
</a>
{% 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">
{% if level-1[1].docs %}
@@ -52,7 +52,7 @@
</span>
</a>
{% 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">
{% for level-3 in level-2[1].children %}
<li class="nav-item">
@@ -66,7 +66,7 @@
</a>
{% 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">
{% for level-4 in level-3[1].children %}
<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 %}
</header>
{% 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">
{% include layout/menu.html top=true %}
</div>
</header>
</div>
{% endif %}

2
pages/_layouts/base.html
View File

@@ -23,7 +23,7 @@
{% 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 %}">
<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}}

12
pages/_layouts/default.html
View File

@@ -2,6 +2,10 @@
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 flex-fill">
{% if page.nav-position == "all" %}
@@ -9,11 +13,13 @@ layout: base
{% endif %}
{% 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 %}
<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">
@@ -27,6 +33,4 @@ layout: base
</div>
</div>
</div>
</div>

1
pages/index.html
View File

@@ -1,6 +1,7 @@
---
title: Dashboard
page-title: Dashboard
header-primary: false
---
{% 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;
transition: .3s background, .3s box-shadow;
&.active,
&[aria-expanded=true],
&:hover {
color: $body-color;
background: rgba($link-color, .04);
border-color: $primary;
box-shadow: inset 2px 0 0 0 $primary;
@@ -151,11 +150,6 @@ Sidebar
}
&[data-toggle="collapse"] {
&.active {
background: none;
box-shadow: none;
}
&:after {
display: block;
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) {
.nav-item .nav-item .nav-link {
padding-left: 2.5rem;
@@ -226,12 +227,6 @@ Dark navbar
.nav-link {
color: inherit;
&.active,
&:hover {
color: $white;
background: rgba($white, .04);
}
}
}
@@ -283,6 +278,21 @@ Folded navbar
opacity: 1;
justify-content: center;
}
.navbar-subnav {
position: absolute;
left: 100%;
top: 0;
background: #fff;
.nav-text {
display: block;
}
.nav-link {
color: $body-color;
}
}
}
.nav-icon {