Mirrors/tabler
1
0
Fork 0
mirror of https://github.com/tabler/tabler.git synced 2025-12-26 11:16:12 +04:00
Code Issues Projects Releases Wiki Activity

narrow sidebar

Browse Source
This commit is contained in:
codecalm
2020-01-14 21:54:41 +01:00
parent 60169a73d9
commit 3980d720e1
2 changed files with 111 additions and 98 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
pages/_includes/layout/sidebar.html
View File

@@ -7,7 +7,7 @@
<!-- Sidebar menu --> <!-- Sidebar menu -->
{% include layout/menu-aside.html %} {% include layout/menu-aside.html %}
<div class="hide-sidebar-folded"> <div class="hide-sidebar-narrow">
<hr> <hr>
<div class="text-muted"> <div class="text-muted">
@@ -19,7 +19,7 @@
</div> </div>
</div> </div>
<div class="mt-auto hide-sidebar-folded pt-3"> <div class="mt-auto hide-sidebar-narrow pt-3">
{% include ui/button.html text="Logout" color="primary" icon="log-out" block=true %} {% include ui/button.html text="Logout" color="primary" icon="log-out" block=true %}
</div> </div>
</div> </div>

205
scss/layout/_layout.scss
View File

@@ -1,6 +1,6 @@
//sidenav //sidenav
$sidenav-width: 16rem; $sidenav-width: 16rem;
$sidenav-width-folded: 4rem; $sidenav-width-narrow: 4rem;
$sidenav-bg: $white; $sidenav-bg: $white;
$sidenav-border-color: $border-color; $sidenav-border-color: $border-color;
$sidenav-dark-bg: $dark; $sidenav-dark-bg: $dark;
@@ -9,107 +9,112 @@ $sidenav-breakpoint-show: 'sm';
$sidenav-breakpoint-folded: 'lg'; $sidenav-breakpoint-folded: 'lg';
$sidenav-folded-item-height: 3.5rem; $sidenav-folded-item-height: 3.5rem;
@mixin sidebar-folded($breakpoint-folded, $breakpoint-show: false) { @mixin sidebar-narrow {
@if $breakpoint-folded { width: $sidenav-width-narrow;
@include media-breakpoint-between($breakpoint-show, $breakpoint-folded) { .sidebar-brand {
width: $sidenav-width-folded; width: $sidenav-width-narrow;
}
.sidebar-brand { .sidebar-brand-logo {
width: $sidenav-width-folded; &-sm {
} display: inline-block;
}
.sidebar-content { &-lg {
padding: 0; display: none;
overflow: visible; }
} }
.sidebar-nav { .sidebar-content {
margin: 0; padding: 0;
overflow: visible;
}
> .sidebar-nav-item { .sidebar-nav {
position: relative; margin: 0;
white-space: nowrap;
&:hover { > .sidebar-nav-item {
background: $primary; position: relative;
width: $sidenav-width; white-space: nowrap;
> .sidebar-nav-link { &:hover {
color: #ffffff; background: $primary;
width: $sidenav-width;
> span { > .sidebar-nav-link {
display: block; color: #ffffff;
}
.icon { > span {
margin-right: add(1rem, $sidenav-padding); display: block;
}
}
.sidebar-subnav {
display: block;
.sidebar-nav-link {
padding-left: $sidenav-padding;
}
}
} }
> .sidebar-nav-link { .icon {
min-height: $sidenav-folded-item-height; margin-right: add(1rem, $sidenav-padding);
padding: 0 1rem !important; }
position: relative; }
.icon { .sidebar-subnav {
margin: 0; display: block;
width: 2rem;
height: 1.125rem;
}
> span { .sidebar-nav-link {
display: none; padding-left: $sidenav-padding;
}
.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 { > .sidebar-nav-link {
display: none; min-height: $sidenav-folded-item-height;
position: absolute; padding: 0 1rem !important;
top: $sidenav-folded-item-height; position: relative;
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-arrow { .icon {
display: none !important; margin: 0;
} width: 2rem;
height: 1.125rem;
}
.sidebar-nav-title { > span {
display: none; display: none;
} }
.hide-sidebar-folded { .badge {
display: none !important 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-narrow;
right: 0;
padding: .5rem 0;
background: $dark;
box-shadow: -6px 0px 16px -10px rgba(0, 0, 0, 0.2), $box-shadow;
}
.sidebar-nav-arrow {
display: none !important;
}
.sidebar-nav-title {
display: none;
}
.hide-sidebar-narrow {
display: none !important
}
} }
@mixin sidebar-show($breakpoint-show) { @mixin sidebar-show($breakpoint-show) {
@@ -134,12 +139,12 @@ Top nav
user-select: none; user-select: none;
& + & { & + & {
top: add($navbar-height, 1px); top: $navbar-height;
z-index: $zindex-sticky - 1; z-index: $zindex-sticky - 1;
} }
& + & + & { & + & + & {
top: add($navbar-height * 2, 2px); top: $navbar-height * 2;
z-index: $zindex-sticky - 2; z-index: $zindex-sticky - 2;
} }
@@ -193,7 +198,7 @@ Top nav
@if $sidenav-breakpoint-folded { @if $sidenav-breakpoint-folded {
@include media-breakpoint-down($sidenav-breakpoint-folded) { @include media-breakpoint-down($sidenav-breakpoint-folded) {
left: $sidenav-width-folded; left: $sidenav-width-narrow;
} }
} }
@@ -233,7 +238,7 @@ Content
@if $sidenav-breakpoint-folded { @if $sidenav-breakpoint-folded {
@include media-breakpoint-down($sidenav-breakpoint-folded) { @include media-breakpoint-down($sidenav-breakpoint-folded) {
margin-left: $sidenav-width-folded; margin-left: $sidenav-width-narrow;
} }
} }
@@ -281,7 +286,12 @@ Sidebar
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@include sidebar-folded($sidenav-breakpoint-folded, $sidenav-breakpoint-show); @if $sidenav-breakpoint-folded {
@include media-breakpoint-between($sidenav-breakpoint-show, $sidenav-breakpoint-folded) {
@include sidebar-narrow;
}
}
@include sidebar-show($sidenav-breakpoint-show); @include sidebar-show($sidenav-breakpoint-show);
} }
@@ -302,18 +312,6 @@ Sidebar
&-sm { &-sm {
display: none; display: none;
} }
@if $sidenav-breakpoint-folded {
@include media-breakpoint-down($sidenav-breakpoint-folded) {
&-sm {
display: inline-block;
}
&-lg {
display: none;
}
}
}
} }
.sidebar-content { .sidebar-content {
@@ -456,3 +454,18 @@ Right sidebar
} }
} }
} }
/**
Folded sidebar
*/
.sidebar-narrow {
@include sidebar-narrow;
+ .content {
margin-left: $sidenav-width-narrow;
.topnav {
left: $sidenav-width-narrow;
}
}
}