lisone/AdminLTE
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

improve sidebar overlay

Browse Source
This commit is contained in:
Daniel
2021-09-05 04:43:11 +05:30
parent e65a8df0f7
commit 9bbb20606f
9 changed files with 220 additions and 285 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/partials/dashboard/_topbar.html
View File

@@ -6,10 +6,10 @@
<li class="nav-item">
<a class="nav-link" data-lte-toggle="sidebar-full" href="#" role="button"><i class="fas fa-bars"></i></a>
</li>
<li class="nav-item">
<li class="nav-item d-none d-md-block">
<a href="#" class="nav-link">Home</a>
</li>
<li class="nav-item">
<li class="nav-item d-none d-md-block">
<a href="#" class="nav-link">Contact</a>
</li>
</ul>

2
src/scss/_dropdown.scss
View File

@@ -238,7 +238,7 @@
border-radius: 50%;
float: left;
height: $lte-sidebar-user-image-width;
margin-right: 10px;
// margin-right: 10px;
margin-top: -2px;
width: $lte-sidebar-user-image-width;
}

2
src/ts/adminlte.ts
View File

@@ -1,6 +1,5 @@
import Layout from './layout'
import PushMenu from './push-menu'
import SidebarOverlay from './sidebar-overlay'
import Treeview from './treeview'
import DirectChat from './direct-chat'
import CardWidget from './card-widget'
@@ -8,7 +7,6 @@ import CardWidget from './card-widget'
export {
Layout,
PushMenu,
SidebarOverlay,
Treeview,
DirectChat,
CardWidget,

2
src/ts/layout.ts
View File

@@ -58,8 +58,10 @@ class Layout {
domReady(() => {
const data = new Layout(document.body, Default)
data.holdTransition()
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-expect-error
if (typeof OverlayScrollbars !== 'undefined') {
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-expect-error
// eslint-disable-next-line @typescript-eslint/no-unsafe-call
OverlayScrollbars(document.querySelectorAll(SELECTOR_SIDEBAR), { // eslint-disable-line new-cap

48
src/ts/push-menu.ts
View File

@@ -25,6 +25,7 @@ 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'
const SELECTOR_SIDEBAR = '.sidebar'
const SELECTOR_NAV_SIDEBAR = '.nav-sidebar'
@@ -32,6 +33,12 @@ 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_CONTENT_WRAPPER = '.content-wrapper'
const Defaults = {
onLayouMobile: 992,
}
/**
* Class Definition
@@ -121,6 +128,32 @@ class PushMenu {
}
}
addSidebaBreakPoint(): void {
const bodyClass = document.body.classList
const widthOutput: number = window.innerWidth
if (widthOutput >= Defaults.onLayouMobile) {
bodyClass.remove(CLASS_NAME_LAYOUT_MOBILE)
} else {
bodyClass.add(CLASS_NAME_LAYOUT_MOBILE)
}
}
removeOverlaySidebar(): void {
const bodyClass = document.body.classList
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)
}
}
toggleFull(): void {
if (this._bodyClass.contains(CLASS_NAME_SIDEBAR_CLOSE)) {
this.expand()
@@ -148,7 +181,18 @@ class PushMenu {
}
init() {
this.addSidebaBreakPoint()
this.sidebarHover()
const selSidebarSm = document.querySelector(SELECTOR_SIDEBAR_SM)
const selContentWrapper = selSidebarSm?.querySelector(SELECTOR_CONTENT_WRAPPER)
if (selContentWrapper) {
selContentWrapper.addEventListener('touchstart', this.removeOverlaySidebar)
selContentWrapper.addEventListener('click', this.removeOverlaySidebar)
}
this.closeSidebar()
}
}
@@ -162,6 +206,10 @@ domReady(() => {
const data = new PushMenu(null, null)
data.init()
window.addEventListener('resize', () => {
data.init()
})
const fullBtn = document.querySelectorAll(SELECTOR_FULL_TOGGLE)
for (const btn of fullBtn) {

83
src/ts/sidebar-overlay.ts
View File

@@ -1,83 +0,0 @@
/**
* --------------------------------------------
* AdminLTE sidebar-overlay.ts
* License MIT
* --------------------------------------------
*/
import {
domReady,
} from './util/index'
/**
* ------------------------------------------------------------------------
* Constants
* ------------------------------------------------------------------------
*/
const CLASS_NAME_SIDEBAR_COLLAPSE = 'sidebar-collapse'
const CLASS_NAME_SIDEBAR_CLOSE = 'sidebar-close'
const CLASS_NAME_SIDEBAR_OPEN = 'sidebar-open'
const CLASS_NAME_LAYOUT_MOBILE = 'layout-mobile'
const CLASS_NAME_HEADER_MOBILE_OPEN = 'header-mobile-open'
const SELECTOR_SIDEBAR_SM = `.${CLASS_NAME_LAYOUT_MOBILE}`
const SELECTOR_CONTENT_WRAPPER = '.content-wrapper'
const Defaults = {
onLayouMobile: 992,
}
class SidebarOverlay {
addSidebaBreakPoint(): void {
const bodyClass = document.body.classList
const widthOutput: number = window.innerWidth
if (widthOutput >= Defaults.onLayouMobile) {
bodyClass.remove(CLASS_NAME_LAYOUT_MOBILE)
} else {
bodyClass.add(CLASS_NAME_LAYOUT_MOBILE)
}
}
removeOverlaySidebar(): void {
const bodyClass = document.body.classList
if (bodyClass.contains(CLASS_NAME_LAYOUT_MOBILE)) {
bodyClass.remove(CLASS_NAME_SIDEBAR_OPEN)
bodyClass.remove(CLASS_NAME_SIDEBAR_COLLAPSE)
bodyClass.remove(CLASS_NAME_HEADER_MOBILE_OPEN)
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)
if (selContentWrapper) {
selContentWrapper.addEventListener('touchstart', this.removeOverlaySidebar)
selContentWrapper.addEventListener('click', this.removeOverlaySidebar)
}
}
}
domReady(() => {
const data = new SidebarOverlay()
data.addSidebaBreakPoint()
data.init()
data.closeSidebar()
window.addEventListener('resize', () => {
data.addSidebaBreakPoint()
data.init()
})
})
export default SidebarOverlay