@hackplan/polaris/esnext/components/Navigation/Navigation.js

Shopify’s product component library

import React from 'react';
import classNames from 'classnames';
import Scrollable from '../Scrollable';
import WithinContentContext from '../WithinContentContext';
import NavigationContext from './context';
import { Section, Item } from './components';
import styles from './Navigation.scss';
export default class Navigation extends React.Component {
    render() {
        const { children, contextControl, location, onDismiss, iconOnly, } = this.props;
        const navClassName = classNames(styles.Navigation, iconOnly && styles['Navigation-IconOnly']);
        const contextControlMarkup = contextControl && (<div className={styles.ContextControl}>{contextControl}</div>);
        const context = {
            location,
            onNavigationDismiss: onDismiss,
            iconOnly,
        };
        return (<NavigationContext.Provider value={context}>
        <WithinContentContext.Provider value>
          <nav className={navClassName}>
            {contextControlMarkup}
            <Scrollable className={styles.PrimaryNavigation}>
              {children}
            </Scrollable>
          </nav>
        </WithinContentContext.Provider>
      </NavigationContext.Provider>);
    }
}
Navigation.Item = Item;
Navigation.Section = Section;