@@include('./dashboard/_topbar.html', {
"path": "."
diff --git a/src/pages/layout/unfixed-sidebar.html b/src/pages/layout/unfixed-sidebar.html
index 460711ae4..5ab999d91 100644
--- a/src/pages/layout/unfixed-sidebar.html
+++ b/src/pages/layout/unfixed-sidebar.html
@@ -6,7 +6,7 @@
"title": "AdminLTE 4 | Unfixed Sidebar"
})
-
+
@@include('./dashboard/_topbar.html', {
"path": "../.."
diff --git a/src/scss/_brand-container.scss b/src/scss/_brand-container.scss
index a5ac2746b..44b15e3ea 100644
--- a/src/scss/_brand-container.scss
+++ b/src/scss/_brand-container.scss
@@ -4,7 +4,7 @@
.brand-container {
display: grid;
- grid-template-areas: "#{lte-prefix}brand-link #{lte-prefix}pushmenu";
+ grid-template-areas: "#{$lte-prefix}brand-link #{$lte-prefix}pushmenu";
justify-content: space-between;
padding: $lte-brand-link-padding-y $lte-sidebar-padding-x;
overflow: hidden;
@@ -13,7 +13,7 @@
@include transition(width $lte-transition-speed $lte-transition-fn);
.brand-link {
- grid-area: #{lte-prefix}brand-link;
+ grid-area: #{$lte-prefix}brand-link;
&:hover {
text-decoration: none;
@@ -31,7 +31,7 @@
}
.pushmenu {
- grid-area: #{lte-prefix}pushmenu;
+ grid-area: #{$lte-prefix}pushmenu;
}
.sidebar-bg-dark & {
diff --git a/src/scss/_content-wrapper.scss b/src/scss/_content-wrapper.scss
index 33142fdc9..83f459446 100644
--- a/src/scss/_content-wrapper.scss
+++ b/src/scss/_content-wrapper.scss
@@ -1,4 +1,4 @@
.content-wrapper {
- grid-area: #{lte-prefix}content-wrapper;
+ grid-area: #{$lte-prefix}content-wrapper;
padding-bottom: 1rem;
}
diff --git a/src/scss/_layout-fixed.scss b/src/scss/_layout-fixed.scss
index 1643dae46..6ad37e352 100644
--- a/src/scss/_layout-fixed.scss
+++ b/src/scss/_layout-fixed.scss
@@ -1,5 +1,5 @@
@include media-breakpoint-up(lg) {
- .layout-fixed:not(.sidebar-horizontal) {
+ .layout-fixed {
.main-sidebar {
position: fixed;
top: auto;
diff --git a/src/scss/_layout-mobile.scss b/src/scss/_layout-mobile.scss
index 2be14abb7..55b9c36e3 100644
--- a/src/scss/_layout-mobile.scss
+++ b/src/scss/_layout-mobile.scss
@@ -1,4 +1,4 @@
-@include media-breakpoint-down(lg) {
+@include media-breakpoint-down($lte-sidebar-breakpoint) {
.wrapper {
.main-sidebar {
position: fixed;
diff --git a/src/scss/_main-footer.scss b/src/scss/_main-footer.scss
index 45ae45ceb..d9cc65965 100644
--- a/src/scss/_main-footer.scss
+++ b/src/scss/_main-footer.scss
@@ -3,26 +3,11 @@
//
.main-footer {
- grid-area: #{lte-prefix}main-footer;
+ grid-area: #{$lte-prefix}main-footer;
width: inherit;
padding: $lte-main-footer-padding;
color: $lte-main-footer-color;
background-color: $lte-main-footer-bg;
border-top: $lte-main-footer-border-top;
-
- // .fs-7 &,
- // &.fs-7 {
- // padding: $lte-main-footer-padding-sm;
- // }
}
-.layout-footer-fixed {
- .main-footer {
- position: fixed;
- bottom: 0;
- }
-
- .content-wrapper {
- margin-bottom: $lte-main-footer-height;
- }
-}
diff --git a/src/scss/_main-header.scss b/src/scss/_main-header.scss
index d49f7c654..89481df54 100644
--- a/src/scss/_main-header.scss
+++ b/src/scss/_main-header.scss
@@ -4,7 +4,7 @@
.main-header {
z-index: $lte-zindex-main-header;
- grid-area: #{lte-prefix}main-header;
+ grid-area: #{$lte-prefix}main-header;
border-bottom: $lte-main-header-bottom-border;
.nav-link {
diff --git a/src/scss/_main-sidebar.scss b/src/scss/_main-sidebar.scss
index 6696ff97a..bbe8d322a 100644
--- a/src/scss/_main-sidebar.scss
+++ b/src/scss/_main-sidebar.scss
@@ -6,7 +6,7 @@
.main-sidebar {
@include transition($lte-sidebar-transition);
z-index: $lte-zindex-sidebar;
- grid-area: #{lte-prefix}main-sidebar;
+ grid-area: #{$lte-prefix}main-sidebar;
min-width: var(--#{$lte-prefix}sidebar-width);
max-width: var(--#{$lte-prefix}sidebar-width);
diff --git a/src/scss/_sidebar-close.scss b/src/scss/_sidebar-close.scss
index 7f254ba21..187335138 100644
--- a/src/scss/_sidebar-close.scss
+++ b/src/scss/_sidebar-close.scss
@@ -1,4 +1,4 @@
-.sidebar-close:not(.sidebar-horizontal) {
+.sidebar-close {
.main-sidebar {
// stylelint-disable-next-line
margin-left: calc(var(--#{$lte-prefix}sidebar-width) * -1);
diff --git a/src/scss/_sidebar-collapse.scss b/src/scss/_sidebar-collapse.scss
index 58ecf0d32..56d86720c 100644
--- a/src/scss/_sidebar-collapse.scss
+++ b/src/scss/_sidebar-collapse.scss
@@ -9,7 +9,7 @@
white-space: nowrap;
}
-.sidebar-collapse:not(.sidebar-horizontal) {
+.sidebar-collapse {
.main-sidebar {
min-width: $lte-sidebar-mini-width;
max-width: $lte-sidebar-mini-width;
@@ -64,57 +64,3 @@
}
}
}
-
-// .sidebar-mini.sidebar-collapse:not(.layout-fixed):not(.sidebar-horizontal) {
-// .sidebar {
-// overflow: visible;
-
-// .nav-sidebar .nav-item:hover {
-// position: relative;
-
-// .nav-link {
-// border-top-right-radius: 0;
-// border-bottom-right-radius: 0;
-// }
-
-// span {
-// animation: none;
-// z-index: $lte-zindex-sidebar + 12;
-// visibility: visible;
-// display: inline-block;
-// position: absolute;
-// width: var(--#{$lte-prefix}sidebar-width);
-// left: $lte-sidebar-mini-width;
-// top: 0;
-// background-color: inherit;
-// padding: inherit;
-// padding-left: 1rem;
-// margin-left: -1rem;
-// border-top-left-radius: 0;
-// border-bottom-left-radius: 0;
-// }
-// }
-// }
-// }
-
-// .sidebar-is-opening {
-// .nav-sidebar .nav-link p,
-// .brand-link {
-// margin-left: 0;
-// animation-name: fadeIn;
-// animation-duration: $lte-transition-speed;
-// animation-fill-mode: both;
-// visibility: visible;
-// }
-// }
-
-// .sidebar-is-collapsing {
-// .nav-sidebar .nav-link p,
-// .brand-link {
-// margin-left: -10px;
-// animation-name: fadeOut;
-// animation-duration: $lte-transition-speed;
-// animation-fill-mode: both;
-// visibility: visible;
-// }
-// }
diff --git a/src/scss/_sidebar-horizontal.scss b/src/scss/_sidebar-horizontal.scss
deleted file mode 100644
index 5af455e7b..000000000
--- a/src/scss/_sidebar-horizontal.scss
+++ /dev/null
@@ -1,67 +0,0 @@
-@include media-breakpoint-up(lg) {
- .sidebar-horizontal {
- .wrapper {
- grid-template-areas:
- "#{lte-prefix}main-header"
- "#{lte-prefix}main-sidebar"
- "#{lte-prefix}content-wrapper"
- "#{lte-prefix}main-footer";
- grid-template-rows: max-content max-content auto max-content;
- grid-template-columns: auto;
- }
-
- .main-sidebar {
- z-index: $lte-zindex-sidebar-horizontal;
- display: grid;
- justify-content: start;
- min-width: $lte-sidebar-horizontal-width;
- max-width: $lte-sidebar-horizontal-width;
- height: $lte-sidebar-horizontal-height;
- }
-
- .brand-container {
- display: none;
- }
-
- .sidebar {
- // overflow: visible;
- overflow-x: auto;
- overflow-y: hidden;
-
- // padding-top: .75rem;
-
- .nav-sidebar {
- display: grid;
- grid-auto-columns: 130px;
- grid-auto-flow: column;
- list-style-type: none;
- // grid-gap: 5px;
-
- .nav-header {
- display: none;
- }
-
- .nav-item > .nav-link {
- display: grid;
- grid-auto-flow: row;
- justify-content: center;
-
- .nav-icon {
- padding-left: 0;
- text-align: center;
- }
-
- p {
- padding-left: 0;
- }
- }
- }
- }
-
- &.sidebar-close {
- .main-sidebar {
- margin-top: -#{$lte-sidebar-horizontal-height};
- }
- }
- }
-}
diff --git a/src/scss/_variables.scss b/src/scss/_variables.scss
index e7ac6f324..2a168b013 100644
--- a/src/scss/_variables.scss
+++ b/src/scss/_variables.scss
@@ -18,6 +18,7 @@ $lte-transition-fn: ease-in-out !default;
// Sidebar
// --------------------------------------------------------
$lte-sidebar-width: 250px !default;
+$lte-sidebar-breakpoint: lg !default;
$lte-sidebar-padding-x: .5rem !default;
$lte-sidebar-padding-y: .5rem !default;
$lte-sidebar-custom-height: 4rem !default;
@@ -67,11 +68,6 @@ $lte-sidebar-mini-width: ($nav-link-padding-x + $lte-sidebar-padding-x
$lte-sidebar-nav-icon-width: $lte-sidebar-mini-width - (($lte-sidebar-padding-x + $nav-link-padding-x) * 2) !default;
$lte-sidebar-user-image-width: $lte-sidebar-nav-icon-width + ($nav-link-padding-x * .5) !default;
-// SIDEBAR HORIZONTAL
-// --------------------------------------------------------
-$lte-sidebar-horizontal-width: 100% !default;
-$lte-sidebar-horizontal-height: 80px !default;
-
// CONTROL SIDEBAR
// --------------------------------------------------------
$lte-control-sidebar-width: $lte-sidebar-width !default;
@@ -146,7 +142,6 @@ $lte-direct-chat-default-msg-border-color: var(--#{$prefix}border-color) !defaul
$lte-zindex-main-header: $zindex-fixed + 4 !default;
$lte-zindex-sidebar: $zindex-fixed + 8 !default;
$lte-zindex-main-footer: $zindex-fixed + 2 !default;
-$lte-zindex-sidebar-horizontal: $lte-zindex-main-header - 2 !default;
$lte-zindex-control-sidebar: $zindex-fixed + 1 !default;
$lte-zindex-toasts: $lte-zindex-sidebar + 2 !default;
$lte-zindex-content-wrapper: $lte-zindex-sidebar - 2 !default;
diff --git a/src/scss/_wrapper.scss b/src/scss/_wrapper.scss
index cd6498df5..52a5bfbd2 100644
--- a/src/scss/_wrapper.scss
+++ b/src/scss/_wrapper.scss
@@ -6,14 +6,17 @@
position: relative;
display: grid;
grid-template-areas:
- "#{lte-prefix}main-sidebar #{lte-prefix}main-header"
- "#{lte-prefix}main-sidebar #{lte-prefix}content-wrapper"
- "#{lte-prefix}main-sidebar #{lte-prefix}main-footer";
+ "#{$lte-prefix}main-sidebar #{$lte-prefix}main-header"
+ "#{$lte-prefix}main-sidebar #{$lte-prefix}content-wrapper"
+ "#{$lte-prefix}main-sidebar #{$lte-prefix}main-footer";
grid-template-rows: min-content 1fr min-content;
- grid-template-columns: auto 1fr;
grid-gap: 0;
align-content: stretch;
align-items: stretch;
max-width: 100vw;
min-height: 100vh;
}
+
+:not(.layout-mobile) .wrapper {
+ grid-template-columns: auto 1fr;
+}
diff --git a/src/scss/parts/_core.scss b/src/scss/parts/_core.scss
index aeae3d819..92863a7aa 100644
--- a/src/scss/parts/_core.scss
+++ b/src/scss/parts/_core.scss
@@ -10,7 +10,6 @@
@import "../sidebar";
@import "../nav-sidebar";
@import "../sidebar-collapse";
-// @import "../sidebar-horizontal";
@import "../sidebar-close";
@import "../content-wrapper";
@import "../content-header";
diff --git a/src/ts/push-menu.ts b/src/ts/push-menu.ts
index 216ddb4b3..e9d694b70 100644
--- a/src/ts/push-menu.ts
+++ b/src/ts/push-menu.ts
@@ -23,13 +23,9 @@ const EVENT_COLLAPSE = `collapse${EVENT_KEY}`
const EVENT_CLOSE = `close${EVENT_KEY}`
const CLASS_NAME_SIDEBAR_MINI = 'sidebar-mini'
-const CLASS_NAME_SIDEBAR_MINI_HAD = 'sidebar-mini-had'
-const CLASS_NAME_SIDEBAR_HORIZONTAL = 'sidebar-horizontal'
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_OPENING = 'sidebar-is-opening'
-const CLASS_NAME_SIDEBAR_COLLAPSING = 'sidebar-is-collapsing'
const CLASS_NAME_SIDEBAR_IS_HOVER = 'sidebar-is-hover'
const CLASS_NAME_MENU_OPEN = 'menu-open'
const CLASS_NAME_LAYOUT_MOBILE = 'layout-mobile'
@@ -40,11 +36,11 @@ const SELECTOR_NAV_ITEM = '.nav-item'
const SELECTOR_NAV_TREEVIEW = '.nav-treeview'
const SELECTOR_MINI_TOGGLE = '[data-lte-toggle="sidebar-mini"]'
const SELECTOR_FULL_TOGGLE = '[data-lte-toggle="sidebar-full"]'
-const SELECTOR_SIDEBAR_SM = `.${CLASS_NAME_LAYOUT_MOBILE}`
+const SELECTOR_LAYOUT_MOBILE = `.${CLASS_NAME_LAYOUT_MOBILE}`
const SELECTOR_CONTENT_WRAPPER = '.content-wrapper'
const Defaults = {
- onLayouMobile: 992
+ onLayoutMobile: 992
}
/**
@@ -65,20 +61,7 @@ class PushMenu {
this._config = config
}
- sidebarOpening(): void {
- this._bodyClass.add(CLASS_NAME_SIDEBAR_OPENING)
- setTimeout(() => {
- this._bodyClass.remove(CLASS_NAME_SIDEBAR_OPENING)
- }, 1000)
- }
-
- sidebarColllapsing(): void {
- this._bodyClass.add(CLASS_NAME_SIDEBAR_COLLAPSING)
- setTimeout(() => {
- this._bodyClass.remove(CLASS_NAME_SIDEBAR_COLLAPSING)
- }, 1000)
- }
-
+ // TODO
menusClose(): void {
const navTreeview = document.querySelectorAll(SELECTOR_NAV_TREEVIEW)
@@ -99,7 +82,6 @@ class PushMenu {
expand(): void {
const event = new Event(EVENT_OPEN)
- this.sidebarOpening()
this._bodyClass.remove(CLASS_NAME_SIDEBAR_CLOSE)
this._bodyClass.remove(CLASS_NAME_SIDEBAR_COLLAPSE)
@@ -111,22 +93,19 @@ class PushMenu {
collapse(): void {
const event = new Event(EVENT_COLLAPSE)
- this.sidebarColllapsing()
-
+ this._bodyClass.remove(CLASS_NAME_SIDEBAR_OPEN)
+ this._bodyClass.remove(CLASS_NAME_SIDEBAR_CLOSE)
this._bodyClass.add(CLASS_NAME_SIDEBAR_COLLAPSE)
+
this._element?.dispatchEvent(event)
}
close(): void {
const event = new Event(EVENT_CLOSE)
- this._bodyClass.add(CLASS_NAME_SIDEBAR_CLOSE)
this._bodyClass.remove(CLASS_NAME_SIDEBAR_OPEN)
this._bodyClass.remove(CLASS_NAME_SIDEBAR_COLLAPSE)
-
- if (this._bodyClass.contains(CLASS_NAME_SIDEBAR_HORIZONTAL)) {
- this.menusClose()
- }
+ this._bodyClass.add(CLASS_NAME_SIDEBAR_CLOSE)
this._element?.dispatchEvent(event)
}
@@ -145,19 +124,24 @@ class PushMenu {
}
}
- addSidebaBreakPoint(): void {
+ addSidebarBreakPoint(): void {
const bodyClass = document.body.classList
const widthOutput = window.innerWidth
- if (widthOutput < Defaults.onLayouMobile) {
+ if (widthOutput < Defaults.onLayoutMobile) {
bodyClass.add(CLASS_NAME_LAYOUT_MOBILE)
+ this.close()
}
- if (widthOutput >= Defaults.onLayouMobile) {
+ if (widthOutput >= Defaults.onLayoutMobile) {
bodyClass.remove(CLASS_NAME_LAYOUT_MOBILE)
if (!bodyClass.contains(CLASS_NAME_SIDEBAR_MINI)) {
this.expand()
}
+
+ if (bodyClass.contains(CLASS_NAME_SIDEBAR_MINI)) {
+ this.collapse()
+ }
}
}
@@ -170,32 +154,15 @@ class PushMenu {
}
}
- closeSidebar(): void {
- const widthOutput: number = window.innerWidth
- if (widthOutput < Defaults.onLayouMobile) {
- document.body.classList.add(CLASS_NAME_SIDEBAR_CLOSE)
- }
- }
-
toggleFull(): void {
if (this._bodyClass.contains(CLASS_NAME_SIDEBAR_CLOSE)) {
this.expand()
} else {
this.close()
}
-
- if (this._bodyClass.contains(CLASS_NAME_SIDEBAR_MINI)) {
- this._bodyClass.remove(CLASS_NAME_SIDEBAR_MINI)
- this._bodyClass.add(CLASS_NAME_SIDEBAR_MINI_HAD)
- }
}
toggleMini(): void {
- if (this._bodyClass.contains(CLASS_NAME_SIDEBAR_MINI_HAD)) {
- this._bodyClass.remove(CLASS_NAME_SIDEBAR_MINI_HAD)
- this._bodyClass.add(CLASS_NAME_SIDEBAR_MINI)
- }
-
if (this._bodyClass.contains(CLASS_NAME_SIDEBAR_COLLAPSE)) {
this.expand()
} else {
@@ -204,18 +171,16 @@ class PushMenu {
}
init() {
- this.addSidebaBreakPoint()
+ this.addSidebarBreakPoint()
this.sidebarHover()
- const selSidebarSm = document.querySelector(SELECTOR_SIDEBAR_SM)
- const selContentWrapper = selSidebarSm?.querySelector(SELECTOR_CONTENT_WRAPPER)
+ const targetLayoutMobile = document.querySelector(SELECTOR_LAYOUT_MOBILE)
+ const targetContentWrapper = targetLayoutMobile?.querySelector(SELECTOR_CONTENT_WRAPPER)
- if (selContentWrapper) {
- selContentWrapper.addEventListener('touchstart', this.removeOverlaySidebar)
- selContentWrapper.addEventListener('click', this.removeOverlaySidebar)
+ if (targetContentWrapper) {
+ targetContentWrapper.addEventListener('touchstart', this.removeOverlaySidebar)
+ targetContentWrapper.addEventListener('click', this.removeOverlaySidebar)
}
-
- this.closeSidebar()
}
}