github
/
AdminLTE
mirror of https://github.com/ColorlibHQ/AdminLTE
1
0
Fork 0
Code Issues Releases Wiki Activity

sidebar improve

pull/4908/head
Daniel 2023-02-08 22:51:04 +05:30
parent 94fd335d2e
commit 73b18a3bfb
16 changed files with 42 additions and 216 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/index2.html
View File

@ -6,7 +6,7 @@
"title": "AdminLTE 4 | Dashboard 2"
})
</head>
<body class="layout-fixed bg-body-tertiary">
<body class="bg-body-tertiary">
<div class="wrapper">
@@include('./dashboard/_topbar.html', {
"path": "."

2
src/pages/layout/unfixed-sidebar.html
View File

@ -6,7 +6,7 @@
"title": "AdminLTE 4 | Unfixed Sidebar"
})
</head>
<body>
<body class="bg-body-tertiary">
<div class="wrapper">
@@include('./dashboard/_topbar.html', {
"path": "../.."

6
src/scss/_brand-container.scss
View File

@ -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 & {

2
src/scss/_content-wrapper.scss
View File

@ -1,4 +1,4 @@
.content-wrapper {
grid-area: #{lte-prefix}content-wrapper;
grid-area: #{$lte-prefix}content-wrapper;
padding-bottom: 1rem;
}

2
src/scss/_layout-fixed.scss
View File

@ -1,5 +1,5 @@
@include media-breakpoint-up(lg) {
.layout-fixed:not(.sidebar-horizontal) {
.layout-fixed {
.main-sidebar {
position: fixed;
top: auto;

2
src/scss/_layout-mobile.scss
View File

@ -1,4 +1,4 @@
@include media-breakpoint-down(lg) {
@include media-breakpoint-down($lte-sidebar-breakpoint) {
.wrapper {
.main-sidebar {
position: fixed;

17
src/scss/_main-footer.scss
View File

@ -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;
}
}

2
src/scss/_main-header.scss
View File

@ -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 {

2
src/scss/_main-sidebar.scss
View File

@ -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);

2
src/scss/_sidebar-close.scss
View File

@ -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);

56
src/scss/_sidebar-collapse.scss
View File

@ -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;
// }
// }

67
src/scss/_sidebar-horizontal.scss
View File

@ -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};
}
}
}
}

7
src/scss/_variables.scss
View File

@ -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;

11
src/scss/_wrapper.scss
View File

@ -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;
}

1
src/scss/parts/_core.scss
View File

@ -10,7 +10,6 @@
@import "../sidebar";
@import "../nav-sidebar";
@import "../sidebar-collapse";
// @import "../sidebar-horizontal";
@import "../sidebar-close";
@import "../content-wrapper";
@import "../content-header";

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

@ -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<HTMLElement>(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()
}
}