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 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 | 2x 2x 2x 2x 2x 2x 2x 2x 15x 15x 15x 15x 15x 15x 15x 15x 15x 15x 15x 15x 15x 15x 3x 3x 15x 2x 2x 2x 15x 54x 2x 2x 2x 2x 15x 15x 15x 2x 21x 21x 2x 15x | import React, { useState } from "react";
import {
NavigationBarGroupProps,
NavigationBarGroupStyleProps,
} from "./NavigationBarGroup.types";
import Text from "../../Text/Text";
import styled from "styled-components";
import { IconChevronRight } from "@tabler/icons-react";
import { useTheme } from "../../ThemeProvider/ThemeProvider";
import { getColorPalette } from "../../../helpers/helpers";
import colorTokens from "../../../tokens/colors.json";
const NavigationBarGroup = ({
leadingIcon,
children,
title,
expanded = false,
className,
color = colorTokens.default.primary.main,
onClick,
"data-testid": dataTestId,
"data-testid-header": dataTestIdHeader,
}: NavigationBarGroupProps) => {
const navigationBarGrpItmContnrRef = React.useRef(null);
const [expand, setExpand] = useState(expanded);
const theme = useTheme().theme;
const colorPalette = getColorPalette(theme, color);
const _toggleExpand = (e: React.MouseEvent | React.KeyboardEvent) => {
setExpand((expand) => !expand);
onClick && onClick(e);
};
const _handleKeyDown = (e: React.KeyboardEvent) => {
if (e.key === "Enter" || e.key === " ") {
_toggleExpand(e);
onClick && onClick(e);
}
};
return (
<StyledNavBarGroup className={className} data-testid={dataTestId}>
<StyledNavBarGroupHeader
tabIndex={0}
$color={color}
$colorPalette={colorPalette}
onClick={_toggleExpand}
onKeyDown={_handleKeyDown}
data-testid={dataTestIdHeader}
>
<span>
{leadingIcon && (
<StyledNavBarGroupIcon $colorPalette={colorPalette} $color={color}>
{leadingIcon}
</StyledNavBarGroupIcon>
)}
{title && typeof title === "string" ? (
<Text color={color} variant="span">{title}</Text>
) : (
title
)}
</span>
{
<StyledNavBarGroupIcon $colorPalette={colorPalette} $color={color} $expand={expand}>
<IconChevronRight />
</StyledNavBarGroupIcon>
}
</StyledNavBarGroupHeader>
{
<StyledNavBarGroupItemContainer
ref={navigationBarGrpItmContnrRef}
$colorPalette={colorPalette}
$color={color}
$expand={expand}
>
{React.Children.map(children, (child, index) =>
child && React.cloneElement(child as React.ReactElement, {
tabIndex: expand ? 0 : -1,
key: index,
} as Partial<NavigationBarGroupProps>)
)}
</StyledNavBarGroupItemContainer>
}
</StyledNavBarGroup>
);
};
NavigationBarGroup.displayName = "NavigationBarGroup";
export default NavigationBarGroup;
const StyledNavBarGroup = styled.ul`
display: flex;
flex-direction: column;
gap: 0.15rem;
margin: 0.25rem 0 0 0;
padding: 0;
`;
const StyledNavBarGroupHeader = styled.li<NavigationBarGroupStyleProps>`
display: flex;
flex-direction: row;
gap: 0.5rem;
justify-content: space-between;
align-items: center;
padding: 0.3rem 0.75rem;
border-radius: 0.5rem;
margin: 0 0.5rem;
cursor: pointer;
&:hover {
background-color: ${(props) => props.$colorPalette[props.$color].grayScale[1]};
}
&:active {
background-color: ${(props) => props.$colorPalette[props.$color].grayScale[2]};
}
&:focus-visible {
outline: 1px solid ${(props) => props.$colorPalette[props.$color].accentScale[6]};
}
`;
const StyledNavBarGroupIcon = styled.span<NavigationBarGroupStyleProps>`
display: flex;
justify-content: center;
align-items: center;
transition: rotate 0.15s ease-in-out;
rotate: ${(props) => (props.$expand ? "90deg" : "")};
svg {
width: 1rem;
height: 1rem;
}
color: ${(props) => props.$colorPalette[props.$color].accentScale[10]};
`;
const StyledNavBarGroupItemContainer = styled.ul<NavigationBarGroupStyleProps>`
height: auto;
max-height: ${(props) => (props.$expand ? "100vh" : "0")};
overflow: hidden;
transition: max-height 0.3s ease-in-out;
gap: 0.25rem;
padding: 0;
li:first-child {
margin-top: 0.1rem;
}
li:last-child {
margin-bottom: 0.1rem;
}
`; |