light sidebar fixes

pages/_includes/forms/form-elements-2.html

@@ -9,12 +9,12 @@
 </div>
 
 <div class="mb-3">
-   <label class="form-label">Your custom URL</label>
+   <label class="form-label">Input with prepended text</label>
    {% include ui/form/input-group.html prepend="https://tabler.io/users/" class="input-group-flat" input-class="pl-0" %}
 </div>
 
 <div class="mb-3">
-   <label class="form-label">Your custom subdomain</label>
+   <label class="form-label">Input with appended text</label>
    {% include ui/form/input-group.html append=".tabler.io" input-class="text-right pr-0" class="input-group-flat" %}
 </div>
 

pages/_includes/layout/sidebar.html

@@ -6,10 +6,22 @@
 		<div>
 			<!-- Sidebar menu -->
 			{% include layout/menu-aside.html %}
+
+			<div class="hide-sidebar-folded">
+				<hr>
+
+				<div class="text-muted">
+					<div class="mb-2">
+						<strong>160MB</strong> from <strong>2GB</strong> used.
+					</div>
+					{% include ui/progress.html percentage=30 size="sm" %}
+				</div>
+			</div>
 		</div>
 
-		<div class="mt-auto">
+		<div class="mt-auto hide-sidebar-folded">
 			{% include ui/button.html text="Logout" color="primary" icon="log-out" block=true %}
 		</div>
 	</div>
 </aside>
+

pages/index.html

@@ -4,6 +4,7 @@ page-title: Dashboard
 page-pretitle: Overview
 page-title-actions: buttons
 menu: home
+menu-layout: vertical
 ---
 
 {% include layout/homepage.html %}

scss/layout/_layout.scss

@@ -9,10 +9,10 @@ $sidenav-breakpoint-show: 'sm';
 $sidenav-breakpoint-folded: 'lg';
 $sidenav-folded-item-height: 3.5rem;
 
-@mixin sidebar-folded($breakpoint-folded) {
+@mixin sidebar-folded($breakpoint-folded, $breakpoint-show: false) {
   @if $breakpoint-folded {
 
-    @include media-breakpoint-down($breakpoint-folded) {
+    @include media-breakpoint-between($breakpoint-show, $breakpoint-folded) {
       width: $sidenav-width-folded;
 
       .sidebar-brand {
@@ -104,6 +104,10 @@ $sidenav-folded-item-height: 3.5rem;
       .sidebar-nav-title {
         display: none;
       }
+
+      .hide-sidebar-folded {
+        display: none !important
+      }
     }
   }
 }
@@ -278,7 +282,7 @@ Sidebar
   display: flex;
   flex-direction: column;
 
-  @include sidebar-folded($sidenav-breakpoint-folded);
+  @include sidebar-folded($sidenav-breakpoint-folded, $sidenav-breakpoint-show);
   @include sidebar-show($sidenav-breakpoint-show);
 }
 
@@ -319,7 +323,7 @@ Sidebar
   display: flex;
   flex-direction: column;
   overflow-y: scroll;
-  @include scrollbar(true);
+  @include scrollbar;
 
   .sidebar-brand + & {
     margin-top: $navbar-height;
@@ -334,6 +338,7 @@ Sidebar menu
   padding: 0;
   list-style: none;
   user-select: none;
+  color: $text-muted;
 
   ul {
     margin: 0;
@@ -360,13 +365,13 @@ Sidebar menu
   &:hover {
     background-color: rgba(#fff, .02);
     text-decoration: none;
-    color: #ffffff !important;
+    color: $body-color !important;
     cursor: pointer !important;
   }
 
   &.active {
     opacity: 1;
-    color: #ffffff;
+    color: $body-color !important;
     box-shadow: inset 3px 0 $primary;
     background-color: rgba(#fff, .01);
   }
@@ -421,4 +426,15 @@ Sidebar dark
   .sidebar-brand {
     filter: brightness(0) invert(1);
   }
+
+  .sidebar-nav-link {
+    &:hover,
+    &.active {
+      color: $white !important;
+    }
+  }
+
+  .sidebar-content {
+    @include scrollbar(true);
+  }
 }