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

added header-mobile

pull/3698/head
Daniel 2021-05-14 02:00:52 +05:30
parent 500ccad137
commit 59918c8d55
21 changed files with 230 additions and 115 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
index.html
View File

@ -13,14 +13,14 @@
<link rel="stylesheet" href="./node_modules/@fortawesome/fontawesome-free/css/all.min.css"> <link rel="stylesheet" href="./node_modules/@fortawesome/fontawesome-free/css/all.min.css">
</head> </head>
<body class="sidebar-mini"> <body class="layout-fixed">
<div class="wrapper"> <div class="wrapper">
<!-- Navbar --> <!-- Navbar -->
<nav class="main-header navbar navbar-expand"> <nav class="main-header navbar navbar-expand">
<div class="container-fluid"> <div class="container-fluid">
<ul class="navbar-nav"> <ul class="navbar-nav">
<li class="nav-item"> <li class="nav-item">
<a class="nav-link" data-pushmenu="full" href="#" role="button"><i class="fas fa-bars"></i></a> <a class="nav-link sidebar-full-icon" data-pushmenu="full" href="#" role="button"><i class="fas fa-bars"></i></a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a href="#" class="nav-link">Home</a> <a href="#" class="nav-link">Home</a>
@ -28,6 +28,17 @@
<li class="nav-item"> <li class="nav-item">
<a href="#" class="nav-link">Contact</a> <a href="#" class="nav-link">Contact</a>
</li> </li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</li>
</ul> </ul>
</div> </div>
</nav> </nav>
@ -40,8 +51,8 @@
</a> </a>
<div class="brand-icons mx-2"> <div class="brand-icons mx-2">
<a class="sidebar-mini-icon mx-1" data-pushmenu="mini" href="#" role="button"><i class="fas fa-angle-double-left"></i></a> <a class="sidebar-mini-icon mx-1" data-pushmenu="mini" href="#" role="button"><i class="fas fa-angle-double-left"></i></a>
<a class="sidebar-full-icon mx-2" data-pushmenu="full" href="#" role="button"><i class="fas fa-bars"></i></a>
<a class="header-full-icon mx-2" data-pushmenu="header" href="#" role="button"><i class="fas fa-align-right"></i></a> <a class="header-full-icon mx-2" data-pushmenu="header" href="#" role="button"><i class="fas fa-align-right"></i></a>
<a class="sidebar-full-icon mx-2" data-pushmenu="full" href="#" role="button"><i class="fas fa-bars"></i></a>
</div> </div>
</div> </div>
@ -54,44 +65,44 @@
<li class="nav-item"> <li class="nav-item">
<a href="#" class="nav-link active"> <a href="#" class="nav-link active">
<i class="nav-icon fas fa-th"></i> <i class="nav-icon fas fa-th"></i>
<span> <p>
Simple Link Simple Link
</span> </p>
</a> </a>
</li> </li>
<li class="nav-header">MULTI LEVEL EXAMPLE</li> <li class="nav-header">MULTI LEVEL EXAMPLE</li>
<li class="nav-item"> <li class="nav-item">
<a href="#" class="nav-link"> <a href="#" class="nav-link">
<i class="nav-icon fas fa-circle"></i> <i class="nav-icon fas fa-circle"></i>
<span> <p>
Level 1 Level 1
<i class="right fas fa-angle-left"></i> <i class="right fas fa-angle-left"></i>
</span> </p>
</a> </a>
<ul class="nav nav-treeview"> <ul class="nav nav-treeview">
<li class="nav-item"> <li class="nav-item">
<a href="#" class="nav-link"> <a href="#" class="nav-link">
<i class="nav-icon far fa-circle"></i> <i class="nav-icon far fa-circle"></i>
<span> <p>
Level 2 Level 2
<i class="right fas fa-angle-left"></i> <i class="right fas fa-angle-left"></i>
</span> </p>
</a> </a>
<ul class="nav nav-treeview"> <ul class="nav nav-treeview">
<li class="nav-item"> <li class="nav-item">
<a href="#" class="nav-link"> <a href="#" class="nav-link">
<i class="nav-icon far fa-dot-circle"></i> <i class="nav-icon far fa-dot-circle"></i>
<span> <p>
Level 3 Level 3
</span> </p>
</a> </a>
</li> </li>
</ul> </ul>
<a href="#" class="nav-link"> <a href="#" class="nav-link">
<i class="nav-icon far fa-circle"></i> <i class="nav-icon far fa-circle"></i>
<span> <p>
Level 2 Level 2
</span> </p>
</a> </a>
</li> </li>
</ul> </ul>
@ -99,9 +110,9 @@
<li class="nav-item"> <li class="nav-item">
<a href="#" class="nav-link"> <a href="#" class="nav-link">
<i class="nav-icon fas fa-th"></i> <i class="nav-icon fas fa-th"></i>
<span> <p>
Simple Link Simple Link
</span> </p>
</a> </a>
</li> </li>
</ul> </ul>

