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 %} + +
+
+ +
+
+ 160MB from 2GB used. +
+ {% include ui/progress.html percentage=30 size="sm" %} +
+
-
+
{% include ui/button.html text="Logout" color="primary" icon="log-out" block=true %}
+ 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); + } }