diff --git a/src/app.tsx b/src/app.tsx index f078d76..c74e0b1 100644 --- a/src/app.tsx +++ b/src/app.tsx @@ -48,7 +48,7 @@ const UserMenu = (props: HTMLProps<HTMLUListElement>) => { return <ul {...props}> { student ? <> - <Trans t={ t } i18nKey="logged-in-as">logged in as <strong>{{ name: student.name }}</strong></Trans> + <Trans t={ t } i18nKey="logged-in-as">logged in as <strong>{{ name: `${student.name} ${student.surname}` }}</strong></Trans> {' '} (<Link to={'#'} onClick={ handleUserLogout }>{ t('logout') }</Link>) </> : <> @@ -65,9 +65,14 @@ const LanguageSwitcher = ({ className, ...props }: HTMLProps<HTMLUListElement>) i18n.changeLanguage(language); } + const isActive = (language: string) => language.toLowerCase() === i18n.language.toLowerCase(); + return <ul className={ classNames(className, "language-switcher") } { ...props }> { ['pl', 'en'].map(language => <li key={ language }> - <Link to="#" onClick={ handleLanguageChange(language) }>{ language }</Link> + <Link to="#" onClick={ handleLanguageChange(language) } + className={ classNames("language-switcher__language", isActive(language) && "language-switcher__language--active") }> + { language } + </Link> </li>) } </ul> } diff --git a/src/styles/header.scss b/src/styles/header.scss index ea7b6c1..fa40ca4 100644 --- a/src/styles/header.scss +++ b/src/styles/header.scss @@ -37,7 +37,7 @@ .header__divider { margin: 0 .5rem; - background: lighten($main-dark, 3%); + background: #274057; width: 1px; height: 60%; } @@ -65,3 +65,7 @@ } } } + +.language-switcher__language--active { + font-weight: bold; +}