Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Commit ae44e02

Browse files
modularcodermodularcoder
committed
Re-implement SidebarNav
1 parent cad7851 commit ae44e02

File tree

9 files changed

+309
-106
lines changed

9 files changed

+309
-106
lines changed

‎src-ts/_common/AppSidebar/AppSidebar.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ export interface ISidebarProps {
1313
}
1414

1515
const Sidebar: React.FC<ISidebarProps> = (props) => {
16-
const { isCollapsed } = props
16+
// const { isCollapsed } = props
1717

1818
const classes = useStyles(props)
1919

@@ -36,7 +36,7 @@ const Sidebar: React.FC<ISidebarProps> = (props) => {
3636
</Typography>
3737
</Link>
3838
</div>
39-
<SidebarNav isCollapsed={isCollapsed} />
39+
<SidebarNav />
4040
</div>
4141
</aside>
4242
)

‎src-ts/_common/AppSidebar/SidebarNav/SidebarNav.tsx

Lines changed: 8 additions & 104 deletions
Original file line numberDiff line numberDiff line change
@@ -3,129 +3,33 @@ import { makeStyles, createStyles } from '@material-ui/core/styles'
33
import List from '@material-ui/core/List'
44
import ListSubheader from '@material-ui/core/ListSubheader'
55

6-
import IconProfile from '@material-ui/icons/AccountBox'
7-
import IconAdmin from '@material-ui/icons/VpnKey'
8-
import IconDashboard from '@material-ui/icons/Dashboard'
9-
import IconLibraryBooks from '@material-ui/icons/LibraryBooks'
10-
import IconQuestionAnswer from '@material-ui/icons/QuestionAnswer'
11-
import IconNewReleases from '@material-ui/icons/NewReleases'
12-
import IconSettings from '@material-ui/icons/Settings'
13-
import IconGroup from '@material-ui/icons/Group'
14-
import IconPreson from '@material-ui/icons/Person' //
15-
16-
import NavList from './NavList'
17-
18-
export interface ISidebarNavItem {
19-
name: string
20-
link?: string
21-
Icon?: any
22-
IconClassName?: string
23-
items?: ISidebarNavItem[]
24-
}
6+
import { itemsCore, itemsTheme } from './SidebarNavService'
7+
import SidebarNavListItem, { ISidebarNavListItem } from './SidebarNavListItem'
258

269
export interface ISidebarNavProps {
27-
isCollapsed?: boolean
10+
// isCollapsed?: boolean
2811
}
2912

3013
const SidebarNav: React.FC<ISidebarNavProps> = (props) => {
31-
const { isCollapsed } = props
14+
// const { isCollapsed } = props
3215
const classes = useStyles()
3316

34-
const itemsCore = [
35-
{
36-
name: 'Dashboard',
37-
link: '/',
38-
Icon: IconDashboard,
39-
},
40-
{
41-
name: 'Auth',
42-
Icon: IconPreson,
43-
items: [
44-
{
45-
name: 'Login',
46-
link: '/auth/login',
47-
},
48-
{
49-
name: 'Signup',
50-
link: '/auth/signup',
51-
},
52-
{
53-
name: 'Recover',
54-
link: '/auth/recover',
55-
},
56-
{
57-
name: 'Reset',
58-
link: '/auth/reset',
59-
},
60-
],
61-
},
62-
{
63-
name: 'Account',
64-
Icon: IconProfile,
65-
items: [
66-
{
67-
name: 'Profile',
68-
link: '/profile/me',
69-
},
70-
{
71-
name: 'Organization',
72-
link: '/organization',
73-
},
74-
],
75-
},
76-
{
77-
name: 'Administration',
78-
Icon: IconAdmin,
79-
items: [
80-
{
81-
name: 'Users',
82-
link: '/administration/users',
83-
Icon: IconGroup,
84-
},
85-
],
86-
},
87-
{
88-
name: 'Settings',
89-
link: '/settings',
90-
Icon: IconSettings,
91-
},
92-
]
93-
94-
const itemsTheme = [
95-
{
96-
name: 'Why Modular?',
97-
link: '/demo/features',
98-
Icon: IconNewReleases,
99-
IconClassName: classes.iconFeatures,
100-
},
101-
{
102-
name: 'Docs',
103-
link: '/demo/docs',
104-
Icon: IconLibraryBooks,
105-
IconClassName: classes.iconDocs,
106-
},
107-
{
108-
name: 'Discuss',
109-
link: 'https://github.com/modularcode/modular-admin-react/discussions',
110-
Icon: IconQuestionAnswer,
111-
IconClassName: classes.iconDiscuss,
112-
},
113-
]
114-
11517
return (
11618
<div>
11719
<List className={classes.navList} disablePadding>
11820
<ListSubheader disableSticky={true} className={classes.navListHeader}>
11921
Core Modules
12022
</ListSubheader>
121-
<NavList isCollapsed={isCollapsed} items={itemsCore} />
12223
</List>
12324

25+
{itemsCore.map((item: ISidebarNavListItem) => {
26+
return <SidebarNavListItem {...item} />
27+
})}
28+
12429
<List className={classes.navList} disablePadding>
12530
<ListSubheader disableSticky={true} className={classes.navListHeader}>
12631
Misc
12732
</ListSubheader>
128-
<NavList isCollapsed={isCollapsed} items={itemsTheme} />
12933
</List>
13034
</div>
13135
)

‎src-ts/_common/AppSidebar/SidebarNav/SidebarNavListItem.tsx

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
import React from 'react'
2+
3+
import List from '@material-ui/core/List'
4+
import ListItem from '@material-ui/core/ListItem'
5+
import Collapse from '@material-ui/core/Collapse'
6+
7+
import { makeStyles, createStyles } from '@material-ui/core/styles'
8+
9+
export interface ISidebarNavListItem {
10+
name: string
11+
link?: string
12+
Icon?: any
13+
IconClassName?: string
14+
items?: ISidebarNavListItem[]
15+
}
16+
17+
export interface ISidebarNavListItemProps extends ISidebarNavListItem {}
18+
19+
const SidebarNavListItem: React.FC<ISidebarNavListItemProps> = (props) => {
20+
const { name, items = [] } = props
21+
22+
const [open, setOpen] = React.useState(false)
23+
24+
const handleItemClick = (e: React.MouseEvent) => {
25+
e.preventDefault()
26+
27+
setOpen(!open)
28+
}
29+
30+
return (
31+
<ListItem>
32+
<a href="/" onClick={handleItemClick}>
33+
{name}
34+
</a>
35+
36+
{items.length > 0 && (
37+
<Collapse in={open} timeout="auto" unmountOnExit>
38+
<List component="div" disablePadding>
39+
{items.map((item: ISidebarNavListItem) => (
40+
<SidebarNavListItem {...item} key={item.name || item.link} />
41+
))}
42+
</List>
43+
</Collapse>
44+
)}
45+
</ListItem>
46+
)
47+
}
48+
49+
export default SidebarNavListItem

‎src-ts/_common/AppSidebar/SidebarNav/SidebarNavService.ts

Lines changed: 87 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,87 @@
1+
import IconProfile from '@material-ui/icons/AccountBox'
2+
import IconAdmin from '@material-ui/icons/VpnKey'
3+
import IconDashboard from '@material-ui/icons/Dashboard'
4+
import IconLibraryBooks from '@material-ui/icons/LibraryBooks'
5+
import IconQuestionAnswer from '@material-ui/icons/QuestionAnswer'
6+
import IconNewReleases from '@material-ui/icons/NewReleases'
7+
import IconSettings from '@material-ui/icons/Settings'
8+
import IconGroup from '@material-ui/icons/Group'
9+
import IconPreson from '@material-ui/icons/Person' //
10+
11+
export const itemsCore = [
12+
{
13+
name: 'Dashboard',
14+
link: '/',
15+
Icon: IconDashboard,
16+
},
17+
{
18+
name: 'Auth',
19+
Icon: IconPreson,
20+
items: [
21+
{
22+
name: 'Login',
23+
link: '/auth/login',
24+
},
25+
{
26+
name: 'Signup',
27+
link: '/auth/signup',
28+
},
29+
{
30+
name: 'Recover',
31+
link: '/auth/recover',
32+
},
33+
{
34+
name: 'Reset',
35+
link: '/auth/reset',
36+
},
37+
],
38+
},
39+
{
40+
name: 'Account',
41+
Icon: IconProfile,
42+
items: [
43+
{
44+
name: 'Profile',
45+
link: '/profile/me',
46+
},
47+
{
48+
name: 'Organization',
49+
link: '/organization',
50+
},
51+
],
52+
},
53+
{
54+
name: 'Administration',
55+
Icon: IconAdmin,
56+
items: [
57+
{
58+
name: 'Users',
59+
link: '/administration/users',
60+
Icon: IconGroup,
61+
},
62+
],
63+
},
64+
{
65+
name: 'Settings',
66+
link: '/settings',
67+
Icon: IconSettings,
68+
},
69+
]
70+
71+
export const itemsTheme = [
72+
{
73+
name: 'Why Modular?',
74+
link: '/demo/features',
75+
Icon: IconNewReleases,
76+
},
77+
{
78+
name: 'Docs',
79+
link: '/demo/docs',
80+
Icon: IconLibraryBooks,
81+
},
82+
{
83+
name: 'Discuss',
84+
link: 'https://github.com/modularcode/modular-admin-react/discussions',
85+
Icon: IconQuestionAnswer,
86+
},
87+
]

‎src-ts/_common/AppSidebar/SidebarNav/NavItem.tsx renamed to ‎src-ts/_common/AppSidebar/SidebarNavRecursive/NavItem.tsx

File renamed without changes.

‎src-ts/_common/AppSidebar/SidebarNav/NavItemComponent.tsx renamed to ‎src-ts/_common/AppSidebar/SidebarNavRecursive/NavItemComponent.tsx

File renamed without changes.

‎src-ts/_common/AppSidebar/SidebarNav/NavList.tsx renamed to ‎src-ts/_common/AppSidebar/SidebarNavRecursive/NavList.tsx

File renamed without changes.

0 commit comments

Comments
 (0)