sidebar folded, docs refactoring

pages/_data/docs.yml

-- page: index
-- page: alerts
-- page: autosize
-- page: avatars
-- page: badges
-- page: breadcrumb
-- page: buttons
-- page: cards
-- page: carousel
-- page: colors
-- page: cursors
-- page: charts
-- page: divider
-- page: empty
-- page: flags
-- page: form-elements
-- page: form-helpers
-- page: input-mask
-- page: progress
-- page: ribbons
-- page: spinners
-- page: steps
-- page: tables
-- page: tabs
-- page: timelines
-- page: toasts
-- page: tooltips
-- page: typography

pages/_data/menu.yml

@@ -2,12 +2,15 @@ home:
   url: index.html
   title: Dashboard
   icon: home
+  badge: ''
+  badge-color: blue
 
 forms:
   url: form-elements.html
   title: Form elements
   icon: check-square
   badge: New
+  badge-color: red
 
 base:
   title: Base
@@ -57,7 +60,93 @@ docs:
   title: Documentation
   icon: file-text
   url: docs/index.html
-  docs: true
+  children:
+    index: 
+      title: index
+      url: docs/index.html
+    alerts: 
+      title: Alerts
+      url: docs/alerts.html
+    autosize: 
+      title: Autosize
+      url: docs/autosize.html
+    avatars: 
+      title: Avatars
+      url: docs/avatars.html
+    badges: 
+      title: Badges
+      url: docs/badges.html
+    breadcrumb: 
+      title: Breadcrumb
+      url: docs/breadcrumb.html
+    buttons: 
+      title: Buttons
+      url: docs/buttons.html
+    cards: 
+      title: Cards
+      url: docs/cards.html
+    carousel: 
+      title: Carousel
+      url: docs/carousel.html
+    colors: 
+      title: Colors
+      url: docs/colors.html
+    cursors: 
+      title: Cursors
+      url: docs/cursors.html
+    charts: 
+      title: Charts
+      url: docs/charts.html
+    divider: 
+      title: Divider
+      url: docs/divider.html
+    empty: 
+      title: Empty states
+      url: docs/empty.html
+    flags: 
+      title: Flags
+      url: docs/flags.html
+    form-elements: 
+      title: Form elements
+      url: docs/form-elements.html
+    form-helpers: 
+      title: Form helpers
+      url: docs/form-helpers.html
+    input-mask: 
+      title: Form input mask
+      url: docs/input-mask.html
+    progress: 
+      title: Progress
+      url: docs/progress.html
+    ribbons: 
+      title: Ribbons
+      badge: New
+      url: docs/ribbons.html
+    spinners: 
+      title: Spinners
+      url: docs/spinners.html
+    steps: 
+      title: Steps
+      url: docs/steps.html
+    tables: 
+      title: Tables
+      url: docs/tables.html
+    tabs: 
+      title: Tabs
+      url: docs/tabs.html
+    timelines: 
+      title: Timelines
+      url: docs/timelines.html
+    toasts: 
+      title: Toasts
+      url: docs/toasts.html
+    tooltips: 
+      title: Tooltips
+      url: docs/tooltips.html
+    typography: 
+      title: Typography
+      url: docs/typography.html
+
 
 #changelog:
 #  url: changelog.html

pages/_docs/alerts.md

@@ -2,7 +2,7 @@
 title: Alerts
 menu: docs.alerts
 description: Bootstrap provides an easy way to create predefined alert messages.
-bootstrap-link: https://getbootstrap.com/docs/4.4/components/alerts/
+bootstrap-link: components/alerts/
 done: true
 ---
 

pages/_docs/badges.md

@@ -2,7 +2,7 @@
 title: Badges
 menu: docs.badges
 description: A small count and labeling component.
-bootstrap-link: https://getbootstrap.com/docs/4.4/components/badge/
+bootstrap-link: components/badge/
 done: true
 ---
 

pages/_docs/breadcrumb.md