12
package-lock.json generated
View File

@ -867,9 +867,9 @@
"dev": true "dev": true
}, },
"bootstrap": { "bootstrap": {
"version": "5.0.0", "version": "5.0.1",
"resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.0.0.tgz", "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.0.1.tgz",
"integrity": "sha512-tmhPET9B9qCl8dCofvHeiIhi49iBt0EehmIsziZib65k1erBW1rHhj2s/2JsuQh5Pq+xz2E9bEbzp9B7xHG+VA==" "integrity": "sha512-Fl79+wsLOZKoiU345KeEaWD0ik8WKRI5zm0YSPj2oF1Qr+BO7z0fco6GbUtqjoG1h4VI89PeKJnMsMMVQdKKTw=="
}, },
"boxen": { "boxen": {
"version": "4.2.0", "version": "4.2.0",
@ -5601,9 +5601,9 @@
"dev": true "dev": true
}, },
"sass": { "sass": {
"version": "1.32.12", "version": "1.32.13",
"resolved": "https://registry.npmjs.org/sass/-/sass-1.32.12.tgz", "resolved": "https://registry.npmjs.org/sass/-/sass-1.32.13.tgz",
"integrity": "sha512-zmXn03k3hN0KaiVTjohgkg98C3UowhL1/VSGdj4/VAAiMKGQOE80PFPxFP2Kyq0OUskPKcY5lImkhBKEHlypJA==", "integrity": "sha512-dEgI9nShraqP7cXQH+lEXVf73WOPCse0QlFzSD8k+1TcOxCMwVXfQlr0jtoluZysQOyJGnfr21dLvYKDJq8HkA==",
"dev": true, "dev": true,
"requires": { "requires": {
"chokidar": ">=3.0.0 <4.0.0" "chokidar": ">=3.0.0 <4.0.0"

4
package.json
View File

@ -63,7 +63,7 @@
"dependencies": { "dependencies": {
"@fortawesome/fontawesome-free": "^5.15.3", "@fortawesome/fontawesome-free": "^5.15.3",
"@popperjs/core": "^2.9.2", "@popperjs/core": "^2.9.2",
"bootstrap": "^5.0.0" "bootstrap": "^5.0.1"
}, },
"devDependencies": { "devDependencies": {
"@typescript-eslint/eslint-plugin": "^4.23.0", "@typescript-eslint/eslint-plugin": "^4.23.0",
@ -86,7 +86,7 @@
"postcss": "^8.2.15", "postcss": "^8.2.15",
"postcss-cli": "^8.3.1", "postcss-cli": "^8.3.1",
"rtlcss": "^3.1.2", "rtlcss": "^3.1.2",
"sass": "^1.32.12", "sass": "^1.32.13",
"stylelint": "^13.13.1", "stylelint": "^13.13.1",
"stylelint-config-twbs-bootstrap": "^2.2.0", "stylelint-config-twbs-bootstrap": "^2.2.0",
"typescript": "^4.2.4" "typescript": "^4.2.4"

17
scss/_custom-variables.scss
View File

@ -86,6 +86,21 @@ $nav-link-sm-height: ($font-size-sm * $line-height-sm + $nav-link-
$main-header-height-sm-inner: ($nav-link-sm-height + ($main-header-link-padding-y * 2)) !default; $main-header-height-sm-inner: ($nav-link-sm-height + ($main-header-link-padding-y * 2)) !default;
$main-header-height-sm: add($main-header-height-sm-inner, $main-header-bottom-border-width) !default; $main-header-height-sm: add($main-header-height-sm-inner, $main-header-bottom-border-width) !default;
// HEADER SKINS
// --------------------------------------------------------
// Dark sidebar
$header-dark-bg: $dark;
$header-dark-color: $white;
$header-mobile-dark-bg: $dark;
$header-mobile-dark-color: $white;
// Light sidebar
$header-light-bg: $white;
$header-light-color: $dark;
$header-mobile-light-bg: $light;
$header-mobile-light-color: $dark;
// Content padding // Content padding
$content-padding-y: 0 !default; $content-padding-y: 0 !default;
$content-padding-x: .5rem !default; $content-padding-x: .5rem !default;
@ -113,8 +128,10 @@ $brand-link-border-buttom: 1px;
// -------------------------------------------------------- // --------------------------------------------------------
$zindex-main-header: $zindex-fixed + 4 !default; $zindex-main-header: $zindex-fixed + 4 !default;
$zindex-sidebar: $zindex-fixed + 8 !default; $zindex-sidebar: $zindex-fixed + 8 !default;
$zindex-main-brand: $zindex-main-header !default;
$zindex-main-footer: $zindex-fixed + 2 !default; $zindex-main-footer: $zindex-fixed + 2 !default;
$zindex-sidebar-horizontal: $zindex-main-header - 2 !default; $zindex-sidebar-horizontal: $zindex-main-header - 2 !default;
$zindex-header-mobile: $zindex-main-brand + 2 !default;
$zindex-control-sidebar: $zindex-fixed + 1 !default; $zindex-control-sidebar: $zindex-fixed + 1 !default;
$zindex-toasts: $zindex-sidebar + 2 !default; $zindex-toasts: $zindex-sidebar + 2 !default;
$zindex-content-wrapper: $zindex-sidebar - 2 !default; $zindex-content-wrapper: $zindex-sidebar - 2 !default;

4
scss/_layout.scss
View File

@ -4,9 +4,9 @@
@import "layout/main-sidebar"; @import "layout/main-sidebar";
@import "layout/sidebar"; @import "layout/sidebar";
@import "layout/nav-sidebar"; @import "layout/nav-sidebar";
@import "layout/sidebar-collapse";
// @import "layout/sidebar-horizontal";
@import "layout/sidebar-close"; @import "layout/sidebar-close";
@import "layout/sidebar-mini";
@import "layout/sidebar-horizontal";
@import "layout/content-wrapper"; @import "layout/content-wrapper";
@import "layout/content-header"; @import "layout/content-header";
@import "layout/content"; @import "layout/content";

1
scss/_mixins.scss
View File

@ -5,5 +5,6 @@
@import "mixins/animations"; @import "mixins/animations";
@import "mixins/scrollbar"; @import "mixins/scrollbar";
@import "mixins/brand-variant"; @import "mixins/brand-variant";
@import "mixins/header-variant";
@import "mixins/sidebar-variant"; @import "mixins/sidebar-variant";
@import "mixins/miscellaneous"; @import "mixins/miscellaneous";

8
scss/layout/_layout-fixed.scss
View File

@ -14,6 +14,10 @@
left: 0; left: 0;
position: fixed; position: fixed;
top: auto; top: auto;
.sidebar {
height: subtract(100vh, add($main-header-height-inner, $main-header-bottom-border-width / 2));
}
} }
.main-header, .main-header,
@ -40,10 +44,6 @@
} }
} }
.layout-fixed .wrapper .sidebar {
// stylelint-disable-next-line
height: calc(100vh - #{$main-header-height-inner});
}
// .layout-fixed.text-sm .wrapper .sidebar { // .layout-fixed.text-sm .wrapper .sidebar {
// // stylelint-disable-next-line // // stylelint-disable-next-line
// height: calc(100vh - (#{$main-header-height-sm-inner} + #{$main-header-bottom-border-width})); // height: calc(100vh - (#{$main-header-height-sm-inner} + #{$main-header-bottom-border-width}));

28
scss/layout/_layout-mobile.scss
View File

@ -4,7 +4,7 @@
"main-sidebar main-brand main-header" "main-sidebar main-brand main-header"
"main-sidebar content-wrapper main-header" "main-sidebar content-wrapper main-header"
"main-sidebar main-footer main-header"; "main-sidebar main-footer main-header";
grid-template-columns: auto auto auto; grid-template-columns: auto 1fr auto;
.main-sidebar { .main-sidebar {
position: fixed; position: fixed;
@ -20,7 +20,23 @@
} }
.main-header { .main-header {
display: none; position: fixed;
top: 0;
bottom: 0;
min-height: 100vh;
z-index: $zindex-header-mobile;
width: $sidebar-width;
margin-left: -#{$sidebar-width};
align-items: baseline;
@include transition($sidebar-transition);
.navbar-nav {
flex-direction: column;
}
.sidebar-full-icon {
display: none;
}
} }
.brand-link { .brand-link {
@ -38,4 +54,12 @@
margin-left: 0; margin-left: 0;
} }
} }
@include media-breakpoint-down(md) {
.header-mobile-open {
.main-header {
margin-left: 0;
}
}
}
} }

