mirror of
https://github.com/tabler/tabler.git
synced 2026-07-27 05:24:38 +04:00
navbar layout refactor
This commit is contained in:
codecalm
@@ -6,7 +6,7 @@
|
||||
{% assign icon = level-1[1].icon %}
|
||||
|
||||
{% assign has-children = false %}
|
||||
{% if level-1[1].children or level-1[1].docs %}
|
||||
{% if level-1[1].children %}
|
||||
{% assign has-children = true %}
|
||||
{% endif %}
|
||||
|
||||
@@ -31,23 +31,6 @@
|
||||
|
||||
{% if has-children %}
|
||||
<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 %}
|
||||
<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>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
|
||||
{% for level-2 in level-1[1].children %}
|
||||
<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">
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
<div class="layout-area-menu navbar navbar-expand-lg {% if include.dark %}navbar-dark{% else %}navbar-light{% endif %}">
|
||||
<div class="container">
|
||||
<header class="topnav">
|
||||
<div class="navbar navbar-expand-lg {% if include.dark %}navbar-dark{% else %}navbar-light{% endif %}">
|
||||
<div class="container{% if include.fluid %}-fluid{% endif %}">
|
||||
{% include layout/menu.html top=true %}
|
||||
</div>
|
||||
</div>
|
||||
<div class="layout-area-menu-backdrop" data-toggle="menubar"></div>
|
||||
</header>
|
||||
|
||||
@@ -1,6 +1,9 @@
|
||||
<header class="layout-area-topnav 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-id=1 dark=include.dark notifications=true %}
|
||||
<header class="topnav">
|
||||
<div class="container{% if include.fluid %}-fluid{% endif %}">
|
||||
<div class="navbar navbar-expand-lg {% if include.dark %}navbar-dark bg-dark text-white{% else %}navbar-light{% endif %}{% if include.sticky %} navbar-sticky{% endif %}">
|
||||
{% include_cached parts/navbar.html search=true %}
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
|
||||
|
||||
@@ -0,0 +1,10 @@
|
||||
<div class="navbar-search">
|
||||
<form action="" method="get">
|
||||
<div class="input-group">
|
||||
<input type="text" name="q" class="form-control" placeholder="Search...">
|
||||
<div class="input-group-append">
|
||||
<button class="btn btn-secondary" type="submit">{% include_cached ui/icon.html icon="search" %}</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
@@ -1,48 +1,22 @@
|
||||
{% assign person-id = include.person-id | default: 12 | minus: 1 %}
|
||||
{% assign person = site.data.people[person-id] %}
|
||||
|
||||
<a class="layout-toggler" data-toggle="menubar">
|
||||
<span class="layout-toggler-icon"></span>
|
||||
</a>
|
||||
|
||||
<a href="{{ site.base }}" class="navbar-brand text-reset mr-md-3">
|
||||
{% if include.icon %}<span class="text-green">{% include_cached 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.dark %}-white{% endif %}.svg" alt="{{ site.title }}" class="d-none d-md-block navbar-brand-logo">
|
||||
<img src="{{ site.base }}/img/logo-small{% if include.dark %}-white{% endif %}.svg" alt="{{ site.title }}" class="d-md-none navbar-brand-logo">
|
||||
{% endif %}
|
||||
{% if include.title %}<span class="d-inline">{{ include.title }}</span>{% endif %}
|
||||
</a>
|
||||
|
||||
<ul class="nav navbar-menu align-items-center order-1 order-lg-2">
|
||||
|
||||
{% if include.notifications %}
|
||||
<li class="nav-item dropdown mr-3">
|
||||
<a class="nav-link text-reset px-2" data-toggle="dropdown">
|
||||
{% include_cached ui/icon.html icon="bell" %}
|
||||
<span class="badge badge-pill badge-up bg-primary">4</span>
|
||||
</a>
|
||||
<div class="dropdown-menu dropdown-menu-arrow 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>
|
||||
{% comment %}
|
||||
{% if include.search %}
|
||||
{% include parts/navbar-search.html %}
|
||||
{% endif %}
|
||||
{% endcomment %}
|
||||
|
||||
<ul class="nav navbar-menu align-items-center ml-auto">
|
||||
<li class="nav-item d-none d-lg-flex mr-3">
|
||||
<a href="{{ site.github_url }}" class="btn btn-sm btn-success" target="_blank">Source code</a>
|
||||
</li>
|
||||
|
||||
{% 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-reset ml-2">
|
||||
@@ -75,42 +49,4 @@
|
||||
</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_cached 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_cached ui/icon.html icon="rotate-cw" class="mr-2" %}Sync</a>
|
||||
</li>
|
||||
{% endif %}
|
||||
</ul>
|
||||
|
||||
@@ -7,9 +7,9 @@ layout: base
|
||||
{% include layout/topnav.html dark=page.header-dark sticky=page.header-sticky %}
|
||||
{% include layout/topmenu.html %}
|
||||
|
||||
<div class="layout-area-main">
|
||||
<div class="">
|
||||
|
||||
<main class="container{% if page.container-size %} container-{{ page.container-size }}{% endif %}{% if page.fluid %}-fluid{% endif %} my-4 flex-fill">
|
||||
<main class="container-{% if page.container-size %}{{ page.container-size }}{% else %}xl{% endif %}{% if page.fluid %}-fluid{% endif %} my-4 flex-fill">
|
||||
{% include layout/page-title.html %}
|
||||
|
||||
{{ content }}
|
||||
|
||||
+10
-9
@@ -117,7 +117,7 @@ $avatar-sizes: (
|
||||
//Fonts
|
||||
$font-size-base: 1rem !default;
|
||||
$font-weight-base: 400 !default;
|
||||
$line-height-base: 1.6 !default;
|
||||
$line-height-base: 1.5 !default;
|
||||
$body-letter-spacing: null !default;
|
||||
|
||||
$border-radius: 3px !default;
|
||||
@@ -266,11 +266,19 @@ $loader-size: 2.5rem !default;
|
||||
|
||||
//navbar
|
||||
$navbar-bg: $white !default;
|
||||
$navbar-height: 3.5rem !default;
|
||||
$navbar-border-color: $border-color !default;
|
||||
$navbar-border-color: $border-color !default;
|
||||
|
||||
//nav
|
||||
$nav-link-padding-y: .25rem !default;
|
||||
$nav-link-padding-y: 1rem !default;
|
||||
|
||||
$navbar-padding-x: .75rem !default;
|
||||
$navbar-padding-y: .75rem !default;
|
||||
$navbar-nav-link-padding-x: .75rem !default;
|
||||
$navbar-light-color: $text-muted !default;
|
||||
$navbar-light-active-color: $primary !default;
|
||||
$navbar-light-hover-color: $body-color !default;
|
||||
|
||||
//pagination
|
||||
$pagination-border-width: 0 !default;
|
||||
@@ -289,13 +297,6 @@ $sidenav-border-color: $border-color-alpha !default;
|
||||
$sidenav-dark-bg: $dark !default;
|
||||
$sidenav-link-padding-x: .75rem !default;
|
||||
|
||||
$navbar-padding-x: .75rem !default;
|
||||
$navbar-padding-y: .75rem !default;
|
||||
$navbar-nav-link-padding-x: .75rem !default;
|
||||
$navbar-light-color: $text-muted !default;
|
||||
$navbar-light-active-color: $primary !default;
|
||||
$navbar-light-hover-color: $body-color !default;
|
||||
|
||||
//steps
|
||||
$steps-border-width: 2px !default;
|
||||
$steps-color-inactive: #f3f5f5 !default;
|
||||
|
||||
+190
-176
@@ -1,182 +1,196 @@
|
||||
/**
|
||||
Layout
|
||||
*/
|
||||
@mixin menu-side {
|
||||
align-items: flex-start;
|
||||
}
|
||||
.topnav {
|
||||
border-bottom: 1px solid;
|
||||
background-color: $navbar-bg;
|
||||
border-color: $navbar-border-color;
|
||||
|
||||
@mixin menu-collapsed {
|
||||
.layout-area-menu {
|
||||
position: fixed;
|
||||
left: -($sidenav-width);
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
background: $dark;
|
||||
color: $white;
|
||||
width: $sidenav-width;
|
||||
z-index: $zindex-fixed;
|
||||
transition: .3s left;
|
||||
|
||||
@include menu-side;
|
||||
}
|
||||
|
||||
.layout-area-menu-backdrop {
|
||||
display: block;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
width: 100vw;
|
||||
background: rgba($dark, .1);
|
||||
z-index: $zindex-fixed - 1;
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.layout-toggler {
|
||||
display: block;
|
||||
}
|
||||
|
||||
@at-root body.aside-visible & {
|
||||
.layout-area-menu {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.layout-area-menu-backdrop {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
}
|
||||
.navbar {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
min-height: $navbar-height;
|
||||
}
|
||||
}
|
||||
|
||||
.layout {
|
||||
position: relative;
|
||||
display: grid;
|
||||
|
||||
grid-template: "head" auto "menu" auto "main" auto /
|
||||
100%;
|
||||
}
|
||||
|
||||
.layout-collapsed {
|
||||
@each $breakpoint in map-keys($grid-breakpoints) {
|
||||
$infix: breakpoint-infix($breakpoint);
|
||||
|
||||
@if $infix != '' {
|
||||
@include media-breakpoint-down($breakpoint) {
|
||||
|
||||
&#{$infix} {
|
||||
@include menu-collapsed;
|
||||
}
|
||||
}
|
||||
} @else {
|
||||
@include menu-collapsed;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.layout-sidebar {
|
||||
@each $breakpoint in map-keys($grid-breakpoints) {
|
||||
$infix: breakpoint-infix($breakpoint);
|
||||
|
||||
@include media-breakpoint-up($breakpoint) {
|
||||
.layout-toggler {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&#{$infix} {
|
||||
grid-template: "menu head" auto "menu main" auto /
|
||||
auto 1fr;
|
||||
|
||||
.layout-area-menu {
|
||||
width: $sidenav-width;
|
||||
}
|
||||
}
|
||||
|
||||
&-folded#{$infix} {
|
||||
grid-template: "menu head" auto "menu main" auto /
|
||||
auto 1fr;
|
||||
|
||||
.layout-area-menu {
|
||||
width: $sidenav-folded-width;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.layout-toggler {
|
||||
display: none;
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
opacity: .8;
|
||||
|
||||
&-icon {
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
display: block;
|
||||
margin-top: -2px;
|
||||
margin-left: -.75rem;
|
||||
|
||||
transition-timing-function: cubic-bezier(.55, .055, .675, .19);
|
||||
transition-duration: 75ms;
|
||||
|
||||
&,
|
||||
&:after,
|
||||
&:before {
|
||||
content: '';
|
||||
width: 1.5rem;
|
||||
height: 2px;
|
||||
background: currentColor;
|
||||
position: absolute;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
&:before {
|
||||
top: -.5rem;
|
||||
transition: top 75ms ease .12s, opacity 75ms ease;
|
||||
}
|
||||
|
||||
&:after {
|
||||
bottom: -.5rem;
|
||||
transition: bottom 75ms ease .12s, transform 75ms cubic-bezier(.55, .055, .675, .19);
|
||||
}
|
||||
|
||||
@at-root body.aside-visible & {
|
||||
transform: rotate(45deg);
|
||||
transition-delay: .12s;
|
||||
transition-timing-function: cubic-bezier(.215, .61, .355, 1);
|
||||
|
||||
&:before {
|
||||
top: 0;
|
||||
transition: top 75ms ease, opacity 75ms ease .12s;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
&:after {
|
||||
bottom: 0;
|
||||
transition: bottom 75ms ease, transform 75ms cubic-bezier(.215, .61, .355, 1) .12s;
|
||||
transform: rotate(-90deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.layout-area-topnav {
|
||||
grid-area: head;
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
.layout-area-menu {
|
||||
grid-area: menu;
|
||||
}
|
||||
|
||||
.layout-area-menu-backdrop {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.layout-area-main {
|
||||
grid-area: main;
|
||||
}
|
||||
///**
|
||||
//Layout
|
||||
// */
|
||||
//@mixin menu-side {
|
||||
// align-items: flex-start;
|
||||
//}
|
||||
//
|
||||
//@mixin menu-collapsed {
|
||||
// .layout-area-menu {
|
||||
// position: fixed;
|
||||
// left: -($sidenav-width);
|
||||
// top: 0;
|
||||
// bottom: 0;
|
||||
// background: $dark;
|
||||
// color: $white;
|
||||
// width: $sidenav-width;
|
||||
// z-index: $zindex-fixed;
|
||||
// transition: .3s left;
|
||||
//
|
||||
// @include menu-side;
|
||||
// }
|
||||
//
|
||||
// .layout-area-menu-backdrop {
|
||||
// display: block;
|
||||
// position: fixed;
|
||||
// top: 0;
|
||||
// left: 0;
|
||||
// bottom: 0;
|
||||
// width: 100vw;
|
||||
// background: rgba($dark, .1);
|
||||
// z-index: $zindex-fixed - 1;
|
||||
// visibility: hidden;
|
||||
// opacity: 0;
|
||||
// }
|
||||
//
|
||||
// .layout-toggler {
|
||||
// display: block;
|
||||
// }
|
||||
//
|
||||
// @at-root body.aside-visible & {
|
||||
// .layout-area-menu {
|
||||
// left: 0;
|
||||
// }
|
||||
//
|
||||
// .layout-area-menu-backdrop {
|
||||
// opacity: 1;
|
||||
// visibility: visible;
|
||||
// }
|
||||
// }
|
||||
//}
|
||||
//
|
||||
//.layout {
|
||||
// position: relative;
|
||||
// display: grid;
|
||||
//
|
||||
// grid-template: "head" auto "menu" auto "main" auto /
|
||||
// 100%;
|
||||
//}
|
||||
//
|
||||
//.layout-collapsed {
|
||||
// @each $breakpoint in map-keys($grid-breakpoints) {
|
||||
// $infix: breakpoint-infix($breakpoint);
|
||||
//
|
||||
// @if $infix != '' {
|
||||
// @include media-breakpoint-down($breakpoint) {
|
||||
//
|
||||
// &#{$infix} {
|
||||
// @include menu-collapsed;
|
||||
// }
|
||||
// }
|
||||
// } @else {
|
||||
// @include menu-collapsed;
|
||||
// }
|
||||
// }
|
||||
//}
|
||||
//
|
||||
//.layout-sidebar {
|
||||
// @each $breakpoint in map-keys($grid-breakpoints) {
|
||||
// $infix: breakpoint-infix($breakpoint);
|
||||
//
|
||||
// @include media-breakpoint-up($breakpoint) {
|
||||
// .layout-toggler {
|
||||
// display: none;
|
||||
// }
|
||||
//
|
||||
// &#{$infix} {
|
||||
// grid-template: "menu head" auto "menu main" auto /
|
||||
// auto 1fr;
|
||||
//
|
||||
// .layout-area-menu {
|
||||
// width: $sidenav-width;
|
||||
// }
|
||||
// }
|
||||
//
|
||||
// &-folded#{$infix} {
|
||||
// grid-template: "menu head" auto "menu main" auto /
|
||||
// auto 1fr;
|
||||
//
|
||||
// .layout-area-menu {
|
||||
// width: $sidenav-folded-width;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
//}
|
||||
//
|
||||
//.layout-toggler {
|
||||
// display: none;
|
||||
// width: 2rem;
|
||||
// height: 2rem;
|
||||
// cursor: pointer;
|
||||
// position: relative;
|
||||
// opacity: .8;
|
||||
//
|
||||
// &-icon {
|
||||
// top: 50%;
|
||||
// left: 50%;
|
||||
// display: block;
|
||||
// margin-top: -2px;
|
||||
// margin-left: -.75rem;
|
||||
//
|
||||
// transition-timing-function: cubic-bezier(.55, .055, .675, .19);
|
||||
// transition-duration: 75ms;
|
||||
//
|
||||
// &,
|
||||
// &:after,
|
||||
// &:before {
|
||||
// content: '';
|
||||
// width: 1.5rem;
|
||||
// height: 2px;
|
||||
// background: currentColor;
|
||||
// position: absolute;
|
||||
// border-radius: 4px;
|
||||
// }
|
||||
//
|
||||
// &:before {
|
||||
// top: -.5rem;
|
||||
// transition: top 75ms ease .12s, opacity 75ms ease;
|
||||
// }
|
||||
//
|
||||
// &:after {
|
||||
// bottom: -.5rem;
|
||||
// transition: bottom 75ms ease .12s, transform 75ms cubic-bezier(.55, .055, .675, .19);
|
||||
// }
|
||||
//
|
||||
// @at-root body.aside-visible & {
|
||||
// transform: rotate(45deg);
|
||||
// transition-delay: .12s;
|
||||
// transition-timing-function: cubic-bezier(.215, .61, .355, 1);
|
||||
//
|
||||
// &:before {
|
||||
// top: 0;
|
||||
// transition: top 75ms ease, opacity 75ms ease .12s;
|
||||
// opacity: 0;
|
||||
// }
|
||||
//
|
||||
// &:after {
|
||||
// bottom: 0;
|
||||
// transition: bottom 75ms ease, transform 75ms cubic-bezier(.215, .61, .355, 1) .12s;
|
||||
// transform: rotate(-90deg);
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
//}
|
||||
//
|
||||
//.layout-area-topnav {
|
||||
// grid-area: head;
|
||||
// padding-left: 0;
|
||||
// padding-right: 0;
|
||||
//}
|
||||
//
|
||||
//.layout-area-menu {
|
||||
// grid-area: menu;
|
||||
//}
|
||||
//
|
||||
//.layout-area-menu-backdrop {
|
||||
// display: none;
|
||||
//}
|
||||
//
|
||||
//.layout-area-main {
|
||||
// grid-area: main;
|
||||
//}
|
||||
|
||||
@@ -1,7 +1,6 @@
|
||||
.navbar {
|
||||
border-bottom: 1px solid;
|
||||
background-color: $navbar-bg;
|
||||
border-color: $navbar-border-color;
|
||||
//padding-top: 0;
|
||||
//padding-bottom: 0;
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -21,19 +20,33 @@ Navbar logo
|
||||
padding-right: $navbar-nav-link-padding-x;
|
||||
}
|
||||
|
||||
.nav-item.active .nav-link {
|
||||
.nav-item {
|
||||
&.active .nav-link {
|
||||
position: relative;
|
||||
|
||||
&:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
|
||||
bottom: subtract(-$navbar-padding-y, 1px);
|
||||
bottom: -1px;
|
||||
right: $navbar-nav-link-padding-x;
|
||||
left: $navbar-nav-link-padding-x;
|
||||
border-bottom: 1px solid $primary;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.dropdown-menu {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-brand {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.nav-link {
|
||||
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user