aside menu

_config.yml

@@ -6,7 +6,7 @@ title: Tabler
 description: Premium and Open Source dashboard template with responsive and high quality UI.
 github_url: https://github.com/tabler/tabler
 
-debug: true
+debug: false
 
 plugins:
 - jekyll-random

pages/_data/menu.yml

@@ -7,6 +7,7 @@ forms:
   url: form-elements.html
   title: Form elements
   icon: check-square
+  badge: New
 
 base:
   title: Base
@@ -15,42 +16,48 @@ base:
     buttons:
       url: buttons.html
       title: Buttons
+      badge: New
     cards:
       url: cards.html
       title: Cards
-    c:
-      url: c.html
-      title: C
+    calendar:
+      title: Calendar
+      icon: calendar
+      url: calendar.html
+    users:
+      title: Users
+      icon: users
+      url: users.html
+    gallery:
+      title: Gallery
+      icon: image
+      url: gallery.html
 
 charts:
   url: charts.html
   title: Charts
   icon: pie-chart
 
-calendar:
-  title: Calendar
-  icon: calendar
-  url: calendar.html
-
-users:
-  title: Users
-  icon: users
-  url: users.html
-
-gallery:
-  title: Gallery
-  icon: image
-  url: gallery.html
 
 layouts:
   title: Layouts
   icon: layout
   url: layouts.html
 
+extra:
+  title: Extra
+  icon: star
+  children:
+    invoice:
+      icon: file
+      title: Invoice
+      url: invoice.html
+
 docs:
   title: Documentation
   icon: file-text
   url: docs/index.html
+  docs: true
 
 #changelog:
 #  url: changelog.html

pages/_includes/layout/aside.html

@@ -1,7 +0,0 @@
-<aside class="sidebar sidebar-dark">
-	<!-- Sidebar logo -->
-	{% include_cached parts/navbar-logo.html prefix="sidebar" %}
-
-	<!-- Sidebar menu -->
-	Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores commodi consequuntur, doloribus fugiat mollitia nesciunt pariatur quod reiciendis, sequi soluta tempora unde? Ab eligendi molestiae odio, pariatur quisquam quo voluptas.
-</aside>

pages/_includes/layout/menu-aside.html

@@ -0,0 +1,38 @@
+{% assign current-page = page.menu | default: layout.menu | split: '.' %}
+
+<ul class="sidebar-nav">
+	<li class="sidebar-nav-title">Navigation</li>
+	{% 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 %}">
+			{% if level-1[1].icon %}
+				{% assign icon = level-1[1].icon %}
+				{% include ui/icon.html icon=icon %}
+			{% endif %}
+
+			<span>{{ level-1[1].title }}</span>
+		</a>
+
+		{% comment %}
+		<div class="sidebar-nav-title">{{ level-1[1].title }}</div>
+		{% endcomment %}
+
+		{% if level-1[1].children %}
+		<ul>
+			{% 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 %}">
+					<span>{{ level-2[1].title }}</span>
+					{% if level-2[1].badge %}
+					{% assign badge = level-2[1].badge %}
+					{% include ui/badge.html text=badge color="green" %}
+					{% endif %}
+				</a>
+			</li>
+			{% endfor %}
+		</ul>
+		{% endif %}
+	</li>
+	{% endfor %}
+</ul>

pages/_includes/layout/menu.html

@@ -1,7 +1,5 @@
-{% removeemptylines %}
-<ul class="navbar-nav flex-wrap{% if include.class %} {{ include.class }}{% endif %}">
 {% assign current-page = page.menu | default: layout.menu | split: '.' %}
-
+<ul class="navbar-nav flex-wrap{% if include.class %} {{ include.class }}{% endif %}">
    {% for level-1 in site.data.menu %}
    {% assign icon = level-1[1].icon %}
 
@@ -46,4 +44,3 @@
    </li>
    {% endfor %}
 </ul>
-{% endremoveemptylines %}

pages/_includes/layout/navbar-logo.html

@@ -1,6 +1,6 @@
 {% assign prefix = include.prefix | default: 'navbar' %}
 
