system-praktyk/system-praktyk-front
2
0
Fork 1
Code Issues Pull Requests Releases Wiki Activity

Mark selected language as active

Browse Source
This commit is contained in:
Kacper Donat 2020-07-18 16:42:19 +02:00
parent e5cf8ff107
commit e9d0f6d348
2 changed files with 12 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
src/app.tsx
View File

@ -48,7 +48,7 @@ const UserMenu = (props: HTMLProps<HTMLUListElement>) => {
return <ul {...props}> return <ul {...props}>
{ {
student ? <> 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>) (<Link to={'#'} onClick={ handleUserLogout }>{ t('logout') }</Link>)
</> : <> </> : <>
@ -65,9 +65,14 @@ const LanguageSwitcher = ({ className, ...props }: HTMLProps<HTMLUListElement>)
i18n.changeLanguage(language); i18n.changeLanguage(language);
} }
const isActive = (language: string) => language.toLowerCase() === i18n.language.toLowerCase();
return <ul className={ classNames(className, "language-switcher") } { ...props }> return <ul className={ classNames(className, "language-switcher") } { ...props }>
{ ['pl', 'en'].map(language => <li key={ language }> { ['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>) } </li>) }
</ul> </ul>
} }

6
src/styles/header.scss
View File

@ -37,7 +37,7 @@
.header__divider { .header__divider {
margin: 0 .5rem; margin: 0 .5rem;
background: lighten($main-dark, 3%); background: #274057;
width: 1px; width: 1px;
height: 60%; height: 60%;
} }
@ -65,3 +65,7 @@
} }
} }
} }
.language-switcher__language--active {
font-weight: bold;
}