@awsui/components-react
Version:
On July 19th, 2022, we launched [Cloudscape Design System](https://cloudscape.design). Cloudscape is an evolution of AWS-UI. It consists of user interface guidelines, front-end components, design resources, and development tools for building intuitive, en
35 lines • 2.58 kB
JavaScript
// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
// SPDX-License-Identifier: Apache-2.0
import React from 'react';
import clsx from 'clsx';
import { findUpUntil } from '@awsui/component-toolkit/dom';
import { InternalButton } from '../../../button/internal';
import { getDrawerStyles } from '../compute-layout';
import sharedStyles from '../../resize/styles.css.js';
import testutilStyles from '../../test-classes/styles.css.js';
import styles from './styles.css.js';
export function AppLayoutNavigationImplementation({ appLayoutInternals, bottomDrawerReportedSize, }) {
var _a, _b;
const { ariaLabels, onNavigationToggle, isMobile, navigationOpen, navigation, navigationFocusControl, placement, verticalOffsets, } = appLayoutInternals;
const { drawerTopOffset, drawerHeight } = getDrawerStyles(verticalOffsets, isMobile, placement, isMobile ? 0 : (bottomDrawerReportedSize !== null && bottomDrawerReportedSize !== void 0 ? bottomDrawerReportedSize : 0));
// Close the Navigation drawer on mobile when a user clicks a link inside.
const onNavigationClick = (event) => {
const hasLink = findUpUntil(event.target, node => node.tagName === 'A' && !!node.href);
if (hasLink && isMobile) {
onNavigationToggle(false);
}
};
return (React.createElement("div", { className: clsx(styles['navigation-container'], sharedStyles['with-motion-horizontal'], {
[styles['is-navigation-open']]: navigationOpen,
}), style: {
blockSize: drawerHeight,
insetBlockStart: drawerTopOffset,
} },
React.createElement("nav", { "aria-label": (_a = ariaLabels === null || ariaLabels === void 0 ? void 0 : ariaLabels.navigation) !== null && _a !== void 0 ? _a : undefined, className: clsx(styles.navigation, {
[testutilStyles['drawer-closed']]: !navigationOpen,
}, testutilStyles.navigation), "aria-hidden": !navigationOpen, onClick: onNavigationClick },
React.createElement("div", { className: clsx(styles['hide-navigation']) },
React.createElement(InternalButton, { ariaLabel: (_b = ariaLabels === null || ariaLabels === void 0 ? void 0 : ariaLabels.navigationClose) !== null && _b !== void 0 ? _b : undefined, iconName: isMobile ? 'close' : 'angle-left', onClick: () => onNavigationToggle(false), variant: "icon", formAction: "none", className: testutilStyles['navigation-close'], ref: navigationFocusControl.refs.close, analyticsAction: "close" })),
navigation)));
}
//# sourceMappingURL=index.js.map