diff --git a/pages/_data/menu-sample.yml b/pages/_data/menu-sample.yml
index cf0142e82f785f559d3c939a36ddb2d9db0ae29c..6d71f620f48d5ff61311eb28425aa4687fbade6e 100644
--- a/pages/_data/menu-sample.yml
+++ b/pages/_data/menu-sample.yml
@@ -2,10 +2,12 @@ first:
url: '#'
icon: star
title: First
+ active: true
second:
url: '#'
icon: star
+ badge: 2
title: Second
third:
diff --git a/pages/_includes/layout/navbar-menu.html b/pages/_includes/layout/navbar-menu.html
index 7c5023b6e7d7b2f5216eef8369119dcddc0e92f1..409e53d90f8632ecac0bff122d314f4311e60eaf 100644
--- a/pages/_includes/layout/navbar-menu.html
+++ b/pages/_includes/layout/navbar-menu.html
@@ -9,7 +9,7 @@
{% for level-1 in menu %}
{% assign icon = level-1[1].icon %}
- -
+
-
{% unless hide-icons %}
@@ -23,6 +23,10 @@
{{ level-1[1].title }}
{% endif %}
+
+ {% if level-1[1].badge %}
+ {{ level-1[1].badge }}
+ {% endif %}
{% if level-1[1].children %}
diff --git a/pages/_includes/layout/navbar-side.html b/pages/_includes/layout/navbar-side.html
index 32a1991d67ecf7f029bdc7f735d43502a95feddb..8fb6a73360476662ac562a9d710065dba0f94e7a 100644
--- a/pages/_includes/layout/navbar-side.html
+++ b/pages/_includes/layout/navbar-side.html
@@ -4,6 +4,7 @@
-
{% include ui/icon.html icon="bell" %}
+
- {% include layout/navbar.html sample=true dark=true small-logo=true background="#7952b3" hide-search=true person-id=4 %}
+ {% include layout/navbar.html sample=true dark=true small-logo=true background-color="#7952b3" hide-search=true person-id=4 %}
- {% include layout/navbar.html sample=true secondary=true small-logo=true show-title=true person-id=5 %}
+ {% include layout/navbar.html sample=true dark=true background="primary" hide-brand=true hide-icons=true fluid-search=true hide-username=true person-id=5 %}
- {% include layout/navbar.html sample=true secondary=true dark-secondary=true person-id=6 %}
+ {% include layout/navbar.html sample=true secondary=true small-logo=true show-title=true person-id=6 %}
+
+
+
+ {% include layout/navbar.html sample=true secondary=true dark=true person-id=7 %}
\ No newline at end of file
diff --git a/scss/_variables.scss b/scss/_variables.scss
index 5aa66a245e1c5713126d93547bb386b17f6cf529..becdc8bc5a71c38826a58fa75b88fc4bff34c816 100644
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -251,6 +251,9 @@ $breadcrumb-variants: (
) !default;
//badges
+$badge-padding-y: .125rem !default;
+$badge-padding-x: .25rem !default;
+$badge-font-size: $h6-font-size !default;
$badge-font-weight: $font-weight-bold !default;
$badge-empty-size: .5rem !default;
diff --git a/scss/layout/_navbar.scss b/scss/layout/_navbar.scss
index 8037acbbf4053e8b0ddf162bd61ab10f9480dfaa..2c8325f6c8f9ba7f04b249a1380c36a92a03d597 100644
--- a/scss/layout/_navbar.scss
+++ b/scss/layout/_navbar.scss
@@ -1,3 +1,17 @@
+.navbar {
+ .nav-link {
+ position: relative;
+
+ .badge {
+ position: absolute;
+ top: .375rem;
+ right: .375rem;
+ transform: translate(50%, -50%);
+ }
+ }
+}
+
+
.navbar-expand {
@each $breakpoint in map-keys($grid-breakpoints) {
$next: breakpoint-next($breakpoint, $grid-breakpoints);
@@ -9,6 +23,14 @@
position: absolute;
}
+ .nav-link {
+ .badge {
+ position: static;
+ margin-left: .5rem;
+ transform: none;
+ }
+ }
+
.navbar-collapse {
.navbar-nav {
width: 100%;
diff --git a/scss/ui/_badges.scss b/scss/ui/_badges.scss
index f1b7193a3bfc9ee4f85bf9f47b9ceef2c853ac28..743825a81c77d1244a23bca0f857d60a55721174 100644
--- a/scss/ui/_badges.scss
+++ b/scss/ui/_badges.scss
@@ -2,11 +2,10 @@
@include subheader(false);
display: inline-flex;
justify-content: center;
- padding: 0 .5em;
- line-height: 1.75em;
background: $gray-500;
overflow: hidden;
vertical-align: text-bottom;
+ user-select: none;
@at-root a#{&} {
color: $white;