Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 | 356x 33x 76x 76x 1x 111x 111x 111x 1x | import { ReactElement } from "react";
import { useTranslation } from "react-i18next";
import styled from "styled-components";
import { NavLink } from "react-router";
import { useAppSelector } from "client/utils/hooks";
import { LoginProvider } from "shared/config/eventConfigTypes";
import { AppRoute, ProgramTab } from "client/app/AppRoutes";
export const UserNavigation = (props: {
onSelect: () => void;
}): ReactElement => {
const { t } = useTranslation();
const appOpen = useAppSelector((state) => state.admin.appOpen);
const loginProvider = useAppSelector((state) => state.admin.loginProvider);
return (
<StyledRoutes>
<RouterLink
onClick={props.onSelect}
to={ProgramTab.PROGRAM_LIST}
data-testid="program-list-page-link"
>
{t("pages.program")}
</RouterLink>
<RouterLink
onClick={props.onSelect}
to={AppRoute.LOGIN}
data-testid="login-page-link"
>
{t("button.login")}
</RouterLink>
{appOpen && loginProvider !== LoginProvider.KOMPASSI && (
<RouterLink
onClick={props.onSelect}
to={AppRoute.REGISTRATION}
data-testid="registration-page-link"
>
{t("button.register")}
</RouterLink>
)}
<RouterLink onClick={props.onSelect} to={AppRoute.ABOUT}>
{t("pages.help")}
</RouterLink>
</StyledRoutes>
);
};
const RouterLink = styled(NavLink)`
position: relative;
display: inline-block;
padding: 10px 12px 10px 12px;
font-size: ${(props) => props.theme.linkFontSize};
text-decoration: none;
color: ${(props) => props.theme.textMain};
border-bottom: 1px solid black;
&:hover,
&:focus,
&.active {
background: ${(props) => props.theme.backgroundHover};
}
`;
const StyledRoutes = styled.div`
display: flex;
flex-direction: column;
`;
|