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

added sidebar-expand

pull/4953/head
Daniel 2023-02-28 18:43:10 +05:30
parent 59b5f66d37
commit 4d1b7c9eca
30 changed files with 313 additions and 337 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/html/components/dashboard/_sidenav.astro
View File

@ -10,7 +10,6 @@ const htmlPath = (path != undefined) ? '.' : '..'
<img src={distPath + '/assets/img/AdminLTELogo.png'} alt="AdminLTE Logo" class="brand-image opacity-75 shadow"> <img src={distPath + '/assets/img/AdminLTELogo.png'} alt="AdminLTE Logo" class="brand-image opacity-75 shadow">
<span class="brand-text fw-light">AdminLTE 4</span> <span class="brand-text fw-light">AdminLTE 4</span>
</a> </a>
<a class="pushmenu d-none d-lg-block" data-lte-toggle="sidebar-mini" href="javascript:;" role="button"><i class="fa-solid fa-angle-double-left"></i></a>
</div> </div>
<!-- Sidebar --> <!-- Sidebar -->
<div class="sidebar-wrapper"> <div class="sidebar-wrapper">
@ -81,7 +80,7 @@ const htmlPath = (path != undefined) ? '.' : '..'
<i class="nav-icon fa-solid fa-copy"></i> <i class="nav-icon fa-solid fa-copy"></i>
<p> <p>
Layout Options Layout Options
<span class="badge text-bg-primary float-end me-3">6</span> <span class="nav-badge badge text-bg-secondary opacity-75 me-3">6</span>
<i class="nav-arrow fa-solid fa-angle-right"></i> <i class="nav-arrow fa-solid fa-angle-right"></i>
</p> </p>
</a> </a>

2
src/html/components/dashboard/_topbar.astro
View File

@ -8,7 +8,7 @@ const distPath = (path != undefined) ? path : '../../../dist'
<!-- Start navbar links --> <!-- Start navbar links -->
<ul class="navbar-nav"> <ul class="navbar-nav">
<li class="nav-item"> <li class="nav-item">
<a class="nav-link" data-lte-toggle="sidebar-full" href="#" role="button"><i class="fa-solid fa-bars"></i></a> <a class="nav-link" data-lte-toggle="sidebar" href="#" role="button"><i class="fa-solid fa-bars"></i></a>
</li> </li>
<li class="nav-item d-none d-md-block"> <li class="nav-item d-none d-md-block">
<a href="#" class="nav-link">Home</a> <a href="#" class="nav-link">Home</a>

2
src/html/pages/UI/timeline.astro
View File

@ -14,7 +14,7 @@ const page = 'timeline'
<head> <head>
<Head title={title} /> <Head title={title} />
</head> </head>
<body class="layout-fixed bg-body-tertiary"> <body class="layout-fixed sidebar-expand-lg bg-body-tertiary">
<div class="app-wrapper"> <div class="app-wrapper">
<Topbar /> <Topbar />
<Sidenav mainPage={mainPage} page={page} /> <Sidenav mainPage={mainPage} page={page} />

2
src/html/pages/forms/general.astro
View File

@ -14,7 +14,7 @@ const page = 'general'
<head> <head>
<Head title={title} /> <Head title={title} />
</head> </head>
<body class="layout-fixed bg-body-tertiary"> <body class="layout-fixed sidebar-expand-lg bg-body-tertiary">
<div class="app-wrapper"> <div class="app-wrapper">
<Topbar /> <Topbar />
<Sidenav mainPage={mainPage} page={page} /> <Sidenav mainPage={mainPage} page={page} />

2
src/html/pages/index.astro
View File

@ -17,7 +17,7 @@ const page = 'index'
<Head title={title} path={path} /> <Head title={title} path={path} />
</head> </head>
<body class="layout-fixed bg-body-tertiary"> <body class="layout-fixed sidebar-expand-lg bg-body-tertiary">
<div class="app-wrapper"> <div class="app-wrapper">
<Topbar path={path} /> <Topbar path={path} />
<Sidenav path={path} mainPage={mainPage} page={page} /> <Sidenav path={path} mainPage={mainPage} page={page} />

2
src/html/pages/index2.astro
View File

@ -16,7 +16,7 @@ const page = 'index2'
<Head title={title} path={path} /> <Head title={title} path={path} />
</head> </head>
<body class="layout-fixed bg-body-tertiary"> <body class="layout-fixed sidebar-expand-lg bg-body-tertiary">
<div class="app-wrapper"> <div class="app-wrapper">
<Topbar path={path} /> <Topbar path={path} />
<Sidenav path={path} mainPage={mainPage} page={page} /> <Sidenav path={path} mainPage={mainPage} page={page} />

