Commitef4e4aa

committed

setup side menu with options

Signed-off-by: shmck <shawn.j.mckay@gmail.com>

1 parent511ac12 commitef4e4aaCopy full SHA for ef4e4aa

File tree

+59

-8

lines changed

+59

-8

lines changed

Lines changed: 57 additions & 0 deletions

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,57 @@`
	`1`	`+import*asReactfrom'react'`
	`2`	`+import{Menu,Icon,Drawer}from'@alifd/next'`
	`3`	`+`
	`4`	`+const{ Item, Divider}=Menu`
	`5`	`+`
	`6`	`+conststyles={`
	`7`	`+drawer:{`
	`8`	`+padding:0,`
	`9`	`+},`
	`10`	`+menu:{`
	`11`	`+margin:0,`
	`12`	`+height:'100%',`
	`13`	`+},`
	`14`	`+itemText:{`
	`15`	`+marginLeft:'0.5rem',`
	`16`	`+},`
	`17`	`+}`
	`18`	`+`
	`19`	`+interfaceProps{`
	`20`	`+visible:boolean`
	`21`	`+toggleVisible(visible:boolean):void`
	`22`	`+}`
	`23`	`+`
	`24`	`+constSideMenu=(props:Props)=>{`
	`25`	`+constonMenuClose=()=>{`
	`26`	`+props.toggleVisible(false)`
	`27`	`+}`
	`28`	`+return(`
	`29`	`+<Drawer`
	`30`	`+bodyStyle={styles.drawer}`
	`31`	`+title="Menu"`
	`32`	`+visible={props.visible}`
	`33`	`+placement="left"`
	`34`	`+closeable="mask"`
	`35`	`+onClose={onMenuClose}`
	`36`	`+>`
	`37`	`+<Menustyle={styles.menu}defaultOpenKeys="sub-menu">`
	`38`	`+<Itemdisabledkey="1">`
	`39`	`+<Icontype="list"size="small"color="#EBEBEB"/>`
	`40`	`+<spanstyle={styles.itemText}>Review</span>`
	`41`	`+</Item>`
	`42`	`+{/* <Divider key="divider" />`
	`43`	`+ <Item disabled key="2">`
	`44`	`+ <Icon type="help" size="small" color="#EBEBEB" />`
	`45`	`+ <span style={styles.itemText}>Help</span>`
	`46`	`+ </Item> */}`
	`47`	`+<Dividerkey="divider"/>`
	`48`	`+<Itemdisabledkey="3">`
	`49`	`+<Icontype="set"size="small"color="#EBEBEB"/>`
	`50`	`+<spanstyle={styles.itemText}>Settings</span>`
	`51`	`+</Item>`
	`52`	`+</Menu>`
	`53`	`+</Drawer>`
	`54`	`+)`
	`55`	`+}`
	`56`	`+`
	`57`	`+exportdefaultSideMenu`

Lines changed: 2 additions & 8 deletions

Original file line number	Diff line number	Diff line change
`@@ -1,8 +1,8 @@`
`1`	`1`	`import*asReactfrom'react'`
`2`	`2`	`import*asTfrom'typings'`
`3`	`3`	`import*asTTfrom'typings/tutorial'`
`4`		`-import{Drawer}from'@alifd/next'`
`5`	`4`	`import*asselectorsfrom'../../services/selectors'`
	`5`	`+importSideMenufrom'./components/SideMenu'`
`6`	`6`	`importLevelfrom'./components/Level'`
`7`	`7`	`importIconfrom'../../components/Icon'`
`8`	`8`
`@@ -61,10 +61,6 @@ const TutorialPage = (props: PageProps) => {`
`61`	`61`	`constlevelStatus=progress.levels[position.levelId] ?'COMPLETE' :'ACTIVE'`
`62`	`62`	`const[menuVisible,setMenuVisible]=React.useState(false)`
`63`	`63`
`64`		`-constonMenuClose=()=>{`
`65`		`-setMenuVisible(false)`
`66`		`-}`
`67`		`-`
`68`	`64`	`return(`
`69`	`65`	`<div>`
`70`	`66`	`<divcss={styles.header}>`
`@@ -86,9 +82,7 @@ const TutorialPage = (props: PageProps) => {`
`86`	`82`	`processes={processes}`
`87`	`83`	`testStatus={testStatus}`
`88`	`84`	`/>`
`89`		`-<Drawertitle="Menu Title"visible={menuVisible}placement="left"onClose={onMenuClose}>`
`90`		`- Menu content here`
`91`		`-</Drawer>`
	`85`	`+<SideMenuvisible={menuVisible}toggleVisible={setMenuVisible}/>`
`92`	`86`	`</div>`
`93`	`87`	`)`
`94`	`88`	`}`

Comments

(0)