-
- 
- AdminLTE 4
-
-
+
+
+
+
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/scss/_custom-variables.scss b/scss/_custom-variables.scss
index 61fa97862..a6e197bb9 100644
--- a/scss/_custom-variables.scss
+++ b/scss/_custom-variables.scss
@@ -86,6 +86,10 @@ $nav-link-sm-height: ($font-size-sm * $line-height-sm + $nav-link-
$main-header-height-sm-inner: ($nav-link-sm-height + ($main-header-link-padding-y * 2)) !default;
$main-header-height-sm: add($main-header-height-sm-inner, $main-header-bottom-border-width) !default;
+// Content padding
+$content-padding-y: 0 !default;
+$content-padding-x: .5rem !default;
+
// MAIN FOOTER
// --------------------------------------------------------
$main-footer-padding: 1rem !default;
diff --git a/scss/_layout.scss b/scss/_layout.scss
index ff3839449..2181240ac 100644
--- a/scss/_layout.scss
+++ b/scss/_layout.scss
@@ -1,11 +1,15 @@
@import "layout/wrapper";
@import "layout/main-header";
+@import "layout/main-brand";
@import "layout/main-sidebar";
-@import "layout/brand";
@import "layout/sidebar";
+@import "layout/nav-sidebar";
@import "layout/sidebar-close";
@import "layout/sidebar-mini";
@import "layout/sidebar-horizontal";
@import "layout/content-wrapper";
+@import "layout/content-header";
+@import "layout/content";
@import "layout/main-footer";
@import "layout/layout-fixed";
+@import "layout/layout-mobile";
diff --git a/scss/_mixins.scss b/scss/_mixins.scss
index 3551ebc81..540977446 100644
--- a/scss/_mixins.scss
+++ b/scss/_mixins.scss
@@ -4,5 +4,6 @@
@import "mixins/animations";
@import "mixins/scrollbar";
-@import "mixins/sidebar-theme";
+@import "mixins/brand-variant";
+@import "mixins/sidebar-variant";
@import "mixins/miscellaneous";
diff --git a/scss/layout/_content-header.scss b/scss/layout/_content-header.scss
new file mode 100644
index 000000000..f895317a5
--- /dev/null
+++ b/scss/layout/_content-header.scss
@@ -0,0 +1,9 @@
+.content-header {
+ padding: 1rem $content-padding-x;
+
+ .breadcrumb {
+ margin-bottom: 0;
+ padding: 0;
+ line-height: 2.5rem;
+ }
+}
diff --git a/scss/layout/_content.scss b/scss/layout/_content.scss
new file mode 100644
index 000000000..d955581a2
--- /dev/null
+++ b/scss/layout/_content.scss
@@ -0,0 +1,3 @@
+.content {
+ padding: $content-padding-y $content-padding-x;
+}
diff --git a/scss/layout/_layout-fixed.scss b/scss/layout/_layout-fixed.scss
index a9e43a9ef..9364ebc8a 100644
--- a/scss/layout/_layout-fixed.scss
+++ b/scss/layout/_layout-fixed.scss
@@ -1,41 +1,51 @@
-.layout-fixed:not(.sidebar-horizontal) {
- .main-sidebar {
- bottom: 0;
- float: none;
- left: 0;
- position: fixed;
- top: 0;
- }
+@include media-breakpoint-up(md) {
+ .layout-fixed:not(.sidebar-horizontal) {
+ .main-brand {
+ bottom: 0;
+ float: none;
+ left: 0;
+ position: fixed;
+ top: 0;
+ }
- .main-header,
- .content-wrapper,
- .main-footer {
- margin-left: $sidebar-width;
- transition: $transition-speed $transition-fn;
- }
+ .main-sidebar {
+ bottom: 0;
+ float: none;
+ left: 0;
+ position: fixed;
+ top: auto;
+ }
- &.sidebar-collapse {
.main-header,
.content-wrapper,
.main-footer {
- margin-left: $sidebar-mini-width;
+ margin-left: $sidebar-width;
+ transition: $transition-speed $transition-fn;
+ }
+
+ &.sidebar-collapse {
+ .main-header,
+ .content-wrapper,
+ .main-footer {
+ margin-left: $sidebar-mini-width;
+ }
+ }
+
+ &.sidebar-close {
+ .main-header,
+ .content-wrapper,
+ .main-footer {
+ margin-left: 0;
+ }
}
}
- &.sidebar-close {
- .main-header,
- .content-wrapper,
- .main-footer {
- margin-left: 0;
- }
+ .layout-fixed .wrapper .sidebar {
+ // stylelint-disable-next-line
+ height: calc(100vh - #{$main-header-height-inner});
}
-}
-
-.layout-fixed .wrapper .sidebar {
- // stylelint-disable-next-line
- height: calc(100vh - (#{$main-header-height-inner} + #{$main-header-bottom-border-width}));
-}
-.layout-fixed.text-sm .wrapper .sidebar {
- // stylelint-disable-next-line
- height: calc(100vh - (#{$main-header-height-sm-inner} + #{$main-header-bottom-border-width}));
+ // .layout-fixed.text-sm .wrapper .sidebar {
+ // // stylelint-disable-next-line
+ // height: calc(100vh - (#{$main-header-height-sm-inner} + #{$main-header-bottom-border-width}));
+ // }
}
diff --git a/scss/layout/_layout-mobile.scss b/scss/layout/_layout-mobile.scss
new file mode 100644
index 000000000..b17137c12
--- /dev/null
+++ b/scss/layout/_layout-mobile.scss
@@ -0,0 +1,41 @@
+@include media-breakpoint-down(md) {
+ .wrapper {
+ grid-template-areas:
+ "main-sidebar main-brand main-header"
+ "main-sidebar content-wrapper main-header"
+ "main-sidebar main-footer main-header";
+ grid-template-columns: auto auto auto;
+
+ .main-sidebar {
+ position: fixed;
+ top: 0;
+ bottom: 0;
+ margin-left: -#{$sidebar-width};
+ min-height: 100vh;
+
+ .sidebar {
+ overflow-x: hidden;
+ overflow-y: auto;
+ }
+ }
+
+ .main-header {
+ display: none;
+ }
+
+ .brand-link {
+ animation: none;
+ }
+
+ .sidebar-full-icon,
+ .header-full-icon {
+ display: block;
+ }
+ }
+
+ .sidebar-open {
+ .main-sidebar {
+ margin-left: 0;
+ }
+ }
+}
diff --git a/scss/layout/_brand.scss b/scss/layout/_main-brand.scss
similarity index 59%
rename from scss/layout/_brand.scss
rename to scss/layout/_main-brand.scss
index c5a1555f0..ad04218a5 100644
--- a/scss/layout/_brand.scss
+++ b/scss/layout/_main-brand.scss
@@ -2,8 +2,10 @@
// Core: Brand
//
-.brand-container {
- grid-area: brand;
+@include brand-variant($sidebar-dark-bg, $sidebar-dark-color);
+
+.main-brand {
+ grid-area: main-brand;
display: grid;
grid-template-areas: "brand-link sidebar-mini-icon";
grid-auto-flow: column;
@@ -12,6 +14,11 @@
padding: $brand-link-padding-y $sidebar-padding-x;
white-space: nowrap;
border-bottom: $brand-link-border-buttom solid tint-color($dark, 10%);
+ min-width: $sidebar-width;
+ max-width: $sidebar-width;
+ height: min-content;
+ @include transition($sidebar-transition);
+ z-index: $zindex-sidebar;
.brand-link {
grid-area: brand-link;
@@ -38,19 +45,42 @@
}
}
+ .brand-icons {
+ display: inline-flex;
+
+ > * {
+ color: $gray-400;
+ }
+ }
+
+ .sidebar-full-icon,
+ .header-full-icon {
+ display: none;
+ }
+
.sidebar-mini-icon {
grid-area: sidebar-mini-icon;
- color: $gray-400;
}
}
.sidebar-collapse:not(.sidebar-hover) {
- .brand-container {
+ .main-brand {
grid-template-areas: "sidebar-mini-icon brand-link";
justify-content: center;
-
+ min-width: $sidebar-mini-width;
+ max-width: $sidebar-mini-width;
.brand-link {
display: none;
}
}
}
+
+@include media-breakpoint-down(md) {
+ .main-brand {
+ min-width: unset;
+ max-width: unset;
+ .sidebar-mini-icon {
+ display: none;
+ }
+ }
+}
diff --git a/scss/layout/_main-footer.scss b/scss/layout/_main-footer.scss
index fee501279..a4d32aba0 100644
--- a/scss/layout/_main-footer.scss
+++ b/scss/layout/_main-footer.scss
@@ -10,10 +10,10 @@
padding: $main-footer-padding;
width: inherit;
- .text-sm &,
- &.text-sm {
- padding: $main-footer-padding-sm;
- }
+ // .text-sm &,
+ // &.text-sm {
+ // padding: $main-footer-padding-sm;
+ // }
}
.layout-footer-fixed {
diff --git a/scss/layout/_main-sidebar.scss b/scss/layout/_main-sidebar.scss
index 6f9f5d9ff..15eedd028 100644
--- a/scss/layout/_main-sidebar.scss
+++ b/scss/layout/_main-sidebar.scss
@@ -3,7 +3,7 @@
//
// Default Sidebar Theme
-@include sidebar-theme($sidebar-dark-bg, $sidebar-dark-color);
+@include sidebar-variant($sidebar-dark-bg, $sidebar-dark-color);
.main-sidebar {
grid-area: main-sidebar;
@@ -13,7 +13,11 @@
max-width: $sidebar-width;
}
-@include media-breakpoint-down(sm) {
+@include media-breakpoint-down(md) {
+ // .main-sidebar {
+ // display: block;
+ // position: fixed;
+ // }
// .main-sidebar {
// margin-left: -#{$sidebar-width};
@@ -33,43 +37,3 @@
// }
}
-
-// Sidebar navigation menu
-.nav-sidebar {
- // All levels
- .nav-link > .right,
- .nav-link > span > .right {
- position: absolute;
- right: 1rem;
- top: .7rem;
- }
-
- .nav-link {
- position: relative;
-
- span {
- display: inline-block;
- padding-left: .5rem;
- }
-
- .nav-icon {
- padding-left: .3rem;
- }
- }
-
- .nav-header {
- font-size: .9rem;
- padding: $nav-link-padding-y ($nav-link-padding-y * 1.5);
- }
-
- // Tree view menu
- .nav-treeview {
- display: none;
- list-style: none;
- padding: 0;
- }
-
- .menu-open > .nav-treeview {
- display: block;
- }
-}
diff --git a/scss/layout/_nav-sidebar.scss b/scss/layout/_nav-sidebar.scss
new file mode 100644
index 000000000..dc417f295
--- /dev/null
+++ b/scss/layout/_nav-sidebar.scss
@@ -0,0 +1,39 @@
+// Sidebar navigation menu
+.nav-sidebar {
+ // All levels
+ .nav-link > .right,
+ .nav-link > span > .right {
+ position: absolute;
+ right: 1rem;
+ top: .7rem;
+ }
+
+ .nav-link {
+ position: relative;
+
+ span {
+ display: inline-block;
+ padding-left: .5rem;
+ }
+
+ .nav-icon {
+ padding-left: .3rem;
+ }
+ }
+
+ .nav-header {
+ font-size: .9rem;
+ padding: $nav-link-padding-y ($nav-link-padding-y * 1.5);
+ }
+
+ // Tree view menu
+ .nav-treeview {
+ display: none;
+ list-style: none;
+ padding: 0;
+ }
+
+ .menu-open > .nav-treeview {
+ display: block;
+ }
+}
diff --git a/scss/layout/_sidebar-close.scss b/scss/layout/_sidebar-close.scss
index 28bb79896..ffdbf4ba8 100644
--- a/scss/layout/_sidebar-close.scss
+++ b/scss/layout/_sidebar-close.scss
@@ -1,5 +1,12 @@
-.sidebar-close:not(.sidebar-horizontal) .main-sidebar {
- margin-left: -250px;
+.sidebar-close:not(.sidebar-horizontal) {
+ .main-sidebar {
+ margin-left: -#{$sidebar-width};
+ }
+ @include media-breakpoint-up(md) {
+ .main-brand {
+ margin-left: -#{$sidebar-width};
+ }
+ }
}
@include media-breakpoint-up(sm) {
diff --git a/scss/layout/_sidebar-horizontal.scss b/scss/layout/_sidebar-horizontal.scss
index 526efa309..0a72b2c62 100644
--- a/scss/layout/_sidebar-horizontal.scss
+++ b/scss/layout/_sidebar-horizontal.scss
@@ -1,62 +1,67 @@
-.sidebar-horizontal {
- .wrapper {
- grid-template-areas:
- "main-header"
- "main-sidebar"
- "content-wrapper"
- "main-footer";
- grid-template-columns: 1fr;
- grid-template-rows: max-content max-content auto max-content;
- }
+@include media-breakpoint-up(md) {
+ .sidebar-horizontal {
+ .wrapper {
+ grid-template-areas:
+ "main-header"
+ "main-sidebar"
+ "content-wrapper"
+ "main-footer";
+ grid-template-columns: auto;
+ grid-template-rows: max-content max-content auto max-content;
+ }
- .main-sidebar {
- display: grid;
- height: $sidebar-horizontal-height;
- min-width: $sidebar-horizontal-width;
- max-width: $sidebar-horizontal-width;
- justify-content: start;
- z-index: $zindex-sidebar-horizontal;
- }
-
- .brand-container {
- display: none;
- }
-
- .sidebar {
- overflow: visible;
- padding-top: .75rem;
-
- .nav-sidebar {
+ .main-sidebar {
display: grid;
- list-style-type: none;
- grid-auto-columns: 90px;
- grid-auto-flow: column;
- grid-gap: 5px;
+ height: $sidebar-horizontal-height;
+ min-width: $sidebar-horizontal-width;
+ max-width: $sidebar-horizontal-width;
+ justify-content: start;
+ z-index: $zindex-sidebar-horizontal;
+ }
- .nav-header {
- display: none;
- }
+ .main-brand {
+ display: none;
+ }
- .nav-item > .nav-link {
+ .sidebar {
+ // overflow: visible;
+ overflow-x: auto;
+ overflow-y: hidden;
+
+ // padding-top: .75rem;
+
+ .nav-sidebar {
display: grid;
- grid-auto-flow: row;
- justify-content: center;
+ list-style-type: none;
+ grid-auto-columns: 130px;
+ grid-auto-flow: column;
+ // grid-gap: 5px;
- .nav-icon {
- text-align: center;
- padding-left: 0;
+ .nav-header {
+ display: none;
}
- span {
- padding-left: 0;
+ .nav-item > .nav-link {
+ display: grid;
+ grid-auto-flow: row;
+ justify-content: center;
+
+ .nav-icon {
+ text-align: center;
+ padding-left: 0;
+ }
+
+ span {
+ padding-left: 0;
+ }
}
}
}
- }
- &.sidebar-close {
- .main-sidebar {
- margin-top: -#{$sidebar-horizontal-height};
+ &.sidebar-close {
+ .main-sidebar {
+ margin-top: -#{$sidebar-horizontal-height};
+ }
}
}
}
diff --git a/scss/layout/_sidebar.scss b/scss/layout/_sidebar.scss
index f3844e0ee..7054b11b7 100644
--- a/scss/layout/_sidebar.scss
+++ b/scss/layout/_sidebar.scss
@@ -6,9 +6,5 @@
padding-right: $sidebar-padding-x;
padding-top: $sidebar-padding-y;
@include scrollbar-color-gray();
- @include scrollbar-width-none();
-
- &:hover {
- @include scrollbar-width-thin();
- }
+ @include scrollbar-width-thin();
}
diff --git a/scss/layout/_wrapper.scss b/scss/layout/_wrapper.scss
index 4267a2204..72da48631 100644
--- a/scss/layout/_wrapper.scss
+++ b/scss/layout/_wrapper.scss
@@ -8,7 +8,7 @@
display: grid;
grid-gap: 0;
grid-template-areas:
- "main-sidebar main-header"
+ "main-brand main-header"
"main-sidebar content-wrapper"
"main-sidebar main-footer";
grid-template-columns: auto 1fr;
diff --git a/scss/mixins/_brand-variant.scss b/scss/mixins/_brand-variant.scss
new file mode 100644
index 000000000..e6d2bef4d
--- /dev/null
+++ b/scss/mixins/_brand-variant.scss
@@ -0,0 +1,9 @@
+@mixin brand-variant(
+ $brand-bg,
+ $brand-color
+) {
+ .main-brand {
+ background-color: $brand-bg;
+ color: $brand-color;
+ }
+}
diff --git a/scss/mixins/_sidebar-theme.scss b/scss/mixins/_sidebar-variant.scss
similarity index 55%
rename from scss/mixins/_sidebar-theme.scss
rename to scss/mixins/_sidebar-variant.scss
index 69a3a056b..355de6e24 100644
--- a/scss/mixins/_sidebar-theme.scss
+++ b/scss/mixins/_sidebar-variant.scss
@@ -2,14 +2,14 @@
// Mixins: Sidebar Theme
//
-@mixin sidebar-theme(
+@mixin sidebar-variant(
$sidebar-bg,
$sidebar-color
) {
- .wrapper {
- background: $sidebar-bg;
- }
+ // .wrapper {
+ // background: $sidebar-bg;
+ // }
.main-sidebar {
color: $sidebar-color;
@@ -33,15 +33,15 @@
}
}
- .sidebar-collapse:not(.layout-fixed) {
- .sidebar {
- .nav-sidebar .nav-item:hover {
- .nav-link:not(.active) {
- span {
- background-color: $sidebar-bg;
- }
- }
- }
- }
- }
+ // .sidebar-collapse:not(.layout-fixed) {
+ // .sidebar {
+ // .nav-sidebar .nav-item:hover {
+ // .nav-link:not(.active) {
+ // span {
+ // background-color: $sidebar-bg;
+ // }
+ // }
+ // }
+ // }
+ // }
}
diff --git a/ts/sidebar-overlay.ts b/ts/sidebar-overlay.ts
index d5dc0e600..7797c80dd 100644
--- a/ts/sidebar-overlay.ts
+++ b/ts/sidebar-overlay.ts
@@ -18,31 +18,42 @@ import {
const CLASS_NAME_SIDEBAR_COLLAPSE = 'sidebar-collapse'
const CLASS_NAME_SIDEBAR_CLOSE = 'sidebar-close'
const CLASS_NAME_SIDEBAR_OPEN = 'sidebar-open'
-const CLASS_NAME_SIDEBAR_SM = 'sidebar-sm'
+const CLASS_NAME_LAYOUT_MOBILE = 'layout-mobile'
-const SELECTOR_SIDEBAR_SM = `.${CLASS_NAME_SIDEBAR_SM}`
+const SELECTOR_SIDEBAR_SM = `.${CLASS_NAME_LAYOUT_MOBILE}`
const SELECTOR_CONTENT_WRAPPER = '.content-wrapper'
+const Defaults = {
+ onLayouMobile: 768
+}
+
class SidebarOverlay {
addSidebaBreakPoint(): void {
const bodyClass = document.body.classList
const widthOutput: number = window.innerWidth
- if (widthOutput > 576) {
- bodyClass.remove(CLASS_NAME_SIDEBAR_SM)
+ if (widthOutput > Defaults.onLayouMobile) {
+ bodyClass.remove(CLASS_NAME_LAYOUT_MOBILE)
} else {
- bodyClass.add(CLASS_NAME_SIDEBAR_SM)
+ bodyClass.add(CLASS_NAME_LAYOUT_MOBILE)
}
}
removeOverlaySidebar(): void {
const bodyClass = document.body.classList
- if (bodyClass.contains(CLASS_NAME_SIDEBAR_SM)) {
+ if (bodyClass.contains(CLASS_NAME_LAYOUT_MOBILE)) {
bodyClass.remove(CLASS_NAME_SIDEBAR_OPEN)
bodyClass.remove(CLASS_NAME_SIDEBAR_COLLAPSE)
bodyClass.add(CLASS_NAME_SIDEBAR_CLOSE)
}
}
+ closeSidebar(): void {
+ const widthOutput: number = window.innerWidth
+ if (widthOutput < Defaults.onLayouMobile) {
+ document.body.classList.add(CLASS_NAME_SIDEBAR_CLOSE)
+ }
+ }
+
init(): void {
const selSidebarSm = document.querySelector(SELECTOR_SIDEBAR_SM)
const selContentWrapper = selSidebarSm?.querySelector(SELECTOR_CONTENT_WRAPPER)
@@ -57,6 +68,7 @@ domReady(() => {
data.addSidebaBreakPoint()
data.init()
+ data.closeSidebar()
window.addEventListener('resize', () => {
data.addSidebaBreakPoint()