aswi20220x00-gitlab/webapp/layouts/MainLayout.tsx @ 4ebfa716

import 'antd/dist/antd.css';
import styles from '/styles/MainLayout.module.scss';
import { useContext } from 'react';
import { LoggedUserContext } from '../contexts/LoggedUserContext';
import AdminNavBar from '../components/navigation/AdminNavBar';
import UserNavBar from '../components/navigation/UserNavBar';

/**
 * Creates layout of main screens.
 * @param props Html structure of a login form.
 * @returns The login screen.
 */
export function MainLayout(props: { children: React.ReactNode }) {
    const { role } = useContext(LoggedUserContext);
    const isAdmin = role === 'ADMINISTRATOR';
    const isAnnotator = role === 'ANNOTATOR';

    return (
        <div className={styles.layoutWrapper}>
            <div className={styles.header}>
                {(isAdmin && <AdminNavBar />) || (isAnnotator && <UserNavBar />)}
            </div>
            <main className={styles.content}>{props.children}</main>
            <div className={styles.footer} />
        </div>
    );
}