From cbfec8525cfeb40a7f2c2cdf9d08e66a8e18de24 Mon Sep 17 00:00:00 2001 From: chomik Date: Wed, 17 Apr 2019 23:55:44 +0200 Subject: [PATCH] navbar expanded, nadbar dark init --- img/logo-small.svg | 6 + img/logo.svg | 7 + img/tabler.svg | 19 --- pages/_includes/layout/sidenav-content.html | 158 ++++++++++++++++++++ pages/_includes/layout/sidenav.html | 14 +- pages/_includes/parts/navbar.html | 2 +- pages/_layouts/default.html | 2 - scss/_variables.scss | 10 +- scss/layout/_navbar.scss | 16 -- scss/layout/_sidebar.scss | 74 --------- scss/layout/_sidenav.scss | 78 +++++++++- scss/ui-kit.scss | 1 - 12 files changed, 264 insertions(+), 123 deletions(-) create mode 100644 img/logo-small.svg create mode 100644 img/logo.svg delete mode 100644 img/tabler.svg create mode 100644 pages/_includes/layout/sidenav-content.html delete mode 100644 scss/layout/_sidebar.scss diff --git a/img/logo-small.svg b/img/logo-small.svg new file mode 100644 index 000000000..359dc706b --- /dev/null +++ b/img/logo-small.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/img/logo.svg b/img/logo.svg new file mode 100644 index 000000000..b5c86a30f --- /dev/null +++ b/img/logo.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/img/tabler.svg b/img/tabler.svg deleted file mode 100644 index dd702d8aa..000000000 --- a/img/tabler.svg +++ /dev/null @@ -1,19 +0,0 @@ - - - - tabler - Created with Sketch. - - - - - - - \ No newline at end of file diff --git a/pages/_includes/layout/sidenav-content.html b/pages/_includes/layout/sidenav-content.html new file mode 100644 index 000000000..16d5075d3 --- /dev/null +++ b/pages/_includes/layout/sidenav-content.html @@ -0,0 +1,158 @@ + + + + diff --git a/pages/_includes/layout/sidenav.html b/pages/_includes/layout/sidenav.html index 4e816c853..8595e1584 100644 --- a/pages/_includes/layout/sidenav.html +++ b/pages/_includes/layout/sidenav.html @@ -1,8 +1,10 @@ -
-1 +
+
+ {% include layout/sidenav-content.html %} +
-{% comment %} -
-2 +
+
+ {% include layout/sidenav-content.html %} +
-{% endcomment %} diff --git a/pages/_includes/parts/navbar.html b/pages/_includes/parts/navbar.html index cea753f70..11169b033 100644 --- a/pages/_includes/parts/navbar.html +++ b/pages/_includes/parts/navbar.html @@ -12,7 +12,7 @@ {% if include.icon %}{% include ui/icon.html icon=include.icon %}{% endif %} {% if include.stamp %}UI{% endif %} - {% if include.logo %}{% endif %} + {% if include.logo %}{% endif %} {% if include.title %}{{ include.title }}{% endif %} diff --git a/pages/_layouts/default.html b/pages/_layouts/default.html index 0c8339141..6096e37dc 100644 --- a/pages/_layouts/default.html +++ b/pages/_layouts/default.html @@ -7,10 +7,8 @@ layout: base
{% include layout/header.html %} - {% comment %}{% include layout/topnav.html %}{% endcomment %}
- {% comment %}{% include layout/sidebar.html %}{% endcomment %}
diff --git a/scss/_variables.scss b/scss/_variables.scss index 55293cee4..6472c90cf 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -47,7 +47,7 @@ $white: #fff !default; $body-bg: #f5f7fb !default; $text-color: #495057 !default; -$text-muted: #9aa0ac !default; +$text-muted: #888e9a !default; $text-muted-light: #adb5bd !default; $border-color: rgba(0, 40, 100, .12) !default; @@ -171,6 +171,14 @@ $pagination-bg: transparent !default; $pagination-disabled-bg: transparent !default; $pagination-disabled-color: rgba($text-muted-light, .5) !default; +//sidenav +$sidenav-bg: $white !default; +$sidenav-border-color: $border-color !default; + +$sidenav-dark-bg: $dark !default; + +$sidenav-link-padding-x: .5rem !default; + //spinner $spinner-width: 1.5rem !default; $spinner-height: 1.5rem !default; diff --git a/scss/layout/_navbar.scss b/scss/layout/_navbar.scss index eda8fa172..3928ab298 100644 --- a/scss/layout/_navbar.scss +++ b/scss/layout/_navbar.scss @@ -3,26 +3,10 @@ min-height: 3.75rem; padding: .75rem 1rem; - .dropdown-menu-right { - right: 0; - left: auto; - } - - .icon { - width: 1rem; - height: 1rem; - vertical-align: sub; - } - .nav-link { color: inherit; white-space: nowrap; } - - .nav-active-border .nav-link { - margin: -.75rem 0; - line-height: 2.75rem; - } } .navbar-brand { diff --git a/scss/layout/_sidebar.scss b/scss/layout/_sidebar.scss deleted file mode 100644 index 89748d50a..000000000 --- a/scss/layout/_sidebar.scss +++ /dev/null @@ -1,74 +0,0 @@ -$sidebar-width: 15rem; - -.sidebar { - flex: 1 0 15rem; - width: $sidebar-width; - height: 100%; - padding: 1.5rem; - background: #fff; - border-right: 1px solid $border-color; - - @include media-breakpoint-down(md) { - position: fixed; - top: 0; - bottom: 0; - z-index: 1000; - max-width: 90vw; - margin-left: -($sidebar-width); - transition: .3s transform; - - @at-root body.sidebar-opened & { - transform: translate($sidebar-width, 0); - } - } -} - -.sidebar-overlay { - position: fixed; - top: 0; - right: 0; - bottom: 0; - left: 0; - z-index: 999; - display: none; - visibility: hidden; - background: rgba(0, 0, 0, .1); - opacity: 0; - backdrop-filter: blur(1px); - - @include media-breakpoint-down(md) { - display: block; - transition: .3s backdrop-filter, .3s opacity; - - @at-root body.sidebar-opened & { - visibility: visible; - opacity: 1; - } - } -} - -.sidebar-btn { - position: fixed; - bottom: 1rem; - left: 1rem; - z-index: 1001; - display: flex; - align-items: center; - justify-content: center; - width: 4rem; - height: 4rem; - color: $text-muted !important; - background: theme-color-lightest($text-muted); - border-radius: 50%; - box-shadow: $box-shadow-sm; - - .icon { - width: 24px; - height: 24px; - stroke-width: 1; - } - - @include media-breakpoint-up(md) { - display: none; - } -} diff --git a/scss/layout/_sidenav.scss b/scss/layout/_sidenav.scss index 36e5b19d9..9992a4ad4 100644 --- a/scss/layout/_sidenav.scss +++ b/scss/layout/_sidenav.scss @@ -1,9 +1,81 @@ +/* +Sidebar + */ .sidenav { - background: $dark; + background: $sidenav-bg; width: 16rem; - outline: 1px solid red; + min-width: 16rem; + border-right: 1px solid $sidenav-border-color; + padding: .75rem 1rem; + + .nav-link { + color: $text-muted; + } } +/** +Narrow sidebar + */ .sidenav-narrow { - width: 4rem + width: 4rem; + min-width: 4rem; + padding: .5rem; +} + +/* +Right sidebar + */ +.sidenav-right { + order: 9; + border-left: 1px solid $sidenav-border-color; + border-right: none; +} + +/* +Dark sidebar + */ +.sidenav-dark { + background-color: $sidenav-dark-bg; + border: none; + color: #fff; +} + +@each $breakpoint, $dimension in $grid-breakpoints { + + .sidenav-expand-#{$breakpoint} { + display: none; + + @include media-breakpoint-up(#{$breakpoint}) { + padding-left: 0; + padding-right: 0; + display: block; + + .navbar-nav { + margin-left: 0; + margin-right: 0; + } + + .navbar-nav .nav-link { + padding: .625rem $sidenav-link-padding-x; + + &.active { + position: relative; + + &:before { + top: auto; + left: $sidenav-link-padding-x; + right: $sidenav-link-padding-x; + bottom: calc(-#{$navbar-padding-y} - #{$border-width}); + border-left: 0; + border-bottom: 1px solid $primary; + } + } + } + + .sidenav > [class*="container"] { + padding-left: 0; + padding-right: 0; + } + } + } } diff --git a/scss/ui-kit.scss b/scss/ui-kit.scss index 6a47c24c3..304912c40 100644 --- a/scss/ui-kit.scss +++ b/scss/ui-kit.scss @@ -13,7 +13,6 @@ @import "layout/grid"; @import "layout/header"; @import "layout/navbar"; -@import "layout/sidebar"; @import "layout/sidenav"; @import "layout/page";