2
src/html/pages/index3.astro
View File

@ -16,7 +16,7 @@ const page = 'index3'
<Head title={title} path={path} /> <Head title={title} path={path} />
</head> </head>
<body class="layout-fixed bg-body-tertiary"> <body class="layout-fixed sidebar-expand-lg bg-body-tertiary">
<div class="app-wrapper"> <div class="app-wrapper">
<Topbar path={path} /> <Topbar path={path} />
<Sidenav path={path} mainPage={mainPage} page={page} /> <Sidenav path={path} mainPage={mainPage} page={page} />

2
src/html/pages/layout/fixed-sidebar.astro
View File

@ -14,7 +14,7 @@ const page = 'fixed-sidebar'
<head> <head>
<Head title={title} /> <Head title={title} />
</head> </head>
<body class="layout-fixed bg-body-tertiary"> <body class="layout-fixed sidebar-expand-lg bg-body-tertiary">
<div class="app-wrapper"> <div class="app-wrapper">
<Topbar /> <Topbar />
<Sidenav mainPage={mainPage} page={page} /> <Sidenav mainPage={mainPage} page={page} />

2
src/html/pages/layout/layout-rtl.astro
View File

@ -15,7 +15,7 @@ const isRtl = true
<head> <head>
<Head title={title} isRtl={isRtl} /> <Head title={title} isRtl={isRtl} />
</head> </head>
<body class="layout-fixed bg-body-tertiary"> <body class="layout-fixed sidebar-expand-lg bg-body-tertiary">
<div class="app-wrapper"> <div class="app-wrapper">
<Topbar /> <Topbar />
<Sidenav mainPage={mainPage} page={page} /> <Sidenav mainPage={mainPage} page={page} />

2
src/html/pages/layout/sidebar-mini.astro
View File

@ -14,7 +14,7 @@ const page = 'sidebar-mini'
<head> <head>
<Head title={title} /> <Head title={title} />
</head> </head>
<body class="layout-fixed bg-body-tertiary sidebar-mini sidebar-collapse"> <body class="layout-fixed sidebar-expand-lg sidebar-mini sidebar-collapse bg-body-tertiary">
<div class="app-wrapper"> <div class="app-wrapper">
<Topbar /> <Topbar />
<Sidenav mainPage={mainPage} page={page} /> <Sidenav mainPage={mainPage} page={page} />

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

@ -14,7 +14,7 @@ const page = 'unfixed-sidebar'
<head> <head>
<Head title={title} /> <Head title={title} />
</head> </head>
<body class="bg-body-tertiary"> <body class="sidebar-expand-lg bg-body-tertiary">
<div class="app-wrapper"> <div class="app-wrapper">
<Topbar /> <Topbar />
<Sidenav mainPage={mainPage} page={page} /> <Sidenav mainPage={mainPage} page={page} />

2
src/html/pages/tables/simple.astro
View File

@ -14,7 +14,7 @@ const page = 'simple'
<head> <head>
<Head title={title} /> <Head title={title} />
</head> </head>
<body class="layout-fixed bg-body-tertiary"> <body class="layout-fixed sidebar-expand-lg bg-body-tertiary">
<div class="app-wrapper"> <div class="app-wrapper">
<Topbar /> <Topbar />
<Sidenav mainPage={mainPage} page={page} /> <Sidenav mainPage={mainPage} page={page} />

2
src/html/pages/widgets/cards.astro
View File

@ -14,7 +14,7 @@ const page = 'cards'
<head> <head>
<Head title={title} /> <Head title={title} />
</head> </head>
<body class="layout-fixed bg-body-tertiary"> <body class="layout-fixed sidebar-expand-lg bg-body-tertiary">
<div class="app-wrapper"> <div class="app-wrapper">
<Topbar /> <Topbar />
<Sidenav mainPage={mainPage} page={page} /> <Sidenav mainPage={mainPage} page={page} />

2
src/html/pages/widgets/info-box.astro
View File

@ -14,7 +14,7 @@ const page = 'info-box'
<head> <head>
<Head title={title} /> <Head title={title} />
</head> </head>
<body class="layout-fixed bg-body-tertiary"> <body class="layout-fixed sidebar-expand-lg bg-body-tertiary">
<div class="app-wrapper"> <div class="app-wrapper">
<Topbar /> <Topbar />
<Sidenav mainPage={mainPage} page={page} /> <Sidenav mainPage={mainPage} page={page} />

2
src/html/pages/widgets/small-box.astro
View File

