Rocket.Chat/client/views/setupWizard/SideBar.js

import { Box, Margins } from '@rocket.chat/fuselage';
import { useMediaQuery } from '@rocket.chat/fuselage-hooks';
import React from 'react';

import { useTranslation } from '../../contexts/TranslationContext';
import Logo from '../../components/Logo';
import './SideBar.css';
import ScrollableContentWrapper from '../../components/ScrollableContentWrapper';

function SideBar({
	logoSrc = 'images/logo/logo.svg',
	currentStep = 1,
	steps = [],
}) {
	const t = useTranslation();
	const small = useMediaQuery('(max-width: 760px)');

	return <Box
		is='aside'
		className='SetupWizard__SideBar'
		flexGrow={0}
		flexShrink={1}
		flexBasis={small ? 'auto' : '350px'}
		maxHeight='sh'
		display='flex'
		flexDirection='column'
		flexWrap='nowrap'
		style={{ overflow: 'hidden' }}
	>
		<Box
			is='header'
			marginBlockStart={small ? 'x16' : 'x32'}
			marginBlockEnd={small ? 'none' : 'x32'}
			marginInline='x24'
			display='flex'
			flexDirection='row'
			flexWrap='wrap'
			alignItems='center'
		>
			<Logo
				src={logoSrc}
				width='auto'
				height='x24'
				margin='x4'
			/>
			<Box
				is='span'
				margin='x4'
				paddingBlock='x4'
				paddingInline='x8'
				color='alternative'
				fontScale='micro'
				style={{
					whiteSpace: 'nowrap',
					textTransform: 'uppercase',
					backgroundColor: 'var(--color-dark, #2f343d)',
					borderRadius: '9999px',
				}}
			>
				{t('Setup_Wizard')}
			</Box>
		</Box>

		{!small && <ScrollableContentWrapper>
			<Box
				flexGrow={1}
				marginBlockEnd='x16'
				paddingInline='x32'
			>
				<Margins blockEnd='x16'>
					<Box is='h2' fontScale='h1' color='default'>{t('Setup_Wizard')}</Box>
					<Box is='p' color='hint' fontScale='p1'>{t('Setup_Wizard_Info')}</Box>
				</Margins>

				<Box is='ol'>
					{steps.map(({ step, title }) =>
						<Box
							key={step}
							is='li'
							className={[
								'SetupWizard__SideBar-step',
								step < currentStep && 'SetupWizard__SideBar-step--past',
							].filter(Boolean).join(' ')}
							data-number={step}
							marginBlock='x32'
							marginInline='neg-x8'
							display='flex'
							alignItems='center'
							fontScale='p2'
							color={(step === currentStep && 'primary')
							|| (step < currentStep && 'default')
							|| 'disabled'}
							style={{ position: 'relative' }}
						>
							{title}
						</Box>,
					)}
				</Box>
			</Box>
		</ScrollableContentWrapper>}
	</Box>;
}

export default SideBar;