Skip to content

Commit 0890744

Browse files
committed
fix(Sidebar): How to set left sidebar is minimized as default
*How to set left sidebar is minimized as default* [#145](coreui/coreui-free-react-admin-template#145) - refactor(Layout): LayoutHelper germ - refactor(Sidabar): use static methods from `LayoutHelper` - refactor(SidabarMinimizer): use static methods from `LayoutHelper`
1 parent 32c3d7d commit 0890744

File tree

3 files changed

+29
-45
lines changed

3 files changed

+29
-45
lines changed

src/Shared/layout/layout.js

+21-19
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,31 @@
1-
// import { toggleClasses } from '../toggle-classes';
1+
class LayoutHelper {
22

3-
class Layout {
4-
static sidebarToggle() {
5-
6-
}
7-
8-
static sidebarMinimize() {
9-
document.body.classList.toggle('sidebar-minimized');
3+
static sidebarToggle(toggle) {
4+
const minimize = arguments.length ? toggle : !document.body.classList.contains('sidebar-minimized');
5+
this.sidebarMinimize(minimize);
6+
this.brandMinimize(minimize);
7+
this.sidebarPSToggle(!minimize); /*remove PS on sidebar minimized*/
108
}
119

12-
static mobileSidebarToggle() {
13-
document.body.classList.toggle('sidebar-mobile-show');
10+
static sidebarMinimize(force) {
11+
return document.body.classList.toggle('sidebar-minimized', force);
1412
}
1513

16-
static sidebarOffCanvasClose() {
17-
14+
static brandMinimize(force) {
15+
document.body.classList.toggle('brand-minimized', force);
1816
}
1917

20-
static brandMinimize() {
21-
document.body.classList.toggle('brand-minimized');
22-
}
23-
24-
static asideToggleDirective() {
25-
18+
// sidebar perfect scrollbar
19+
static sidebarPSToggle(toggle) {
20+
const sidebar = document.querySelector('.sidebar-nav');
21+
if (sidebar) {
22+
if (toggle) {
23+
sidebar.classList.add('ps', 'ps-container', 'ps--active-y');
24+
} else {
25+
sidebar.classList.remove('ps', 'ps-container', 'ps--active-y');
26+
}
27+
}
2628
}
2729
}
2830

29-
export default Layout;
31+
export default LayoutHelper;

src/Sidebar.js

+3-1
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,9 @@ import classNames from 'classnames';
33
import PropTypes from 'prop-types';
44
import { sidebarCssClasses } from './Shared';
55
import ClickOutHandler from 'react-onclickout'
6+
67
import './Shared/element-closest'
8+
import LayoutHelper from './Shared/layout/layout'
79

810
const propTypes = {
911
children: PropTypes.node,
@@ -57,7 +59,7 @@ class AppSidebar extends Component {
5759
}
5860

5961
isMinimized(minimized) {
60-
if (minimized) { document.body.classList.add('sidebar-minimized'); }
62+
LayoutHelper.sidebarToggle(minimized)
6163
}
6264

6365
isOffCanvas(offCanvas) {

src/SidebarMinimizer.js

+5-25
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,8 @@ import React, { Component } from 'react';
22
import PropTypes from 'prop-types';
33
import classNames from 'classnames';
44

5+
import LayoutHelper from './Shared/layout/layout'
6+
57
const propTypes = {
68
children: PropTypes.node,
79
className: PropTypes.string,
@@ -23,33 +25,11 @@ class AppSidebarMinimizer extends Component {
2325

2426
componentDidMount() {
2527
const isMinimized = document.body.classList.contains('sidebar-minimized');
26-
this.togglePs(!isMinimized)
27-
}
28-
29-
sidebarMinimize() {
30-
const isMinimized = document.body.classList.toggle('sidebar-minimized');
31-
this.togglePs(!isMinimized)
32-
}
33-
34-
togglePs(toggle) {
35-
const sidebar = document.querySelector('.sidebar-nav')
36-
if (sidebar) {
37-
if (toggle) {
38-
sidebar.classList.add('ps', 'ps-container', 'ps--active-y')
39-
} else {
40-
sidebar.classList.remove('ps', 'ps-container', 'ps--active-y')
41-
}
42-
}
43-
44-
}
45-
46-
brandMinimize() {
47-
document.body.classList.toggle('brand-minimized');
28+
LayoutHelper.sidebarPSToggle(!isMinimized)
4829
}
4930

50-
handleClick(e) {
51-
this.sidebarMinimize(e)
52-
this.brandMinimize(e)
31+
handleClick() {
32+
LayoutHelper.sidebarToggle()
5333
}
5434

5535
render() {

0 commit comments

Comments
 (0)