2
scss/layout/_main-brand.scss
View File

@ -18,7 +18,7 @@
max-width: $sidebar-width; max-width: $sidebar-width;
height: min-content; height: min-content;
@include transition($sidebar-transition); @include transition($sidebar-transition);
z-index: $zindex-sidebar; z-index: $zindex-main-brand;
.brand-link { .brand-link {
grid-area: brand-link; grid-area: brand-link;

17
scss/layout/_main-header.scss
View File

@ -2,21 +2,18 @@
// Core: Main Header // Core: Main Header
// //
@include header-variant(
$header-light-bg,
$header-light-color,
$header-mobile-light-bg,
$header-mobile-light-color
);
.main-header { .main-header {
grid-area: main-header; grid-area: main-header;
background-color: $white;
border-bottom: $main-header-bottom-border; border-bottom: $main-header-bottom-border;
width: inherit; width: inherit;
z-index: $zindex-main-header; z-index: $zindex-main-header;
.nav-link {
color: $dark;
&:hover,
&:focus {
color: $black;
}
}
} }
.layout-navbar-fixed { .layout-navbar-fixed {

41
scss/layout/_main-sidebar.scss
View File

@ -2,8 +2,20 @@
// Core: Main Sidebar // Core: Main Sidebar
// //
// Default Sidebar Theme // Default Sidebar Variant
@include sidebar-variant($sidebar-dark-bg, $sidebar-dark-color); @include sidebar-variant(
$sidebar-dark-bg,
$sidebar-dark-hover-bg,
$sidebar-dark-color,
$sidebar-dark-hover-color,
$sidebar-dark-active-color,
$sidebar-dark-submenu-bg,
$sidebar-dark-submenu-color,
$sidebar-dark-submenu-hover-color,
$sidebar-dark-submenu-hover-bg,
$sidebar-dark-submenu-active-color,
$sidebar-dark-submenu-active-bg
);
.main-sidebar { .main-sidebar {
grid-area: main-sidebar; grid-area: main-sidebar;
@ -12,28 +24,3 @@
min-width: $sidebar-width; min-width: $sidebar-width;
max-width: $sidebar-width; max-width: $sidebar-width;
} }
@include media-breakpoint-down(md) {
// .main-sidebar {
// display: block;
// position: fixed;
// }
// .main-sidebar {
// margin-left: -#{$sidebar-width};
// .sidebar-open & {
// transform: translateX($sidebar-width);
// }
// }
// .sidebar-mini-icon {
// visibility: hidden;
// }
// .sidebar-open {
// .content-wrapper {
// opacity: .9;
// }
// }
}

18
scss/layout/_nav-sidebar.scss
View File

@ -2,7 +2,7 @@
.nav-sidebar { .nav-sidebar {
// All levels // All levels
.nav-link > .right, .nav-link > .right,
.nav-link > span > .right { .nav-link > p > .right {
position: absolute; position: absolute;
right: 1rem; right: 1rem;
top: .7rem; top: .7rem;
@ -10,10 +10,12 @@
.nav-link { .nav-link {
position: relative; position: relative;
width: 100%;
span { p {
display: inline-block; display: inline;
padding-left: .5rem; padding-left: .5rem;
margin: 0;
} }
.nav-icon { .nav-icon {
@ -28,12 +30,16 @@
// Tree view menu // Tree view menu
.nav-treeview { .nav-treeview {
display: none; // display: none;
list-style: none; list-style: none;
padding: 0; padding: 0;
} }
.menu-open > .nav-treeview { .nav-item {
display: block; width: 100%;
&:not(.menu-open) .nav-treeview {
display: none;
}
} }
} }

12
scss/layout/_sidebar-mini.scss → scss/layout/_sidebar-collapse.scss
View File

@ -9,7 +9,7 @@
white-space: nowrap; white-space: nowrap;
} }
.sidebar-mini.sidebar-collapse:not(.sidebar-horizontal) { .sidebar-collapse:not(.sidebar-horizontal) {
.main-sidebar { .main-sidebar {
min-width: $sidebar-mini-width; min-width: $sidebar-mini-width;
max-width: $sidebar-mini-width; max-width: $sidebar-mini-width;
@ -20,13 +20,13 @@
display: none; display: none;
} }
.nav-sidebar .nav-link span { .nav-sidebar .nav-link p {
width: 0; width: 0;
white-space: nowrap; white-space: nowrap;
} }
.sidebar .user-panel > .info, .sidebar .user-panel > .info,
.nav-sidebar .nav-link span, .nav-sidebar .nav-link p,
.brand-link { .brand-link {
margin-left: -10px; margin-left: -10px;
animation-name: fadeOut; animation-name: fadeOut;
@ -46,7 +46,7 @@
} }
.sidebar .user-panel > .info, .sidebar .user-panel > .info,
.nav-sidebar .nav-link span, .nav-sidebar .nav-link p,
.brand-link { .brand-link {
margin-left: 0; margin-left: 0;
animation-name: fadeIn; animation-name: fadeIn;
@ -91,7 +91,7 @@
.sidebar-is-opening { .sidebar-is-opening {
.sidebar .user-panel > .info, .sidebar .user-panel > .info,
.nav-sidebar .nav-link span, .nav-sidebar .nav-link p,
.brand-link { .brand-link {
margin-left: 0; margin-left: 0;
animation-name: fadeIn; animation-name: fadeIn;
@ -103,7 +103,7 @@
.sidebar-is-collapsing { .sidebar-is-collapsing {
.sidebar .user-panel > .info, .sidebar .user-panel > .info,
.nav-sidebar .nav-link span, .nav-sidebar .nav-link p,
.brand-link { .brand-link {
margin-left: -10px; margin-left: -10px;
animation-name: fadeOut; animation-name: fadeOut;

2
scss/layout/_sidebar-horizontal.scss
View File

@ -51,7 +51,7 @@
padding-left: 0; padding-left: 0;
} }
span { p {
padding-left: 0; padding-left: 0;
} }
} }

1
scss/layout/_sidebar.scss
View File

@ -1,4 +1,5 @@
.sidebar { .sidebar {
min-height: 100%;
overflow-x: hidden; overflow-x: hidden;
overflow-y: auto; overflow-y: auto;
padding-bottom: $sidebar-padding-y; padding-bottom: $sidebar-padding-y;

31
scss/mixins/_header-variant.scss Normal file
View File

@ -0,0 +1,31 @@
//
// Mixins: Sidebar Variant
//
@mixin header-variant(
$header-bg,
$header-color,
$header-mobile-bg,
$header-mobile-color
) {
.main-header {
background-color: $header-bg;
color: $header-color;
.nav-link {
color: $dark;
&:hover,
&:focus {
color: $black;
}
}
}
@include media-breakpoint-down(md) {
.main-header {
background-color: $header-mobile-bg;
color: $header-mobile-color;
}
}
}

6
scss/mixins/_miscellaneous.scss
View File

@ -16,9 +16,9 @@
// #{$property}: calc(#{$expression}); // #{$property}: calc(#{$expression});
// } // }
@mixin rotate($value) { // @mixin rotate($value) {
transform: rotate($value); // transform: rotate($value);
} // }
// @mixin animation($animation) { // @mixin animation($animation) {
// animation: $animation; // animation: $animation;

28
scss/mixins/_sidebar-variant.scss
View File

@ -1,19 +1,23 @@
// //
// Mixins: Sidebar Theme // Mixins: Sidebar Variant
// //
@mixin sidebar-variant( @mixin sidebar-variant(
$sidebar-bg, $sidebar-bg,
$sidebar-color $sidebar-hover-bg,
$sidebar-color,
$sidebar-hover-color,
$sidebar-active-color,
$sidebar-submenu-bg,
$sidebar-submenu-color,
$sidebar-submenu-hover-color,
$sidebar-submenu-hover-bg,
$sidebar-submenu-active-color,
$sidebar-submenu-active-bg
) { ) {
// .wrapper {
// background: $sidebar-bg;
// }
.main-sidebar { .main-sidebar {
color: $sidebar-color;
background-color: $sidebar-bg; background-color: $sidebar-bg;
color: $sidebar-color;
} }
// Sidebar navigation menu // Sidebar navigation menu
@ -23,8 +27,12 @@
color: $sidebar-color; color: $sidebar-color;
&:hover, &:hover,
&:focus {
color: $sidebar-hover-color;
}
.active { .active {
color: color-constract($sidebar-color); color: $sidebar-active-color;
} }
} }
@ -37,7 +45,7 @@
// .sidebar { // .sidebar {
// .nav-sidebar .nav-item:hover { // .nav-sidebar .nav-item:hover {
// .nav-link:not(.active) { // .nav-link:not(.active) {
// span { // p {
// background-color: $sidebar-bg; // background-color: $sidebar-bg;
// } // }
// } // }

40
ts/push-menu.ts
View File

@ -24,12 +24,14 @@ const CLASS_NAME_SIDEBAR_OPEN = 'sidebar-open'
const CLASS_NAME_SIDEBAR_OPENING = 'sidebar-is-opening' const CLASS_NAME_SIDEBAR_OPENING = 'sidebar-is-opening'
const CLASS_NAME_SIDEBAR_COLLAPSING = 'sidebar-is-collapsing' const CLASS_NAME_SIDEBAR_COLLAPSING = 'sidebar-is-collapsing'
const CLASS_NAME_MENU_OPEN = 'menu-open' const CLASS_NAME_MENU_OPEN = 'menu-open'
const CLASS_NAME_HEADER_MOBILE_OPEN = 'header-mobile-open'
const SELECTOR_NAV_SIDEBAR = '.nav-sidebar' const SELECTOR_NAV_SIDEBAR = '.nav-sidebar'
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-pushmenu="mini"]' const SELECTOR_MINI_TOGGLE = '[data-pushmenu="mini"]'
const SELECTOR_FULL_TOGGLE = '[data-pushmenu="full"]' const SELECTOR_FULL_TOGGLE = '[data-pushmenu="full"]'
const SELECTOR_FULL_HEADER = '[data-pushmenu="header"]'
/** /**
* Class Definition * Class Definition
@ -129,11 +131,33 @@ class PushMenu {
} }
} }
toggleHeader(): void {
this.close()
const bodyClass = document.body.classList
if (bodyClass.contains(CLASS_NAME_HEADER_MOBILE_OPEN)) {
bodyClass.remove(CLASS_NAME_HEADER_MOBILE_OPEN)
} else {
bodyClass.add(CLASS_NAME_HEADER_MOBILE_OPEN)
}
}
toggle(state: string): void { toggle(state: string): void {
if (state === 'full') { switch (state) {
this.toggleFull() case 'full': {
} else if (state === 'mini') { this.toggleFull()
this.toggleMini() break
}
case 'mini': {
this.toggleMini()
break
}
case 'header': {
this.toggleHeader()
break
}
// No default
} }
} }
} }
@ -147,6 +171,7 @@ class PushMenu {
domReady(() => { domReady(() => {
const fullBtn = document.querySelectorAll(SELECTOR_FULL_TOGGLE) const fullBtn = document.querySelectorAll(SELECTOR_FULL_TOGGLE)
const miniBtn = document.querySelectorAll(SELECTOR_MINI_TOGGLE) const miniBtn = document.querySelectorAll(SELECTOR_MINI_TOGGLE)
const headerBtn = document.querySelectorAll(SELECTOR_FULL_HEADER)
for (const btn of fullBtn) { for (const btn of fullBtn) {
btn.addEventListener('click', () => { btn.addEventListener('click', () => {
@ -161,6 +186,13 @@ domReady(() => {
data.toggle('mini') data.toggle('mini')
}) })
} }
for (const btn of headerBtn) {
btn.addEventListener('click', () => {
const data = new PushMenu()
data.toggle('header')
})
}
}) })
export default PushMenu export default PushMenu

2
ts/sidebar-overlay.ts
View File

@ -19,6 +19,7 @@ const CLASS_NAME_SIDEBAR_COLLAPSE = 'sidebar-collapse'
const CLASS_NAME_SIDEBAR_CLOSE = 'sidebar-close' const CLASS_NAME_SIDEBAR_CLOSE = 'sidebar-close'
const CLASS_NAME_SIDEBAR_OPEN = 'sidebar-open' const CLASS_NAME_SIDEBAR_OPEN = 'sidebar-open'
const CLASS_NAME_LAYOUT_MOBILE = 'layout-mobile' 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_SIDEBAR_SM = `.${CLASS_NAME_LAYOUT_MOBILE}`
const SELECTOR_CONTENT_WRAPPER = '.content-wrapper' const SELECTOR_CONTENT_WRAPPER = '.content-wrapper'
@ -43,6 +44,7 @@ class SidebarOverlay {
if (bodyClass.contains(CLASS_NAME_LAYOUT_MOBILE)) { if (bodyClass.contains(CLASS_NAME_LAYOUT_MOBILE)) {
bodyClass.remove(CLASS_NAME_SIDEBAR_OPEN) bodyClass.remove(CLASS_NAME_SIDEBAR_OPEN)
bodyClass.remove(CLASS_NAME_SIDEBAR_COLLAPSE) bodyClass.remove(CLASS_NAME_SIDEBAR_COLLAPSE)
bodyClass.remove(CLASS_NAME_HEADER_MOBILE_OPEN)
bodyClass.add(CLASS_NAME_SIDEBAR_CLOSE) bodyClass.add(CLASS_NAME_SIDEBAR_CLOSE)
} }
} }

30
ts/treeview.ts
View File

@ -22,7 +22,8 @@ const SELECTOR_NAV_ITEM = '.nav-item'
const SELECTOR_DATA_TOGGLE = '[data-widget="treeview"]' const SELECTOR_DATA_TOGGLE = '[data-widget="treeview"]'
const Defaults = { const Defaults = {
transitionDuration: 300 transitionDuration: 300,
transitionTimingFuntion: 'linear'
} }
/** /**
@ -38,9 +39,7 @@ class Treeview {
const height: number = childNavItem?.scrollHeight ?? 0 const height: number = childNavItem?.scrollHeight ?? 0
childNavItem?.style.setProperty('transition', `height ${Defaults.transitionDuration}ms`)
childNavItem?.style.setProperty('overflow', 'hidden') childNavItem?.style.setProperty('overflow', 'hidden')
childNavItem?.style.setProperty('display', 'block')
childNavItem?.style.setProperty('height', '0px') childNavItem?.style.setProperty('height', '0px')
setTimeout(() => { setTimeout(() => {
@ -50,14 +49,12 @@ class Treeview {
setTimeout(() => { setTimeout(() => {
childNavItem?.style.removeProperty('overflow') childNavItem?.style.removeProperty('overflow')
childNavItem?.style.setProperty('height', 'auto') childNavItem?.style.setProperty('height', 'auto')
childNavItem?.style.removeProperty('height')
}, Defaults.transitionDuration) }, Defaults.transitionDuration)
} }
close(navItem: Element, childNavItem: HTMLElement | null | undefined): void { close(navItem: Element, childNavItem: HTMLElement | null | undefined): void {
navItem.classList.remove(CLASS_NAME_MENU_OPEN)
const height: number = childNavItem?.scrollHeight ?? 0 const height: number = childNavItem?.scrollHeight ?? 0
childNavItem?.style.setProperty('transition', `height ${Defaults.transitionDuration}ms`)
childNavItem?.style.setProperty('overflow', 'hidden') childNavItem?.style.setProperty('overflow', 'hidden')
childNavItem?.style.setProperty('height', `${height}px`) childNavItem?.style.setProperty('height', `${height}px`)
@ -67,21 +64,23 @@ class Treeview {
}, 1) }, 1)
setTimeout(() => { setTimeout(() => {
// childNavItem?.style.removeProperty('height')
childNavItem?.style.removeProperty('display')
childNavItem?.style.removeProperty('overflow') childNavItem?.style.removeProperty('overflow')
childNavItem?.style.removeProperty('height')
navItem.classList.remove(CLASS_NAME_MENU_OPEN)
}, Defaults.transitionDuration) }, Defaults.transitionDuration)
} }
toggle(treeviewMenu: Element): void { toggle(treeviewMenu: Element): void {
const navItem: HTMLElement | null = treeviewMenu.closest(SELECTOR_NAV_ITEM) const navItem: HTMLElement | null = treeviewMenu.closest(SELECTOR_NAV_ITEM)
const childNavItem: HTMLElement | null | undefined = navItem?.querySelector('.nav-treeview') const childNavItem: HTMLElement | null | undefined = navItem?.querySelector('.nav-treeview')
childNavItem?.style.setProperty('transition', `height ${Defaults.transitionDuration}ms ${Defaults.transitionTimingFuntion}`)
if (navItem?.classList.contains(CLASS_NAME_MENU_OPEN)) { setTimeout(() => {
this.close(navItem, childNavItem) if (navItem?.classList.contains(CLASS_NAME_MENU_OPEN)) {
} else { this.close(navItem, childNavItem)
this.open(navItem, childNavItem) } else {
} this.open(navItem, childNavItem)
}
}, 1)
} }
} }
@ -91,9 +90,8 @@ class Treeview {
* ------------------------------------------------------------------------ * ------------------------------------------------------------------------
*/ */
const button = document.querySelectorAll(SELECTOR_DATA_TOGGLE)
domReady(() => { domReady(() => {
const button = document.querySelectorAll(SELECTOR_DATA_TOGGLE)
for (const btn of button) { for (const btn of button) {
btn.addEventListener('click', event => { btn.addEventListener('click', event => {
event.preventDefault() event.preventDefault()