sidenav navigation

pages/_data/menu.yml

@@ -3,6 +3,7 @@ apps:
   title: Apps
   icon: package
   label: 8
+  label-color: green
 level-1:
   title: Level 1
   icon: menu

pages/_docs/colors.md

+---
+title: Colors
+menu: docs.colors
+---
+

pages/_docs/ribbons.md

 ---
 title: Ribbons
 menu: docs.ribbons
+new: true
 ---
 
 ## Default markup

pages/_includes/layout/debug.html

@@ -103,7 +103,7 @@
             return false;
          })
          .on('click', '[data-debug="folded"]', function (e) {
-            $body.toggleClass('sidebar-folded');
+            $('.sidenav').toggleClass('sidenav-folded');
 
             e.preventDefault();
             return false;

pages/_includes/layout/menu.html

 <ul class="navbar-nav mb-md-4">
    {% assign current-page = include.menu | split: '.' %}
-   {{ current-page.size }}
 
    {% for level-1 in site.data.menu %}
    {% assign icon = level-1[1].icon %}
    <li class="nav-item">
       <a class="nav-link{% if level-1[0] == current-page[0] %} active{% endif %}" {% if level-1[1].children or level-1[1].docs %}href="#sidebar-{{ level-1[0] }}" data-toggle="collapse" role="button" aria-expanded="{% if level-1[0] == current-page[0] %}true{% else %}false{% endif %}"{% else %}href="{{ site.base }}/{{ level-1[1].url }}"{% endif %}>
          {% include ui/icon.html icon=icon  %}
-         <span class="nav-link-text">{{ level-1[1].title }}</span>
-         {% if level-1[1].label %}
-         <span class="badge bg-primary text-white ml-auto">{{ level-1[1].label }}</span>
-         {% endif %}
+         <span class="nav-link-title">
+            {{ level-1[1].title }}
+
+            {% if level-1[1].label %}
+            <span class="badge bg-{{ level-1[1].label-color | default: 'primary' }} text-white ml-auto">{{ level-1[1].label }}</span>
+            {% endif %}
+         </span>
       </a>
       {% if level-1[1].children or level-1[1].docs %}
       <div class="collapse navbar-collapse{% if level-1[0] == current-page[0] %} show{% endif %}" id="sidebar-{{ level-1[0] }}">
@@ -22,7 +24,13 @@
             {% assign doc = site.docs | where: "slug", doc-slug | first %}
             <li class="nav-item">
                <a href="{{ site.base }}/docs/{{ doc.slug }}.html" class="nav-link{% if current-page[0] == 'docs' and current-page[1] == doc.slug %} active{% endif %}">
-                  {{ doc.title }}
+                  <span class="nav-link-title">
+                     {{ doc.title }}
+
+                     {% if doc.new %}
+                     <span class="badge bg-primary text-white ml-auto text-uppercase">new</span>
+                     {% endif %}
+                  </span>
                </a>
             </li>
             {% endfor %}
@@ -31,7 +39,12 @@
             {% for level-2 in level-1[1].children %}
             <li class="nav-item">
                <a class="nav-link{% if level-2[0] == current-page[1] %} active{% endif %}" {% if level-2[1].children %}href="#sidebar-{{ level-2[0] }}" data-toggle="collapse" role="button" aria-expanded="false"{% else %}href="{{ site.base }}/{{ level-2[1].url }}"{% endif %}>
-                  {{ level-2[1].title }}
+                  <span class="nav-link-title">
+                     {{ level-2[1].title }}
+                     {% if level-2[1].label %}
+                        <span class="badge bg-{{ level-2[1].label-color | default: 'primary' }} text-white ml-auto">{{ level-2[1].label }}</span>
+                     {% endif %}
+                  </span>
                </a>
                {% if level-2[1].children %}
                <div class="collapse navbar-collapse{% if level-2[0] == current-page[1] %} show{% endif %}" id="sidebar-{{ level-2[0] }}">
@@ -39,7 +52,12 @@
                      {% for level-3 in level-2[1].children %}
                      <li class="nav-item">
                         <a class="nav-link{% if level-3[0] == current-page[2] %} active{% endif %}" {% if level-3[1].children %}href="#sidebar-{{ level-3[0] }}" data-toggle="collapse" role="button" aria-expanded="false"{% else %}href="{{ site.base }}/{{ level-3[1].url }}"{% endif %}>
-                           {{ level-3[1].title }}
+                           <span class="nav-link-title">
+                              {{ level-3[1].title }}
+                              {% if level-3[1].label %}
+                                 <span class="badge bg-{{ level-3[1].label-color | default: 'primary' }} text-white ml-auto">{{ level-3[1].label }}</span>
+                              {% endif %}
+                           </span>
                         </a>
 
                         {% if level-3[1].children %}
@@ -48,7 +66,12 @@
                               {% for level-4 in level-3[1].children %}
                               <li class="nav-item">
                                  <a class="nav-link{% if level-4[0] == current-page[3] %} active{% endif %}" href="{% if level-4[1].url %}{{ site.base }}/{{ level-4[1].url }}{% else %}#{% endif %}">
-                                    {{ level-4[1].title }}
+                                    <span class="nav-link-title">
+                                       {{ level-4[1].title }}
+                                       {% if level-4[1].label %}
+                                          <span class="badge bg-{{ level-4[1].label-color | default: 'primary' }} text-white ml-auto">{{ level-4[1].label }}</span>
+                                       {% endif %}
+                                    </span>
                                  </a>
                               </li>
                               {% endfor %}

pages/_includes/layout/sidenav-content.html

 {% assign id = 0 | random_id %}
 <div class="p-3">
-   <a href="{{ site.base }}" class="navbar-brand text-inherit">
-      <img src="{{ site.base }}/img/logo{% if include.logo %}-{{ include.logo }}{% endif %}.svg" alt="" class="navbar-brand-logo">
+   <a href="{{ site.base }}" class=" navbar-brand text-inherit">
+      <img src="{{ site.base }}/img/logo{% if include.white %}-white{% endif %}.svg" alt="" class="hide-sidenav-folded navbar-brand-logo">
+      <img src="{{ site.base }}/img/logo-small{% if include.white %}-white{% endif %}.svg" alt="" class="hide-sidenav-expanded navbar-brand-logo">
    </a>
 </div>
 
-<div class="container">
-   <h6 class="navbar-heading">
-      Docs
-   </h6>
+<h6 class="navbar-heading">
+   Docs
+</h6>
 
-   {% include layout/menu.html menu=include.menu %}
-</div>
+{% include layout/menu.html menu=include.menu %}

pages/_includes/layout/sidenav.html

+{% assign menu = page.menu | default: layout.menu %}
 <div class="sidenav sidenav-dark sidenav-expand-md">
-   {% assign menu = page.menu | default: layout.menu %}
-   {% include_cached layout/sidenav-content.html logo="white" menu=menu %}
+   {% include layout/sidenav-content.html white=true menu=menu %}
 </div>

pages/index.html

@@ -5,22 +5,22 @@ menu: level-1.level-2.level-3.level-4
 ---
 
 <div class="row row-cards">
-   <div class="col-6 col-sm-4 col-lg-2">
+   <div class="col-6 col-sm-4 col-xl-2">
       {% include cards/small-stats-3.html number=43 title="New Tickets" percentage=6 %}
    </div>
-   <div class="col-6 col-sm-4 col-lg-2">
+   <div class="col-6 col-sm-4 col-xl-2">
       {% include cards/small-stats-3.html number=17 title="Closed Today" percentage=-3 %}
    </div>
-   <div class="col-6 col-sm-4 col-lg-2">
+   <div class="col-6 col-sm-4 col-xl-2">
       {% include cards/small-stats-3.html number=7 title="New Replies" percentage=9 %}
    </div>
-   <div class="col-6 col-sm-4 col-lg-2">
+   <div class="col-6 col-sm-4 col-xl-2">
       {% include cards/small-stats-3.html number="27.3K" title="Followers" percentage=3 %}
    </div>
-   <div class="col-6 col-sm-4 col-lg-2">
+   <div class="col-6 col-sm-4 col-xl-2">
       {% include cards/small-stats-3.html number="$95" title="Daily Earnings" percentage=-2 %}
    </div>
-   <div class="col-6 col-sm-4 col-lg-2">
+   <div class="col-6 col-sm-4 col-xl-2">
       {% include cards/small-stats-3.html number=621 title="Products" percentage=-1 %}
    </div>
 
@@ -49,16 +49,16 @@ menu: level-1.level-2.level-3.level-4
    </div>
    {% endcomment %}
 
-   <div class="col-sm-6 col-lg-3">
+   <div class="col-sm-6 col-xl-3">
       {% include cards/small-stats.html color="blue" icon="dollar-sign" count="132" subtitle="Sales" description="12 waiting payments" %}
    </div>
-   <div class="col-sm-6 col-lg-3">
+   <div class="col-sm-6 col-xl-3">
       {% include cards/small-stats.html color="green" icon="shopping-cart" count="78" subtitle="Orders" description="32 shipped" %}
    </div>
-   <div class="col-sm-6 col-lg-3">
+   <div class="col-sm-6 col-xl-3">
       {% include cards/small-stats.html chart-position="left" chart-type="donut" chart-data="56/100" chart-label="56%" color="red" count="1352" subtitle="Members" description="163 registered today" %}
    </div>
-   <div class="col-sm-6 col-lg-3">
+   <div class="col-sm-6 col-xl-3">
       {% include cards/small-stats.html color="yellow" chart-type="pie" chart-data="22/100" color="yellow" count="132" subtitle="Comments" description="16 waiting" %}
    </div>
 </div>

pages/sidebar.html

+---
+title: Sidebar
+body-class: sidebar-folded
+---

scss/_variables.scss

@@ -177,6 +177,7 @@ $pagination-disabled-bg: transparent !default;
 $pagination-disabled-color: rgba($text-muted-light, .5) !default;
 
 //sidenav
+$sidenav-width: 16rem;
 $sidenav-bg: $white !default;
 $sidenav-border-color: $border-color !default;
 $sidenav-dark-bg: $dark !default;

scss/layout/_sidenav.scss

@@ -2,8 +2,8 @@
 Sidebar
  */
 .sidenav {
-  width: 16rem;
-  min-width: 16rem;
+  width: $sidenav-width;
+  min-width: $sidenav-width;
   background: $sidenav-bg;
   border-right: 1px solid $sidenav-border-color;
   user-select: none;
@@ -12,12 +12,14 @@ Sidebar
     display: flex;
     align-items: center;
     color: $text-muted;
-    border-radius: $border-radius;
+    transition: .3s background, .3s box-shadow;
 
     &.active,
     &:hover {
-      color: $link-color;
+      color: $body-color;
       background: rgba($link-color, .04);
+      border-color: $primary;
+      box-shadow: inset 2px 0 0 0 $primary;
     }
 
     > .icon {
@@ -27,6 +29,7 @@ Sidebar
     &[data-toggle="collapse"] {
       &.active {
         background: none;
+        box-shadow: none;
       }
 
       &:after {
@@ -43,38 +46,103 @@ Sidebar
     }
   }
 
-  .nav-item .nav-item {
-    padding-left: 2rem;
+  &:not(.sidenav-folded) {
+    .nav-item .nav-item .nav-link {
+      padding-left: 2.5rem;
+    }
 
-    .nav-item {
-      padding-left: 1rem;
+    .nav-item .nav-item .nav-item .nav-link {
+      padding-left: 3.5rem;
+    }
+
+    .nav-item .nav-item .nav-item .nav-item .nav-link {
+      padding-left: 4.5rem;
     }
   }
 
+  .nav-link-title {
+    display: flex;
+    width: 100%;
+    align-items: center;
+  }
+
   .navbar-brand {
     text-align: center;
   }
 
   .navbar-heading {
-    padding: .5rem 0;
-    margin: 0;
     @extend .text-subheader;
+    padding: .5rem $sidenav-link-padding-x;
+    margin: 0;
   }
 }
 
-/**
-Narrow sidebar
- */
-.sidenav-narrow {
+/*.sidenav-folded {
   width: 4rem;
-  min-width: 4rem;
-  padding: .5rem;
 
-  .navbar-brand {
-    min-height: 2.5rem;
-    padding: 0;
+  .nav-item {
+    position: relative;
+
+    .nav-item {
+      .nav-link {
+        height: auto;
+      }
+
+      .nav-link-title {
+        display: block;
+      }
+    }
+
+    .nav-link {
+      padding: 0 $sidenav-link-padding-x;
+    }
+  }
+
+  .nav-link-title {
+    display: none;
+  }
+
+  .navbar-heading {
+    display: none;
+  }
+
+  .nav-link {
+    height: 4rem;
+
+    > .icon {
+      font-size: 1.25rem;
+      width: 100%;
+      text-align: center;
+    }
+
+    .badge {
+      position: absolute;
+      right: 0;
+      top: 0;
+      text-indent: -9999px;
+      width: 8px;
+      height: 8px;
+      padding: 0;
+      border-radius: 50%;
+    }
+
+    &:after {
+      display: none !important;
+    }
+  }
+
+  .navbar-collapse {
+    position: absolute;
+    left: 100%;
+    top: 0;
+    background: #fff;
+    z-index: $zindex-dropdown;
+    width: 10rem;
+    box-shadow: $box-shadow-sm;
+    border: 1px solid $border-color;
   }
 }
+*/
 
 /*
 Right sidebar
@@ -151,3 +219,15 @@ Dark sidebar
     }
   }
 }
+
+.hide-sidenav-folded {
+  @at-root .sidenav.sidenav-folded & {
+    display: none;
+  }
+}
+
+.hide-sidenav-expanded {
+  @at-root .sidenav:not(.sidenav-folded) & {
+    display: none;
+  }
+}

scss/ui/_badges.scss

 .badge {
-  //font-weight: 600;
-
   @at-root a#{&} {
     color: $white;
   }
@@ -12,6 +10,7 @@
     height: 8px;
     min-height: auto;
     padding: 0;
+    border-radius: 50%;
   }
 }
 

static/img/logo-small-white.svg

+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 68 68">
+  <path d="M64.6 16.2C63 9.9 58.1 5 51.8 3.4 40 1.5 28 1.5 16.2 3.4 9.9 5 5 9.9 3.4 16.2 1.5 28 1.5 40 3.4 51.8 5 58.1 9.9 63 16.2 64.6c11.8 1.9 23.8 1.9 35.6 0C58.1 63 63 58.1 64.6 51.8c1.9-11.8 1.9-23.8 0-35.6zM33.3 36.3c-2.8 4.4-6.6 8.2-11.1 11-1.5.9-3.3.9-4.8.1s-2.4-2.3-2.5-4c0-1.7.9-3.3 2.4-4.1 2.3-1.4 4.4-3.2 6.1-5.3-1.8-2.1-3.8-3.8-6.1-5.3-2.3-1.3-3-4.2-1.7-6.4s4.3-2.9 6.5-1.6c4.5 2.8 8.2 6.5 11.1 10.9 1 1.4 1 3.3.1 4.7zM49.2 46H37.8c-2.1 0-3.8-1-3.8-3s1.7-3 3.8-3h11.4c2.1 0 3.8 1 3.8 3s-1.7 3-3.8 3z" fill="#ffffff"/>
+</svg>