From a39b977b1f31bba19e37eb286c2a9172a96d286f Mon Sep 17 00:00:00 2001 From: chomik Date: Fri, 19 Apr 2019 22:02:45 +0200 Subject: [PATCH] navbar, header, sidebar --- img/logo-small.svg | 7 +- img/logo-white.svg | 4 + img/logo.svg | 9 +- pages/_data/menu.yml | 120 +++++++++----------- pages/_includes/layout/sidenav-content.html | 39 +++++-- pages/_includes/layout/sidenav.html | 6 +- scss/_variables.scss | 6 +- scss/layout/_core.scss | 2 + scss/layout/_navbar.scss | 12 ++ scss/layout/_sidenav.scss | 53 ++++++++- scss/utils/_text.scss | 8 ++ 11 files changed, 171 insertions(+), 95 deletions(-) create mode 100644 img/logo-white.svg diff --git a/img/logo-small.svg b/img/logo-small.svg index 359dc706b..b65931476 100644 --- a/img/logo-small.svg +++ b/img/logo-small.svg @@ -1,6 +1,3 @@ - - - - - + + diff --git a/img/logo-white.svg b/img/logo-white.svg new file mode 100644 index 000000000..618a4a1fe --- /dev/null +++ b/img/logo-white.svg @@ -0,0 +1,4 @@ + + + + diff --git a/img/logo.svg b/img/logo.svg index b5c86a30f..522ffc303 100644 --- a/img/logo.svg +++ b/img/logo.svg @@ -1,7 +1,4 @@ - - - - - - + + + diff --git a/pages/_data/menu.yml b/pages/_data/menu.yml index e53d3be52..29313c53f 100644 --- a/pages/_data/menu.yml +++ b/pages/_data/menu.yml @@ -1,73 +1,63 @@ -index: - url: . - title: Dashboard - icon: home apps: url: apps.html title: Apps icon: package counter: 8 -pages: - title: Pages - icon: file -layouts: - url: layouts.html - title: Layouts - icon: layout - children: - layout-1: - url: layout-1.html - title: Layout 1 - layout-2: - url: layout-1.html - title: Layout 1 - layout-3: - url: layout-1.html - title: Layout 1 - children: - layout-1: - url: layout-1.html - title: Layout 1 - layout-2: - url: layout-1.html - title: Layout 1 - layout-3: - url: layout-1.html - title: Layout 1 -forms: - url: forms.html - title: Forms - icon: check-square -charts: - url: charts.html - title: Charts - icon: pie-chart -errors: - title: Error pages - icon: alert-triangle - 404: - url: 400.html - title: Page 400 - 401: - url: 401.html - title: Page 401 - 403: - url: 403.html - title: Page 403 - 404: - url: 404.html - title: Page 404 - 500: - url: 500.html - title: Page 500 - 503: - url: 503.html - title: Page 503 -changelog: - url: changelog.html - title: Changelog - icon: file-plus docs: - url: docs/index.html title: Documentation icon: file-text + children: + - title: Alerts + url: '#' + - title: Avatars + url: '#' + - title: Badges + url: '#' + - title: Breadcrumb + url: '#' + - title: Buttons + url: '#' + - title: Button group + url: '#' + - title: Cards + url: '#' + - title: Charts + url: '#' + - title: Dropdowns + url: '#' + - title: Forms + url: '#' + - title: Icons + url: '#' + - title: Lists + url: '#' + - title: Modal + url: '#' + - title: Navs + url: '#' + - title: Navbar + url: '#' + - title: Pagination + url: '#' + - title: Popovers + url: '#' + - title: Progress + url: '#' + - title: Spinners + url: '#' + - title: Tables + url: '#' + - title: Toasts + url: '#' + - title: Tooltips + url: '#' + - title: Typography + url: '#' + - title: Utilities + url: '#' +changelog: + url: changelog.html + active: true + title: Changelog + icon: file-plus + label: v1.0.0 diff --git a/pages/_includes/layout/sidenav-content.html b/pages/_includes/layout/sidenav-content.html index 16d5075d3..09c33adc8 100644 --- a/pages/_includes/layout/sidenav-content.html +++ b/pages/_includes/layout/sidenav-content.html @@ -1,19 +1,27 @@ +{% assign id = 0 | random_id %} - + + +
+ +
+ Docs +
+ diff --git a/pages/_includes/layout/sidenav.html b/pages/_includes/layout/sidenav.html index 8595e1584..fdfdb4241 100644 --- a/pages/_includes/layout/sidenav.html +++ b/pages/_includes/layout/sidenav.html @@ -1,10 +1,10 @@ -
+
- {% include layout/sidenav-content.html %} + {% include layout/sidenav-content.html logo="white" %}
- {% include layout/sidenav-content.html %} + {% include layout/sidenav-content.html%}
diff --git a/scss/_variables.scss b/scss/_variables.scss index 6472c90cf..66f0b18e1 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -113,9 +113,9 @@ $border-radius: 3px !default; $h1-font-size: 1.875rem !default; $h2-font-size: 1.625rem !default; $h3-font-size: 1.25rem !default; -$h4-font-size: 1.125rem !default; -$h5-font-size: $font-size-base !default; -$h6-font-size: .8125rem !default; +$h4-font-size: $font-size-base !default; +$h5-font-size: .8125rem !default; +$h6-font-size: .75rem !default; $ribbon-margin: .25rem !default; diff --git a/scss/layout/_core.scss b/scss/layout/_core.scss index 390ad9f52..6ab2e9aed 100644 --- a/scss/layout/_core.scss +++ b/scss/layout/_core.scss @@ -9,6 +9,8 @@ body { touch-action: manipulation; -webkit-font-feature-settings: "liga" 0; font-feature-settings: "liga" 0; + + overflow-y: scroll; } body *::-webkit-scrollbar { diff --git a/scss/layout/_navbar.scss b/scss/layout/_navbar.scss index 3928ab298..12ea17c29 100644 --- a/scss/layout/_navbar.scss +++ b/scss/layout/_navbar.scss @@ -11,6 +11,18 @@ .navbar-brand { padding: 0; + margin: 0; + display: flex; + align-items: center; + justify-content: center; + + @at-root a#{&} { + transition: .3s opacity; + + &:hover { + opacity: .8; + } + } } .navbar-brand-logo { diff --git a/scss/layout/_sidenav.scss b/scss/layout/_sidenav.scss index 9992a4ad4..2ecedbc84 100644 --- a/scss/layout/_sidenav.scss +++ b/scss/layout/_sidenav.scss @@ -10,6 +10,34 @@ Sidebar .nav-link { color: $text-muted; + display: flex; + align-items: center; + + &.active, + &:hover { + background: rgba($link-color, .04); + color: $link-color; + } + + > .icon { + min-width: 2rem; + } + } + + .navbar-brand { + text-align: center; + padding-top: 1rem; + padding-bottom: 1rem; + } + + .navbar-divider { + + } + + .navbar-heading { + padding: .5rem 0; + margin: 0; + @extend .text-subheader; } } @@ -20,6 +48,11 @@ Narrow sidebar width: 4rem; min-width: 4rem; padding: .5rem; + + .navbar-brand { + padding: 0; + min-height: 2.5rem; + } } /* @@ -38,6 +71,24 @@ Dark sidebar background-color: $sidenav-dark-bg; border: none; color: #fff; + + .navbar-brand { + filter: brightness(0) invert(1); + } + + .navbar-divider { + border-color: rgba(#fff, .2); + } + + .nav-link { + color: $text-muted-light; + + &.active, + &:hover { + background: rgba($white, .04); + color: $white; + } + } } @each $breakpoint, $dimension in $grid-breakpoints { @@ -56,7 +107,7 @@ Dark sidebar } .navbar-nav .nav-link { - padding: .625rem $sidenav-link-padding-x; + padding: .5rem $sidenav-link-padding-x; &.active { position: relative; diff --git a/scss/utils/_text.scss b/scss/utils/_text.scss index cd8fc4e05..97d860db2 100644 --- a/scss/utils/_text.scss +++ b/scss/utils/_text.scss @@ -12,6 +12,14 @@ .text-muted-light { color: $text-muted-light !important; } +.text-subheader { + color: $text-muted; + font-size: $h6-font-size; + text-transform: uppercase; + letter-spacing: .04em; + font-weight: 600; +} + .text-label { color: $text-muted; text-transform: uppercase;