@@ -2,7 +2,7 @@
 title: Breadcrumb
 menu: docs.breadcrumb
 description: Indicate the current page’s location within a navigational hierarchy that automatically adds separators via CSS.
-bootstrap-link: https://getbootstrap.com/docs/4.4/components/breadcrumb/
+bootstrap-link: components/breadcrumb/
 done: true
 ---
 

pages/_docs/buttons.md

@@ -2,7 +2,7 @@
 title: Buttons
 icon: fe fe-plus-square
 description: Use Bootstrap’s custom button styles for actions in forms, dialogs, and more. Includes support for a handful of contextual variations, sizes, states, and more.
-bootstrap-link: https://getbootstrap.com/docs/4.4/components/buttons/
+bootstrap-link: components/buttons/
 done: true
 ---
 

pages/_docs/cards.md

@@ -2,7 +2,7 @@
 title: Cards
 menu: docs.cards
 description: A card is a flexible and extensible content container. It includes options for headers and footers, a wide variety of content, contextual background colors, and powerful display options. 
-bootstrap-link: https://getbootstrap.com/docs/4.4/components/card/
+bootstrap-link: components/card/
 done: true
 ---
 

pages/_docs/carousel.md

@@ -2,7 +2,7 @@
 title: Carousel
 menu: docs.carousel
 description: The Carousel is a slideshow for cycling through elements.
-bootstrap-link: https://getbootstrap.com/docs/4.4/components/carousel/
+bootstrap-link: components/carousel/
 ---
 
 {% example html columns=1 %}

pages/_docs/colors.md

@@ -2,7 +2,7 @@
 title: Colors
 menu: docs.colors
 description: 
-bootstrap-link: https://getbootstrap.com/docs/4.4/utilities/colors/
+bootstrap-link: utilities/colors/
 done: true
 ---
 

pages/_docs/divider.md

 ---
 title: Divider
 description: A divider visually segments content into groups
-bootstrap-link: https://getbootstrap.com/docs/4.4/components/dropdowns/#dividers
+bootstrap-link: components/dropdowns/#dividers
 done: true
 ---
 ### Default markup

pages/_docs/form-elements.md

 ---
 title: Form Elements
-bootstrap-link: https://getbootstrap.com/docs/4.4/components/forms/
+bootstrap-link: components/forms/
 ---
 
 ### Classic Input

pages/_docs/progress.md

 ---
 title: Progress
 description: A progress bar can be used to show a user how far along he is in a process.
-bootstrap-link: https://getbootstrap.com/docs/4.4/components/progress/
+bootstrap-link: components/progress/
+done: true
 ---
 
 ### Default markup
@@ -49,5 +50,8 @@ You can also use native HTML5 `<progress>` element.
 Customize the color of the progress bar. You can click [here]({% docs_url colors %}) to see the list of available colors.
 
 {% example %}
-{% include ui/progress.html size="sm" color="purple"%} 
-{% endexample %}
\ No newline at end of file
+{% include ui/progress.html size="sm" color="red" class="mb-2" value=24 %} 
+{% include ui/progress.html size="sm" color="green" class="mb-2" value=45 %} 
+{% include ui/progress.html size="sm" color="purple" class="mb-2" value=64 %} 
+{% include ui/progress.html size="sm" color="pink" %} 
+{% endexample %}

pages/_docs/ribbons.md

 ---
 title: Ribbons
 menu: docs.ribbons
-new: true
+done: true
 ---
 
 ### Default markup
@@ -14,10 +14,10 @@ new: true
 
 You can easily change the position of a ribbon by adding a class to the element.
 
-    `ribbon-top` - moves it to the top
-    `ribbon-right` - moves it to the right
-    `ribbon-bottom` - moves it to the bottom
-    `ribbon-left` - moves it to the lefg
+- `ribbon-top` - moves it to the top
+- `ribbon-right` - moves it to the right
+- `ribbon-bottom` - moves it to the bottom
+- `ribbon-left` - moves it to the lefg
 
 You can also use multiple classes at once for example: `.ribbon.ribbon-top.ribbon-left` moves the ribbon to the top left corner.
 

