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 | 356x 869x 2029x 2029x 869x 869x 869x 180x 139x 26x 1x 1x 1x 48x 1x 185x 1x 185x 185x | import { ReactElement, useState } from "react";
import { useTranslation } from "react-i18next";
import styled from "styled-components";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { LoggedInUserNavigation } from "./LoggedInUserNavigation";
import { UserNavigation } from "./UserNavigation";
import { useAppSelector } from "client/utils/hooks";
import { HEADER_HEIGHT } from "client/components/Header";
export const Navigation = (): ReactElement => {
const { t } = useTranslation();
const loggedIn = useAppSelector((state) => state.login.loggedIn);
const eventLogItems = useAppSelector((state) => state.login.eventLogItems);
const unseenEvents = eventLogItems.filter((item) => !item.isSeen);
const [isOpen, setIsOpen] = useState(false);
const icon = isOpen ? "times" : "bars";
return (
<>
<NavigationIconContainer className="fa-layers fa-fw">
<NavigationIcon
icon={icon}
onClick={() => setIsOpen(!isOpen)}
aria-label={t(
isOpen
? "iconAltText.closeNavigation"
: "iconAltText.openNavigation",
)}
data-testid="navigation-icon"
/>
{!isOpen && unseenEvents.length > 0 && (
<UnseenEventsBadge
className="fa-layers-counter fa-layers-top-right"
aria-label={t("iconAltText.newNotifications")}
>
{unseenEvents.length}
</UnseenEventsBadge>
)}
</NavigationIconContainer>
{isOpen && <Dimmer onClick={() => setIsOpen(false)} />}
{isOpen && (
<Drawer>
{loggedIn ? (
<LoggedInUserNavigation onSelect={() => setIsOpen(false)} />
) : (
<UserNavigation onSelect={() => setIsOpen(false)} />
)}
</Drawer>
)}
</>
);
};
const NavigationIcon = styled(FontAwesomeIcon)`
color: black;
`;
const NavigationIconContainer = styled.span`
margin: 0 8px;
font-size: 30px;
width: 32px;
height: 32px;
`;
const UnseenEventsBadge = styled.span`
background-color: ${(props) => props.theme.iconDefault};
font-size: 36px;
`;
const Dimmer = styled.div`
position: absolute;
top: ${() => HEADER_HEIGHT}px;
left: 0;
right: 0;
bottom: 0;
background: black;
opacity: 0.7;
z-index: 90;
`;
const Drawer = styled.div`
position: absolute;
top: ${() => HEADER_HEIGHT}px;
bottom: 0;
width: 60%;
z-index: 100;
border-right: 1px solid black;
color: black;
background: ${(props) => props.theme.backgroundHighlight};
`;
|