From 73b18a3bfb218b366740ce39d9d1ef13a6a4805d Mon Sep 17 00:00:00 2001 From: Daniel <50356015+danny007in@users.noreply.github.com> Date: Wed, 8 Feb 2023 22:51:04 +0530 Subject: [PATCH] sidebar improve --- src/index2.html | 2 +- src/pages/layout/unfixed-sidebar.html | 2 +- src/scss/_brand-container.scss | 6 +-- src/scss/_content-wrapper.scss | 2 +- src/scss/_layout-fixed.scss | 2 +- src/scss/_layout-mobile.scss | 2 +- src/scss/_main-footer.scss | 17 +----- src/scss/_main-header.scss | 2 +- src/scss/_main-sidebar.scss | 2 +- src/scss/_sidebar-close.scss | 2 +- src/scss/_sidebar-collapse.scss | 56 +------------------ src/scss/_sidebar-horizontal.scss | 67 ----------------------- src/scss/_variables.scss | 7 +-- src/scss/_wrapper.scss | 11 ++-- src/scss/parts/_core.scss | 1 - src/ts/push-menu.ts | 77 ++++++++------------------- 16 files changed, 42 insertions(+), 216 deletions(-) delete mode 100644 src/scss/_sidebar-horizontal.scss diff --git a/src/index2.html b/src/index2.html index 2b49c11f0..da963a49c 100644 --- a/src/index2.html +++ b/src/index2.html @@ -6,7 +6,7 @@ "title": "AdminLTE 4 | Dashboard 2" }) - +
@@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() } }