pages/_docs/spinners.md

 ---
 title: Spinners
 menu: docs.spinners
-bootstrap-link: https://getbootstrap.com/docs/4.4/components/spinners/
+bootstrap-link: components/spinners/
 done: true
 ---
 

pages/_docs/tables.md

 ---
 title: Tables
 menu: docs.tables
-bootstrap-link: https://getbootstrap.com/docs/4.4/content/tables/
+bootstrap-link: content/tables/
 ---
 
 ### Basic Table

pages/_docs/tabs.md

 ---
 title: Tabs
 menu: docs.tabs
-bootstrap-link: https://getbootstrap.com/docs/4.4/components/navs/
+bootstrap-link: components/navs/
 ---
 
 ### Default markup

pages/_docs/toasts.md

@@ -2,7 +2,7 @@
 title: Toasts
 menu: docs.toasts
 description: The toast component is like an alert box that is only shown for a couple of seconds when something happens (i.e. when the user clicks on a button, submits a form, etc.).
-bootstrap-link: https://getbootstrap.com/docs/4.4/components/toasts/
+bootstrap-link: components/toasts/
 ---
 
 

pages/_docs/tooltips.md

@@ -2,7 +2,7 @@
 title: Tooltips
 menu: docs.tooltips
 description: The Tooltip component is small pop-up box that appears when the user moves the mouse pointer over an element.
-bootstrap-link: https://getbootstrap.com/docs/4.4/components/tooltips/
+bootstrap-link: components/tooltips/
 ---
 
 ### Default markup

pages/_docs/typography.md

@@ -2,7 +2,7 @@
 title: Typography
 menu: docs.typography
 description: Documentation and examples for common text utilities to control alignment, wrapping, weight, and more.
-bootstrap-link: https://getbootstrap.com/docs/4.4/content/typography/
+bootstrap-link: content/typography/
 ---
 
 ### Headings

pages/_includes/layout/menu-aside.html

@@ -5,13 +5,19 @@
 	{% for level-1 in site.data.menu %}
 	<li class="sidebar-nav-item">
 
-		<a href="{{ site.base }}/{{ level-2[1].url }}" class="sidebar-nav-link{% if level-1[0] == current-page[0] and current-page.size == 1 %} active{% endif %}">
+		<a href="{{ site.base }}/{{ level-1[1].url }}" class="sidebar-nav-link{% if level-1[0] == current-page[0] and current-page.size == 1 %} active{% endif %}">
 			{% if level-1[1].icon %}
 				{% assign icon = level-1[1].icon %}
-				{% include ui/icon.html icon=icon %}
+				{% include ui/icon.html icon=icon class="nav-icon" %}
 			{% endif %}
 
-			<span>{{ level-1[1].title }}</span>
+			<span class="nav-text">{{ level-1[1].title }}</span>
+
+			{% if level-1[1].badge %}
+			{% assign badge = level-1[1].badge %}
+			{% assign badge-color = level-1[1].badge-color | default: 'green' %}
+			{% include ui/badge.html text=badge color=badge-color %}
+			{% endif %}
 		</a>
 
 		{% comment %}
@@ -19,7 +25,7 @@
 		{% endcomment %}
 
 		{% if level-1[1].children %}
-		<ul>
+		<ul class="sidebar-subnav">
 			{% for level-2 in level-1[1].children %}
 			<li class="sidebar-nav-item">
 				<a href="{{ site.base }}/{{ level-2[1].url }}" class="sidebar-nav-link{% if level-1[0] == current-page[0] and level-2[0] == current-page[1] and current-page.size == 2 %} active{% endif %}">

pages/_includes/ui/badge.html

-<span class="badge bg-{{ include.color }}">{{ include.text }}</span>
+<span class="badge bg-{{ include.color | default: 'primary' }}{% if include.class %} {{ include.class }}{% endif %}">{{ include.text }}</span>

pages/_layouts/docs.html