@ -14,7 +14,7 @@ const page = 'small-box'
<head> <head>
<Head title={title} /> <Head title={title} />
</head> </head>
<body class="layout-fixed bg-body-tertiary"> <body class="layout-fixed sidebar-expand-lg bg-body-tertiary">
<div class="app-wrapper"> <div class="app-wrapper">
<Topbar /> <Topbar />
<Sidenav mainPage={mainPage} page={page} /> <Sidenav mainPage={mainPage} page={page} />

1
src/scss/_app-footer.scss
View File

@ -10,5 +10,6 @@
color: $lte-app-footer-color; color: $lte-app-footer-color;
background-color: $lte-app-footer-bg; background-color: $lte-app-footer-bg;
border-top: $lte-app-footer-border-top; border-top: $lte-app-footer-border-top;
@include transition($lte-transition-speed $lte-transition-fn);
} }

1
src/scss/_app-header.scss
View File

@ -7,6 +7,7 @@
grid-area: #{$lte-prefix}app-header; grid-area: #{$lte-prefix}app-header;
max-width: 100vw; max-width: 100vw;
border-bottom: $lte-app-header-bottom-border; border-bottom: $lte-app-header-bottom-border;
@include transition($lte-transition-speed $lte-transition-fn);
.nav-link { .nav-link {
position: relative; position: relative;

1
src/scss/_app-main.scss
View File

@ -2,6 +2,7 @@
grid-area: #{$lte-prefix}app-main; grid-area: #{$lte-prefix}app-main;
max-width: 100vw; max-width: 100vw;
padding-bottom: 1rem; padding-bottom: 1rem;
@include transition($lte-transition-speed $lte-transition-fn);
.app-content-header { .app-content-header {
padding: 1rem $lte-content-padding-x; padding: 1rem $lte-content-padding-x;

222
src/scss/_app-sidebar.scss
View File

@ -20,6 +20,42 @@
@include transition($lte-sidebar-transition); @include transition($lte-sidebar-transition);
} }
.sidebar-brand {
display: flex;
justify-content: space-between;
padding: $lte-brand-link-padding-y $lte-brand-link-padding-x;
overflow: hidden;
font-size: $navbar-brand-font-size;
white-space: nowrap;
border-bottom: $lte-brand-link-border-buttom solid var(--#{$prefix}border-color);
@include transition(width $lte-transition-speed $lte-transition-fn);
.brand-link {
flex: 1;
&:hover {
text-decoration: none;
}
.brand-image {
float: left;
width: auto;
max-height: 33px;
margin-top: -3px;
margin-right: .5rem;
margin-left: .8rem;
line-height: .8;
}
}
.brand-text {
color: rgba(var(--#{$prefix}emphasis-color-rgb), .8);
@include transition(flex $lte-transition-speed $lte-transition-fn, width $lte-transition-speed $lte-transition-fn);
&:hover {
color: var(--#{$prefix}emphasis-color);
}
}
}
.sidebar-wrapper { .sidebar-wrapper {
padding-top: $lte-sidebar-padding-y; padding-top: $lte-sidebar-padding-y;
padding-right: $lte-sidebar-padding-x; padding-right: $lte-sidebar-padding-x;
@ -119,6 +155,12 @@
} }
// All levels // All levels
.nav-link > .nav-badge,
.nav-link > p > .nav-badge {
position: absolute;
right: 1rem;
}
.nav-link > .nav-arrow, .nav-link > .nav-arrow,
.nav-link > p > .nav-arrow { .nav-link > p > .nav-arrow {
position: absolute; position: absolute;
@ -168,10 +210,186 @@
} }
} }
.hold-transition { // A fix for text overflow while transitioning from sidebar mini to full sidebar
.sidebar-menu,
.sidebar-menu > .nav-header,
.sidebar-menu .nav-link {
white-space: nowrap;
}
.sidebar-mini.sidebar-collapse {
.app-sidebar { .app-sidebar {
min-width: $lte-sidebar-mini-width;
max-width: $lte-sidebar-mini-width;
}
// Make the sidebar headers
.sidebar-menu .nav-header {
display: none;
}
.sidebar-menu {
.nav-link {
width: $lte-sidebar-mini-width - $lte-sidebar-padding-x * 2;
}
}
.sidebar-menu .nav-link p {
width: 0;
white-space: nowrap;
}
.sidebar-menu .nav-link p,
.brand-text {
visibility: hidden;
animation-name: fadeOut;
animation-fill-mode: both;
}
&.sidebar-is-hover {
.app-sidebar {
min-width: var(--#{$lte-prefix}sidebar-width);
max-width: var(--#{$lte-prefix}sidebar-width);
}
.sidebar-menu .nav-header {
display: inline-block;
}
.sidebar-menu .nav-link {
width: subtract(var(--#{$lte-prefix}sidebar-width), $lte-sidebar-padding-x * 2);
}
.sidebar-menu .nav-link p,
.brand-text {
margin-left: 0;
visibility: visible;
animation-name: fadeIn;
animation-duration: $lte-transition-speed;
animation-fill-mode: both;
}
}
}
@each $breakpoint in map-keys($grid-breakpoints) {
$next: breakpoint-next($breakpoint, $grid-breakpoints);
$infix: breakpoint-infix($next, $grid-breakpoints);
.sidebar-expand#{$infix} {
@include media-breakpoint-up($next) {
&.layout-fixed {
.app-sidebar {
position: fixed;
top: 0;
bottom: 0;
left: 0;
max-height: 100vh;
.sidebar-wrapper {
height: subtract(100vh, add($lte-app-header-height-inner, $lte-app-header-bottom-border-width));
}
}
.app-header,
.app-main,
.app-footer {
margin-left: var(--#{$lte-prefix}sidebar-width);
}
&.sidebar-mini.sidebar-collapse {
.app-header,
.app-main,
.app-footer {
margin-left: $lte-sidebar-mini-width;
}
}
&.sidebar-collapse {
.app-header,
.app-main,
.app-footer {
margin-left: 0;
}
}
}
}
@include media-breakpoint-down($next) {
$max: breakpoint-max($next);
&::before {
display: none;
content: "#{$max}";
}
.app-sidebar {
position: fixed;
top: 0;
bottom: 0;
left: 0;
max-height: 100vh;
margin-left: calc(var(--#{$lte-prefix}sidebar-width) * -1); // stylelint-disable-line function-disallowed-list
.sidebar-wrapper {
height: subtract(100vh, add($lte-app-header-height-inner, $lte-app-header-bottom-border-width));
overflow-x: hidden;
overflow-y: auto;
}
}
&.sidebar-open {
.app-sidebar {
margin-left: 0;
}
.sidebar-overlay {
position: fixed;
top: 0;
left: 0;
z-index: $lte-zindex-sidebar-overlay;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, .2);
animation-name: fadeIn;
animation-fill-mode: both;
}
}
}
}
}
.sidebar-collapse:not(.sidebar-mini) {
.app-sidebar {
// stylelint-disable-next-line
margin-left: calc(var(--#{$lte-prefix}sidebar-width) * -1);
}
}
// To prevent onload transition and animation
.app-loaded {
&.sidebar-mini.sidebar-collapse {
.sidebar-menu .nav-link p,
.brand-text {
animation-duration: $lte-transition-speed;
}
}
}
body:not(.app-loaded) {
.app-header,
.app-sidebar,
.app-main,
.app-footer {
@include transition(none !important); @include transition(none !important);
animation: none !important; animation-duration: 0s !important;
}
}
.hold-transition {
.app-header,
.app-sidebar,
.app-main,
.app-footer {
@include transition(none !important);
animation-duration: 0s !important;
} }
} }

5
src/scss/_app-wrapper.scss
View File

@ -10,13 +10,10 @@
"#{$lte-prefix}app-sidebar #{$lte-prefix}app-main" "#{$lte-prefix}app-sidebar #{$lte-prefix}app-main"
"#{$lte-prefix}app-sidebar #{$lte-prefix}app-footer"; "#{$lte-prefix}app-sidebar #{$lte-prefix}app-footer";
grid-template-rows: min-content 1fr min-content; grid-template-rows: min-content 1fr min-content;
grid-template-columns: auto 1fr;
grid-gap: 0; grid-gap: 0;
align-content: stretch; align-content: stretch;
align-items: stretch; align-items: stretch;
max-width: 100vw; max-width: 100vw;
min-height: 100vh; min-height: 100vh;
} }
:not(.layout-mobile) .app-wrapper {
grid-template-columns: auto 1fr;
}

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

@ -1,39 +0,0 @@
@include media-breakpoint-up($lte-sidebar-breakpoint) {
.layout-fixed {
.app-sidebar {
position: fixed;
top: auto;
bottom: 0;
left: 0;
float: none;
max-height: 100vh;
.sidebar-wrapper {
height: subtract(100vh, add($lte-app-header-height-inner, $lte-app-header-bottom-border-width));
}
}
.app-header,
.app-main,
.app-footer {
margin-left: var(--#{$lte-prefix}sidebar-width);
@include transition($lte-transition-speed $lte-transition-fn);
}
&.sidebar-collapse {
.app-header,
.app-main,
.app-footer {
margin-left: $lte-sidebar-mini-width;
}
}
&.sidebar-close {
.app-header,
.app-main,
.app-footer {
margin-left: 0;
}
}
}
}

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

@ -1,23 +0,0 @@
@include media-breakpoint-down($lte-sidebar-breakpoint) {
.app-wrapper {
.app-sidebar {
position: fixed;
top: 0;
bottom: 0;
max-height: 100vh;
margin-left: calc(var(--#{$lte-prefix}sidebar-width) * -1); // stylelint-disable-line function-disallowed-list
.sidebar-wrapper {
height: subtract(100vh, add($lte-app-header-height-inner, $lte-app-header-bottom-border-width));
overflow-x: hidden;
overflow-y: auto;
}
}
}
.sidebar-open {
.app-sidebar {
margin-left: 0;
}
}
}

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

@ -1,56 +0,0 @@
//
// Core: Brand
//
.sidebar-brand {
display: flex;
justify-content: space-between;
padding: $lte-brand-link-padding-y $lte-brand-link-padding-x;
overflow: hidden;
font-size: $navbar-brand-font-size;
white-space: nowrap;
border-bottom: $lte-brand-link-border-buttom solid var(--#{$prefix}border-color);
@include transition(width $lte-transition-speed $lte-transition-fn);
.brand-link {
flex: 1;
&:hover {
text-decoration: none;
}
.brand-image {
float: left;
width: auto;
max-height: 33px;
margin-top: -3px;
margin-right: .5rem;
margin-left: .8rem;
line-height: .8;
}
}
.pushmenu {
flex: 0;
margin-left: auto;
}
.brand-link,
.pushmenu {
color: rgba(var(--#{$prefix}emphasis-color-rgb), .8);
@include transition(flex $lte-transition-speed $lte-transition-fn, width $lte-transition-speed $lte-transition-fn);
&:hover {
color: var(--#{$prefix}emphasis-color);
}
}
}
.sidebar-collapse:not(.sidebar-is-hover) {
.sidebar-brand {
.brand-link {
width: 0;
}
.pushmenu {
flex: auto;
}
}
}

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

@ -1,6 +0,0 @@
.sidebar-close {
.app-sidebar {
// stylelint-disable-next-line
margin-left: calc(var(--#{$lte-prefix}sidebar-width) * -1);
}
}

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

@ -1,73 +0,0 @@
//
// Core: Sidebar Mini
//
// A fix for text overflow while transitioning from sidebar mini to full sidebar
.sidebar-menu,
.sidebar-menu > .nav-header,
.sidebar-menu .nav-link {
white-space: nowrap;
}
.sidebar-collapse {
.app-sidebar {
min-width: $lte-sidebar-mini-width;
max-width: $lte-sidebar-mini-width;
}
// Make the sidebar headers
.sidebar-menu .nav-header {
display: none;
}
.sidebar-menu {
.nav-link {
width: $lte-sidebar-mini-width - $lte-sidebar-padding-x * 2;
}
}
.sidebar-menu .nav-link p {
width: 0;
white-space: nowrap;
}
.sidebar-menu .nav-link p,
.brand-link {
animation-name: fadeOut;
animation-duration: $lte-transition-speed;
animation-fill-mode: both;
}
&.sidebar-is-hover {
.app-sidebar {
min-width: var(--#{$lte-prefix}sidebar-width);
max-width: var(--#{$lte-prefix}sidebar-width);
}
.sidebar-menu .nav-header {
display: inline-block;
}
.sidebar-menu .nav-link {
width: subtract(var(--#{$lte-prefix}sidebar-width), $lte-sidebar-padding-x * 2);
}
.sidebar-menu .nav-link p,
.brand-link {
margin-left: 0;
visibility: visible;
animation-name: fadeIn;
animation-duration: $lte-transition-speed;
animation-fill-mode: both;
}
}
&:not(.sidebar-is-hover) {
.sidebar-menu .nav-link p {
.float-end {
// clear: both;
float: none !important;
}
}
}
}

1
src/scss/_variables.scss
View File

@ -92,3 +92,4 @@ $lte-direct-chat-default-msg-border-color: var(--#{$prefix}border-color) !defaul
// -------------------------------------------------------- // --------------------------------------------------------
$lte-zindex-app-header: $zindex-fixed + 4 !default; $lte-zindex-app-header: $zindex-fixed + 4 !default;
$lte-zindex-sidebar: $zindex-fixed + 8 !default; $lte-zindex-sidebar: $zindex-fixed + 8 !default;
$lte-zindex-sidebar-overlay: $lte-zindex-sidebar - 1 !default;

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

@ -6,11 +6,6 @@
@import "../app-wrapper"; @import "../app-wrapper";
@import "../app-header"; @import "../app-header";
@import "../app-sidebar"; @import "../app-sidebar";
@import "../sidebar-brand";
@import "../sidebar-collapse";
@import "../sidebar-close";
@import "../app-main"; @import "../app-main";
@import "../app-footer"; @import "../app-footer";
@import "../layout-fixed";
@import "../layout-mobile";
@import "../dropdown"; @import "../dropdown";

6
src/ts/direct-chat.ts
View File

@ -31,10 +31,8 @@ const CLASS_NAME_DIRECT_CHAT_OPEN = 'direct-chat-contacts-open'
class DirectChat { class DirectChat {
_element: HTMLElement _element: HTMLElement
_config: undefined constructor(element: HTMLElement) {
constructor(element: HTMLElement, config: undefined) {
this._element = element this._element = element
this._config = config
} }
toggle(): void { toggle(): void {
@ -70,7 +68,7 @@ domReady(() => {
const chatPane = target.closest(SELECTOR_DIRECT_CHAT) as HTMLElement | undefined const chatPane = target.closest(SELECTOR_DIRECT_CHAT) as HTMLElement | undefined
if (chatPane) { if (chatPane) {
const data = new DirectChat(chatPane, undefined) const data = new DirectChat(chatPane)
data.toggle() data.toggle()
} }
}) })

10
src/ts/layout.ts
View File

@ -16,6 +16,7 @@ import {
*/ */
const CLASS_NAME_HOLD_TRANSITIONS = 'hold-transition' const CLASS_NAME_HOLD_TRANSITIONS = 'hold-transition'
const CLASS_NAME_APP_LOADED = 'app-loaded'
/** /**
* Class Definition * Class Definition
@ -24,11 +25,9 @@ const CLASS_NAME_HOLD_TRANSITIONS = 'hold-transition'
class Layout { class Layout {
_element: HTMLElement _element: HTMLElement
_config: undefined
constructor(element: HTMLElement, config: undefined) { constructor(element: HTMLElement) {
this._element = element this._element = element
this._config = config as unknown as undefined
} }
holdTransition(): void { holdTransition(): void {
@ -44,8 +43,11 @@ class Layout {
} }
domReady(() => { domReady(() => {
const data = new Layout(document.body, undefined) const data = new Layout(document.body)
data.holdTransition() data.holdTransition()
setTimeout(() => {
document.body.classList.add(CLASS_NAME_APP_LOADED)
}, 400)
}) })
export default Layout export default Layout

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

@ -20,27 +20,29 @@ const EVENT_KEY = `.${DATA_KEY}`
const EVENT_OPEN = `open${EVENT_KEY}` const EVENT_OPEN = `open${EVENT_KEY}`
const EVENT_COLLAPSE = `collapse${EVENT_KEY}` const EVENT_COLLAPSE = `collapse${EVENT_KEY}`
const EVENT_CLOSE = `close${EVENT_KEY}`
const CLASS_NAME_SIDEBAR_MINI = 'sidebar-mini' const CLASS_NAME_SIDEBAR_MINI = 'sidebar-mini'
const CLASS_NAME_SIDEBAR_COLLAPSE = 'sidebar-collapse' 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_OPEN = 'sidebar-open'
const CLASS_NAME_SIDEBAR_IS_HOVER = 'sidebar-is-hover' const CLASS_NAME_SIDEBAR_IS_HOVER = 'sidebar-is-hover'
const CLASS_NAME_SIDEBAR_EXPAND = 'sidebar-expand'
const CLASS_NAME_SIDEBAR_OVERLAY = 'sidebar-overlay'
const CLASS_NAME_MENU_OPEN = 'menu-open' const CLASS_NAME_MENU_OPEN = 'menu-open'
const CLASS_NAME_LAYOUT_MOBILE = 'layout-mobile'
const SELECTOR_SIDEBAR_WRAPPER = '.sidebar-wrapper' const SELECTOR_SIDEBAR_WRAPPER = '.sidebar-wrapper'
const SELECTOR_SIDEBAR_MENU = '.sidebar-menu' const SELECTOR_SIDEBAR_MENU = '.sidebar-menu'
const SELECTOR_NAV_ITEM = '.nav-item' const SELECTOR_NAV_ITEM = '.nav-item'
const SELECTOR_NAV_TREEVIEW = '.nav-treeview' const SELECTOR_NAV_TREEVIEW = '.nav-treeview'
const SELECTOR_MINI_TOGGLE = '[data-lte-toggle="sidebar-mini"]' const SELECTOR_APP_WRAPPER = '.app-wrapper'
const SELECTOR_FULL_TOGGLE = '[data-lte-toggle="sidebar-full"]' const SELECTOR_SIDEBAR_EXPAND = `[class*="${CLASS_NAME_SIDEBAR_EXPAND}"]`
const SELECTOR_LAYOUT_MOBILE = `.${CLASS_NAME_LAYOUT_MOBILE}` const SELECTOR_SIDEBAR_TOGGLE = '[data-lte-toggle="sidebar"]'
const SELECTOR_APP_MAIN = '.app-main'
type Config = {
sidebarBreakpoint: number;
}
const Defaults = { const Defaults = {
onLayoutMobile: 992 sidebarBreakpoint: 992
} }
/** /**
@ -49,20 +51,16 @@ const Defaults = {
*/ */
class PushMenu { class PushMenu {
_element: HTMLElement | undefined _element: HTMLElement
_config: undefined _config: Config
_bodyClass: DOMTokenList
constructor(element: HTMLElement | undefined, config: undefined) { constructor(element: HTMLElement, config: Config) {
this._element = element this._element = element
this._config = { ...Defaults, ...config }
const bodyElement = document.body as HTMLBodyElement
this._bodyClass = bodyElement.classList
this._config = config
} }
// TODO // TODO
menusClose(): void { menusClose() {
const navTreeview = document.querySelectorAll<HTMLElement>(SELECTOR_NAV_TREEVIEW) const navTreeview = document.querySelectorAll<HTMLElement>(SELECTOR_NAV_TREEVIEW)
for (const navTree of navTreeview) { for (const navTree of navTreeview) {
@ -80,90 +78,60 @@ class PushMenu {
} }
} }
expand(): void { expand() {
const event = new Event(EVENT_OPEN) const event = new Event(EVENT_OPEN)
this._bodyClass.remove(CLASS_NAME_SIDEBAR_CLOSE) document.body.classList.remove(CLASS_NAME_SIDEBAR_COLLAPSE)
this._bodyClass.remove(CLASS_NAME_SIDEBAR_COLLAPSE) document.body.classList.add(CLASS_NAME_SIDEBAR_OPEN)
this._bodyClass.add(CLASS_NAME_SIDEBAR_OPEN)
this._element?.dispatchEvent(event) this._element.dispatchEvent(event)
} }
collapse(): void { collapse() {
const event = new Event(EVENT_COLLAPSE) const event = new Event(EVENT_COLLAPSE)
this._bodyClass.remove(CLASS_NAME_SIDEBAR_OPEN) document.body.classList.remove(CLASS_NAME_SIDEBAR_OPEN)
this._bodyClass.remove(CLASS_NAME_SIDEBAR_CLOSE) document.body.classList.add(CLASS_NAME_SIDEBAR_COLLAPSE)
this._bodyClass.add(CLASS_NAME_SIDEBAR_COLLAPSE)
this._element?.dispatchEvent(event) this._element.dispatchEvent(event)
} }
close(): void { sidebarHover() {
const event = new Event(EVENT_CLOSE)
this._bodyClass.remove(CLASS_NAME_SIDEBAR_OPEN)
this._bodyClass.remove(CLASS_NAME_SIDEBAR_COLLAPSE)
this._bodyClass.add(CLASS_NAME_SIDEBAR_CLOSE)
this._element?.dispatchEvent(event)
}
sidebarHover(): void {
const selSidebar = document.querySelector(SELECTOR_SIDEBAR_WRAPPER) const selSidebar = document.querySelector(SELECTOR_SIDEBAR_WRAPPER)
if (selSidebar) { if (selSidebar) {
selSidebar.addEventListener('mouseover', () => { selSidebar.addEventListener('mouseover', () => {
this._bodyClass.add(CLASS_NAME_SIDEBAR_IS_HOVER) document.body.classList.add(CLASS_NAME_SIDEBAR_IS_HOVER)
}) })
selSidebar.addEventListener('mouseout', () => { selSidebar.addEventListener('mouseout', () => {
this._bodyClass.remove(CLASS_NAME_SIDEBAR_IS_HOVER) document.body.classList.remove(CLASS_NAME_SIDEBAR_IS_HOVER)
}) })
} }
} }
addSidebarBreakPoint(): void { addSidebarBreakPoint() {
const bodyClass = document.body.classList const sidebarExpandList = document.querySelector(SELECTOR_SIDEBAR_EXPAND)?.classList ?? []
const widthOutput = window.innerWidth const sidebarExpand = [...sidebarExpandList].find(className => className.startsWith(CLASS_NAME_SIDEBAR_EXPAND)) ?? ''
const sidebar = document.getElementsByClassName(sidebarExpand)[0]
const sidebarContent = window.getComputedStyle(sidebar, '::before').getPropertyValue('content')
this._config = { ...this._config, sidebarBreakpoint: Number(sidebarContent.replace(/[^\d.-]/g, '')) }
if (widthOutput < Defaults.onLayoutMobile) { if (window.innerWidth <= this._config.sidebarBreakpoint) {
bodyClass.add(CLASS_NAME_LAYOUT_MOBILE) this.collapse()
this.close() } else {
} if (!document.body.classList.contains(CLASS_NAME_SIDEBAR_MINI)) {
if (widthOutput >= Defaults.onLayoutMobile) {
bodyClass.remove(CLASS_NAME_LAYOUT_MOBILE)
if (!bodyClass.contains(CLASS_NAME_SIDEBAR_MINI)) {
this.expand() this.expand()
} }
if (bodyClass.contains(CLASS_NAME_SIDEBAR_MINI)) { if (document.body.classList.contains(CLASS_NAME_SIDEBAR_MINI)) {
this.collapse() this.collapse()
} }
} }
} }
removeOverlaySidebar(): void { toggle() {
const bodyClass = document.body.classList if (document.body.classList.contains(CLASS_NAME_SIDEBAR_COLLAPSE)) {
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)
}
}
toggleFull(): void {
if (this._bodyClass.contains(CLASS_NAME_SIDEBAR_CLOSE)) {
this.expand()
} else {
this.close()
}
}
toggleMini(): void {
if (this._bodyClass.contains(CLASS_NAME_SIDEBAR_COLLAPSE)) {
this.expand() this.expand()
} else { } else {
this.collapse() this.collapse()
@ -173,14 +141,6 @@ class PushMenu {
init() { init() {
this.addSidebarBreakPoint() this.addSidebarBreakPoint()
this.sidebarHover() this.sidebarHover()
const targetLayoutMobile = document.querySelector(SELECTOR_LAYOUT_MOBILE)
const targetContentWrapper = targetLayoutMobile?.querySelector(SELECTOR_APP_MAIN)
if (targetContentWrapper) {
targetContentWrapper.addEventListener('touchstart', this.removeOverlaySidebar)
targetContentWrapper.addEventListener('click', this.removeOverlaySidebar)
}
} }
} }
@ -191,14 +151,31 @@ class PushMenu {
*/ */
domReady(() => { domReady(() => {
const data = new PushMenu(undefined, undefined) const data = new PushMenu(document.body, Defaults)
data.init() data.init()
window.addEventListener('resize', () => { window.addEventListener('resize', () => {
data.init() data.init()
}) })
const fullBtn = document.querySelectorAll(SELECTOR_FULL_TOGGLE) const sidebarOverlay = document.createElement('div')
sidebarOverlay.className = CLASS_NAME_SIDEBAR_OVERLAY
document.querySelector(SELECTOR_APP_WRAPPER)?.append(sidebarOverlay)
sidebarOverlay.addEventListener('touchstart', event => {
event.preventDefault()
const target = event.currentTarget as HTMLElement
const data = new PushMenu(target, Defaults)
data.collapse()
})
sidebarOverlay.addEventListener('click', event => {
event.preventDefault()
const target = event.currentTarget as HTMLElement
const data = new PushMenu(target, Defaults)
data.collapse()
})
const fullBtn = document.querySelectorAll(SELECTOR_SIDEBAR_TOGGLE)
for (const btn of fullBtn) { for (const btn of fullBtn) {
btn.addEventListener('click', event => { btn.addEventListener('click', event => {
@ -206,31 +183,14 @@ domReady(() => {
let button = event.currentTarget as HTMLElement | undefined let button = event.currentTarget as HTMLElement | undefined
if (button?.dataset.lteToggle !== 'sidebar-full') { if (button?.dataset.lteToggle !== 'sidebar') {
button = button?.closest(SELECTOR_FULL_TOGGLE) as HTMLElement | undefined button = button?.closest(SELECTOR_SIDEBAR_TOGGLE) as HTMLElement | undefined
} }
if (button) { if (button) {
const data = new PushMenu(button, undefined) event?.preventDefault()
data.toggleFull() const data = new PushMenu(button, Defaults)
} data.toggle()
})
}
const miniBtn = document.querySelectorAll(SELECTOR_MINI_TOGGLE)
for (const btn of miniBtn) {
btn.addEventListener('click', event => {
event.preventDefault()
let button = event.currentTarget as HTMLElement | undefined
if (button?.dataset.lteToggle !== 'sidebar-mini') {
button = button?.closest(SELECTOR_FULL_TOGGLE) as HTMLElement | undefined
}
if (button) {
const data = new PushMenu(button, undefined)
data.toggleMini()
} }
}) })
} }