diff --git a/pages/_includes/forms/form-elements-2.html b/pages/_includes/forms/form-elements-2.html
index 46a9be17a..bb7c97442 100644
--- a/pages/_includes/forms/form-elements-2.html
+++ b/pages/_includes/forms/form-elements-2.html
@@ -9,12 +9,12 @@
-
+
{% include ui/form/input-group.html prepend="https://tabler.io/users/" class="input-group-flat" input-class="pl-0" %}
-
+
{% include ui/form/input-group.html append=".tabler.io" input-class="text-right pr-0" class="input-group-flat" %}
diff --git a/pages/_includes/layout/sidebar.html b/pages/_includes/layout/sidebar.html
index edc10a65e..e2caa8e5d 100644
--- a/pages/_includes/layout/sidebar.html
+++ b/pages/_includes/layout/sidebar.html
@@ -6,10 +6,22 @@
{% include layout/menu-aside.html %}
+
+
-
+
+
diff --git a/pages/index.html b/pages/index.html
index 401f49f16..516efda9c 100644
--- a/pages/index.html
+++ b/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 %}
diff --git a/scss/layout/_layout.scss b/scss/layout/_layout.scss
index 2a0ed87e0..938ac1dd3 100644
--- a/scss/layout/_layout.scss
+++ b/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);
+ }
}