@@ -5,6 +5,7 @@ title: Documentation
 page-title: Documentation
 ---
 
+{% assign current-url = page.url | replace_regex: "^/", "" %}
 
 <div class="row justify-content-center">
 	<div class="col-lg-3 order-lg-1 mb-4">
@@ -13,11 +14,21 @@ page-title: Documentation
 		</a>
 
 		<div class="list-group list-group-transparent mb-0">
-			{% for p in site.data.docs %}
-			{% assign doc = site.docs | where: "slug", p.page | first %}
-			<a href="{{ site.base }}{{ doc.url | relative_url }}"
-			   class="list-group-item list-group-item-action{% if page.url == doc.url %} active{% endif %}">
-				{{ doc.title }}{% if doc.done %} {% include_cached ui/icon.html icon="check" color="green" %}{% endif %}
+			{% for doc in site.data.menu.docs.children %}
+			{% assign key = doc[0] %}
+			<a href="{{ site.base }}{{ doc[1].url | relative_url }}" class="list-group-item list-group-item-action{% if current-url == doc[1].url %} active{% endif %}">
+
+				{% if jekyll.environment == 'development' %}
+					{% assign doc-page = site.docs | where: "slug", key | first %}
+					{% if doc-page.done %}{% include_cached ui/icon.html icon="check" color="green" class="mr-2" %}{% endif %}
+				{% endif %}
+
+				{{ doc[1].title }}
+
+				{% if doc[1].badge %}
+					{% assign badge = doc[1].badge %}
+					{% include ui/badge.html text=badge color="green" class="ml-auto" %}
+				{% endif %}
 			</a>
 			{% endfor %}
 		</div>
@@ -29,7 +40,7 @@ page-title: Documentation
 				<div class="markdown">
 					{% if page.bootstrap-link %}
 					<p class="mb-4 float-right">
-						<a href="{{ page.bootstrap-link }}" target="_blank">
+						<a href="https://getbootstrap.com/docs/4.4/{{ page.bootstrap-link }}" target="_blank">
 							{% include_cached ui/icon.html icon="external-link" color="blue" class="pr-1" %}
 							Bootstrap documentation
 						</a>
@@ -40,8 +51,6 @@ page-title: Documentation
 						{% if page.done %} {% include_cached ui/icon.html icon="check" color="green" %}{% endif %}
 					</h2>
 
-
-
 					{% if page.plugin %}
 					<div class="alert alert-info">This module is available in <code>tabler-{{ page.plugin }}</code>
 						plugin.

pages/index.html

@@ -4,6 +4,7 @@ page-title: Dashboard
 page-pretitle: Overview
 page-title-actions: buttons
 site-layout: layout-collapsed-md
+menu-layout: vertical
 menu: home
 ---
 

scss/_variables.scss

