Preview:
	// const menuOptions = [
	// 	{
	// 		labelId: 'menu.account',
	// 		icon: (<Icon>account_circle</Icon>),
	// 		component: (<AccountInfo info={props} />)
	// 	},
	// 	{
	// 		labelId: 'menu.favorite',
	// 		icon: (<Icon>favorite</Icon>),
	// 		component: (<Favourites info={props} />)
	// 	},
	// 	{
	// 		labelId: 'password',
	// 		icon: (<Icon>enhanced_encryption</Icon>),
	// 		component: (<Password info={props} />)
	// 	}
	// ]

	// // when credit enabled
	// if (isCreditEnabled){
	// 	menuOptions.push({
	// 		name: 'credit wallet',
	// 		labelId: 'credit.wallet',
	// 		icon: (<Purse/>),
	// 		component: (<CreditManager />)
	// 	})
	// }

	// const [index, setIndex] = useState(showFavorites ? 1 : showWallet ? 3 : 0)
	// const [open, setOpen] = useState('')

			{/* <div className="row">
				<Paper className="paperContainer" style={{paddingRight:'1rem', height:'fit-content', width:'fit-content'}}>
					<Tabs
						orientation="vertical"
						value={index}
						onChange={(e, i) => setIndex(i)}
						indicatorColor="primary"
						textColor="primary"
						style={{width:'20rem'}}
					>
						{menuOptions.map((option, i)=>
							<Tab
								key={i}
								index={i}
								label={<FormattedMessage id={option.labelId} />}
								icon={option.icon}
								name={option.name}
							/>CreditManager
						)}
					</Tabs>
				</Paper>

				{menuOptions[index].component}
			</div> */}
downloadDownload PNG downloadDownload JPEG downloadDownload SVG

Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!

Click to optimize width for Twitter