-<a href="{{ site.base }}" class="{{ prefix }}-brand">
+<a href="{{ site.base }}" class="{{ prefix }}-brand{% if include.class %} {{ include.class }}{% endif %}">
 	<img src="{{ site.base }}/img/logo{% if include.dark %}-white{% endif %}.svg" alt="{{ site.title }}" class="{{ prefix }}-brand-logo {{ prefix }}-brand-logo-lg">
 	<img src="{{ site.base }}/img/logo-small{% if include.dark %}-white{% endif %}.svg" alt="{{ site.title }}" class="{{ prefix }}-brand-logo {{ prefix }}-brand-logo-sm">
 </a>

pages/_includes/layout/navbar-search.html

@@ -1,4 +1,4 @@
-<div class="navbar-search ml-4 d-none d-lg-block">
+<div class="navbar-search d-none d-lg-block">
    <form action="" method="get">
       <input type="text" name="q" class="form-control bg-light" placeholder="Search...">
    </form>

pages/_includes/layout/navbar.html

@@ -1,11 +1,11 @@
 {% assign person-id = include.person-id | default: 12 | minus: 1 %}
 {% assign person = site.data.people[person-id] %}
 
-{% if page.menu-layout != 'vertical' %}
-	{% include_cached parts/navbar-logo.html %}
+{% if include.menu-layout != 'vertical' %}
+	{% include_cached layout/navbar-logo.html class="mr-4" %}
 {% endif %}
 
-{% include_cached parts/navbar-search.html %}
+{% include_cached layout/navbar-search.html %}
 
 <ul class="nav navbar-menu align-items-center ml-auto">
    <li class="nav-item d-none d-lg-flex mr-3">

pages/_includes/layout/sidebar.html

@@ -0,0 +1,15 @@
+<aside class="sidebar sidebar-dark">
+	<!-- Sidebar logo -->
+	{% include_cached layout/navbar-logo.html prefix="sidebar" %}
+
+	<div class="sidebar-content">
+		<div>
+			<!-- Sidebar menu -->
+			{% include layout/menu-aside.html %}
+		</div>
+
+		<div class="mt-auto">
+			{% include ui/button.html text="Logout" color="primary" icon="log-out" block=true %}
+		</div>
+	</div>
+</aside>

pages/_includes/layout/topnav.html

@@ -1,7 +1,7 @@
 <header class="topnav topbar">
    <div class="container{% if include.fluid %}-fluid{% endif %}">
       <div class="navbar navbar-expand-lg {% if include.dark %}navbar-dark bg-dark text-white{% else %}navbar-light{% endif %}{% if include.sticky %} navbar-sticky{% endif %}">
-         {% include_cached parts/navbar.html search=true %}
+         {% include_cached layout/navbar.html search=true menu-layout=page.menu-layout %}
       </div>
    </div>
 </header>

pages/_layouts/default.html

@@ -5,7 +5,7 @@ layout: base
 <div class="wrapper">
 
 	{% if page.menu-layout == 'vertical' %}
-		{% include layout/aside.html %}
+		{% include layout/sidebar.html %}
 	{% endif %}
 
 	<div class="content">

pages/layout-test.html

@@ -5,6 +5,7 @@ sidenav-dark: true
 page-title: Layout test
 page-title-actions: breadcrumb
 menu-layout: vertical
+menu: base.buttons
 ---
 
 <div class="card" id="card-test">

scss/_dark.scss

@@ -41,11 +41,11 @@
 }
 
 body.theme-dark {
-  @include dark-mode ();
+  @include dark-mode;
 }
 
 @media (prefers-color-scheme: dark) {
   body.auto-theme-dark {
-    @include dark-mode ();
+    @include dark-mode;
   }
 }

scss/layout/_core.scss

@@ -11,20 +11,10 @@ body {
   touch-action: manipulation;
   text-rendering: optimizeLegibility;
   font-feature-settings: "liga" 0;
-}
 
-body *::-webkit-scrollbar {
-  width: 6px;
-  height: 6px;
-  transition: .3s background;
+  * {
+    @include scrollbar;
   }
-
-body *::-webkit-scrollbar-thumb {
-  background: $gray-400;
-}
-
-body *:hover::-webkit-scrollbar-thumb {
-  background: $gray-500;
 }
 
 /**

scss/layout/_layout.scss

@@ -1,14 +1,16 @@
-
 //sidenav
 $sidenav-width: 16.25rem;
 $sidenav-width-folded: 4rem;
 $sidenav-bg: $white;
 $sidenav-border-color: $border-color-alpha;
 $sidenav-dark-bg: $dark;
-$sidenav-link-padding-x: .75rem;
+$sidenav-padding: 1.25rem;
 $sidenav-breakpoint-show: 'md';
 $sidenav-breakpoint-folded: false;
 
+/**
+Topnav
+ */
 .topnav {
   border-bottom: 1px solid;
   background-color: $navbar-bg;
@@ -37,6 +39,9 @@ $sidenav-breakpoint-folded: false;
   }
 }
 