@@ -206,6 +206,7 @@ $breadcrumb-variants: (
 
 //badges
 $badge-font-weight: 500 !default;
+$badge-empty-size: .5rem !default;
 
 //buttons
 $input-btn-line-height: 1.5 !default;

scss/layout/_layout.scss

@@ -5,8 +5,111 @@ $sidenav-bg: $white;
 $sidenav-border-color: $border-color-alpha;
 $sidenav-dark-bg: $dark;
 $sidenav-padding: 1.25rem;
-$sidenav-breakpoint-show: 'md';
-$sidenav-breakpoint-folded: false;
+$sidenav-breakpoint-show: 'sm';
+$sidenav-breakpoint-folded: 'lg';
+$sidenav-folded-item-height: 3.5rem;
+
+@mixin sidebar-folded($breakpoint-folded) {
+  @if $breakpoint-folded {
+
+    @include media-breakpoint-down($breakpoint-folded) {
+      width: $sidenav-width-folded;
+
+      .sidebar-brand {
+        width: $sidenav-width-folded;
+      }
+
+      .sidebar-content {
+        padding: 0;
+        overflow: visible;
+      }
+
+      .sidebar-nav {
+        margin: 0;
+
+        > .sidebar-nav-item {
+          position: relative;
+          white-space: nowrap;
+
+          &:hover {
+            background: $primary;
+            width: $sidenav-width;
+
+            > .sidebar-nav-link {
+              color: #fff;
+
+              > span {
+                display: block;
+              }
+
+              .icon {
+                margin-right: add(1rem, $sidenav-padding);
+              }
+            }
+
+            .sidebar-subnav {
+              display: block;
+
+              .sidebar-nav-link {
+                padding-left: $sidenav-padding;
+              }
+            }
+          }
+
+          > .sidebar-nav-link {
+            min-height: $sidenav-folded-item-height;
+            padding: 0 1rem !important;
+            position: relative;
+
+            .icon {
+              margin: 0;
+              width: 2rem;
+              height: 1.125rem;
+            }
+
+            >span {
+              display: none;
+            }
+
+            .badge {
+              display: block;
+              position: absolute;
+              left: 2.5rem;
+              top: 1rem;
+
+              text-indent: -99999px;
+              width: $badge-empty-size;
+              height: $badge-empty-size;
+              padding: 0;
+            }
+          }
+        }
+      }
+
+      .sidebar-subnav {
+        display: none;
+        position: absolute;
+        top: $sidenav-folded-item-height;
+        left: $sidenav-width-folded;
+        right: 0;
+        padding: .5rem 0;
+        background: $dark;
+        box-shadow: -6px 0px 16px -10px rgba(0, 0, 0, 0.2), $box-shadow;
+      }
+
+      .sidebar-nav-title {
+        display: none;
+      }
+    }
+  }
+}
+
+@mixin sidebar-show($breakpoint-show) {
+  @include media-breakpoint-down($breakpoint-show) {
+    display: none;
+  }
+}
+
 
 /**
 Topnav
@@ -137,21 +240,14 @@ Sidebar
   z-index: $zindex-fixed;
   padding: 0;
   background: $white;
-  border-right: 1px solid $border-color-alpha;
+  box-shadow: inset -1px 0 $border-color-alpha;
   top: 0;
   bottom: 0;
   display: flex;
   flex-direction: column;
 
-  @if $sidenav-breakpoint-folded {
-    @include media-breakpoint-down($sidenav-breakpoint-folded) {
-      width: $sidenav-width-folded;
-    }
-  }
-
-  @include media-breakpoint-down($sidenav-breakpoint-show) {
-    display: none;
-  }
+  @include sidebar-folded($sidenav-breakpoint-folded);
+  @include sidebar-show($sidenav-breakpoint-show);
 }
 
 .sidebar-brand {
@@ -268,7 +364,7 @@ Sidebar dark
 .sidebar-dark {
   background: $dark;
   color: $text-muted;
-  border-color: transparent;
+  box-shadow: none;
 
   .sidebar-brand {
     filter: brightness(0) invert(1);

scss/layout/_navbar.scss

@@ -21,19 +21,6 @@ Navbar logo
   }
 
   .nav-item {
-    &.active .nav-link {
-      position: relative;
-
-      &:after {
-        content: '';
-        position: absolute;
-
-        bottom: -1px;
-        right: $navbar-nav-link-padding-x;
-        left: $navbar-nav-link-padding-x;
-        border-bottom: 1px solid $primary;
-      }
-    }
 
     &:hover {
       .dropdown-menu {

scss/ui/_badges.scss

+
+
 .badge {
   @include subheader(false);
   background: $gray-200;
@@ -8,9 +10,9 @@
 
   &:empty {
     display: inline-block;
-    width: 8px;
+    width: $badge-empty-size;
+    height: $badge-empty-size;
     min-width: 0;
-    height: 8px;
     min-height: auto;
     padding: 0;
     border-radius: 50%;

scss/ui/_progress.scss

@@ -39,6 +39,10 @@
   height: .25rem;
 }
 
+.progress-bar {
+  height: 100%;
+}
+
 .progress-bar-indeterminate {
   &::after,
   &::before {