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 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 | 356x 356x 437x 437x 1597x 437x 1x 1x 1x 1x 1x 1x 357x 357x 1x 1x | import { ReactElement } from "react";
import { useTranslation } from "react-i18next";
import styled from "styled-components";
import { Link } from "react-router";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import KonstiLogo from "client/components/icons/konsti.svg";
import { LanguageSelector } from "client/components/LanguageSelector";
import { Navigation } from "./Navigation";
import { FirstLogin } from "./FirstLogin";
import { useAppSelector } from "client/utils/hooks";
import { config } from "shared/config";
import { AppRoute } from "client/app/AppRoutes";
import { useTimeNow } from "client/utils/getTimeNow";
import { isMainEventProgramVisible } from "client/utils/getUpcomingProgramItems";
export const HEADER_HEIGHT = 40;
export const Header = (): ReactElement => {
const { t } = useTranslation();
const { eventName, eventYear } = config.event();
const appOpen = useAppSelector((state) => state.admin.appOpen);
// During pre-convention week the title shows the pre-convention week program is on
const appDescriptionKey = isMainEventProgramVisible(useTimeNow())
? "appDescription"
: "appDescriptionPreConventionWeek";
return (
<>
<HeaderContainer>
<Navigation />
<HeaderTitle>
<KonstiIcon aria-label={t("logoAltText")} />
{t(appDescriptionKey, {
EVENT_NAME: eventName,
EVENT_YEAR: eventYear,
})}
</HeaderTitle>
<HeaderRightSideContainer>
<StyledLink
to={AppRoute.ABOUT}
aria-label={t("iconAltText.aboutKonsti")}
>
<LinkIcon icon="circle-question" aria-hidden="true" />
</StyledLink>
<HeaderLanguageSelector />
</HeaderRightSideContainer>
</HeaderContainer>
{!appOpen && <ClosingMessage>{t("closingMessage")}</ClosingMessage>}
<FirstLogin />
</>
);
};
const HeaderLanguageSelector = styled(LanguageSelector)`
margin: 8px;
`;
const HeaderContainer = styled.header`
display: flex;
align-items: center;
justify-content: space-between;
background: #fafafa;
border-bottom: 1px solid #d5d5d5;
box-shadow: 4px 4px 45px 4px #d5d5d5;
margin-bottom: 8px;
color: #282828;
width: 100%;
height: ${HEADER_HEIGHT}px;
`;
const HeaderTitle = styled.div`
display: flex;
flex: 0 1 auto;
align-items: center;
text-align: center;
margin: 4px 8px 4px 8px;
`;
const ClosingMessage = styled.h2`
text-align: center;
`;
const StyledLink = styled(Link)`
margin-right: 12px;
`;
const LinkIcon = styled(FontAwesomeIcon)`
cursor: pointer;
font-size: ${(props) => props.theme.fontSizeLarge};
vertical-align: middle;
margin-bottom: 1px;
color: ${(props) => props.theme.iconDefault};
`;
const HeaderRightSideContainer = styled.div`
display: flex;
align-items: center;
white-space: nowrap;
margin-right: 8px;
`;
const KonstiIcon = styled(KonstiLogo)`
width: 24px;
height: 24px;
vertical-align: middle;
padding-right: 8px;
`;
|