+/**
+Topbar
+ */
 .topbar {
   position: absolute;
   top: 0;
@@ -75,12 +80,18 @@ $sidenav-breakpoint-folded: false;
   z-index: $zindex-fixed;
 }
 
+/**
+Wrapper
+ */
 .wrapper {
   height: 100%;
   overflow: hidden;
   width: 100%;
 }
 
+/**
+Content
+ */
 .content {
   overflow: hidden;
   min-height: 100vh;
@@ -124,12 +135,13 @@ Sidebar
   width: $sidenav-width;
   position: fixed;
   z-index: $zindex-fixed;
-  padding: .75rem;
+  padding: 0;
   background: $white;
   border-right: 1px solid $border-color-alpha;
-  //padding-top: $navbar-height;
   top: 0;
   bottom: 0;
+  display: flex;
+  flex-direction: column;
 
   @if $sidenav-breakpoint-folded {
     @include media-breakpoint-down($sidenav-breakpoint-folded) {
@@ -143,10 +155,14 @@ Sidebar
 }
 
 .sidebar-brand {
-  line-height: 1;
   display: block;
   text-align: center;
-  margin-bottom: 1.5rem;
+
+  line-height: $navbar-height;
+  width: $sidenav-width;
+  position: fixed;
+  top: 0;
+  left: 0;
 }
 
 .sidebar-brand-logo {
@@ -169,9 +185,89 @@ Sidebar
   }
 }
 
+.sidebar-content {
+  padding: $sidenav-padding;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  overflow: auto;
+  @include scrollbar(true);
+
+  .sidebar-brand + & {
+    margin-top: $navbar-height;
+  }
+}
+
+/**
+Sidebar menu
+ */
+.sidebar-nav {
+  margin: (-$sidenav-padding) (-$sidenav-padding) $sidenav-padding;
+  padding: 0;
+  list-style: none;
+
+  ul {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+}
+
+.sidebar-nav-link {
+  padding: .5rem $sidenav-padding;
+  transition: .3s color, .3s background-color;
+  color: inherit;
+  display: flex;
+  align-items: center;
+
+  .sidebar-nav-item .sidebar-nav-item & {
+    padding-left: add(1.5rem, $sidenav-padding);
+  }
+
+  .sidebar-nav-item .sidebar-nav-item .sidebar-nav-item & {
+    padding-left: add(3rem, $sidenav-padding);
+  }
+
+  &:hover {
+    background-color: rgba(#fff, .02);
+    text-decoration: none;
+    color: #fff;
+  }
+
+  &.active {
+    opacity: 1;
+    color: #fff;
+    box-shadow: inset 3px 0 $primary;
+    background-color: rgba(#fff, .01);
+  }
+
+  .icon {
+    width: 1rem;
+    margin-right: .5rem;
+  }
+
+  .badge {
+    margin-left: auto;
+  }
+}
+
+.sidebar-nav-title {
+  @include subheader(false);
+  color: inherit;
+  opacity: .8;
+  padding: $sidenav-padding $sidenav-padding .5rem;
+
+  &:not(:first-child) {
+    margin-top: .5rem;
+  }
+}
+
+/**
+Sidebar dark
+ */
 .sidebar-dark {
   background: $dark;
-  color: $white;
+  color: $text-muted;
   border-color: transparent;
 
   .sidebar-brand {

scss/mixins/_mixins.scss

@@ -8,3 +8,31 @@
     color: $text-muted;
   }
 }
+
+@mixin scrollbar($is-dark: false) {
+  &::-webkit-scrollbar {
+    width: 6px;
+    height: 6px;
+    transition: .3s background;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    border-radius: 5px;
+
+    @if ($is-dark) {
+      background: transparent;
+    } @else {
+      background: $gray-400;
+    }
+  }
+
+  &:hover::-webkit-scrollbar-thumb {
+    background: $gray-500;
+
+    @if ($is-dark) {
+      background: mix(#fff, $dark, 20%);
+    } @else {
+      background: $gray-500;
+    }
+  }
+}