@@ -17,6 +17,8 @@ const TutorialPage = (props: PageProps) => {
1717
1818const tutorial = selectors . currentTutorial ( props . context )
1919const levelData :TT . Level = selectors . currentLevel ( props . context )
20+
21+ const [ title , setTitle ] = React . useState < string > ( levelData . title )
2022const [ content , setContent ] = React . useState < string > ( levelData . content )
2123
2224const onContinue = ( ) :void => {
@@ -43,6 +45,14 @@ const TutorialPage = (props: PageProps) => {
4345return { ...step , status}
4446} )
4547
48+ const setMenuContent = ( levelId :string ) => {
49+ const selectedLevel :TT . Level | undefined = tutorial . levels . find ( ( l :TT . Level ) => l . id === levelId )
50+ if ( selectedLevel ) {
51+ setTitle ( selectedLevel . title )
52+ setContent ( selectedLevel . content )
53+ }
54+ }
55+
4656const menu = (
4757< Menu >
4858{ tutorial . levels . map ( ( level :TT . Level ) => {
@@ -61,7 +71,7 @@ const TutorialPage = (props: PageProps) => {
6171icon = < Icon type = "minus" size = "xs" />
6272}
6373return (
64- < Menu . Item key = { level . id } disabled = { disabled } >
74+ < Menu . Item key = { level . id } disabled = { disabled } onSelect = { ( ) => setMenuContent ( level . id ) } >
6575{ icon } { level . title }
6676</ Menu . Item >
6777)
@@ -71,7 +81,7 @@ const TutorialPage = (props: PageProps) => {
7181
7282return (
7383< Level
74- title = { levelData . title }
84+ title = { title }
7585content = { content }
7686menu = { menu }
7787index = { tutorial . levels . findIndex ( ( l :TT . Level ) => l . id === position . levelId ) }