@shopify/polaris/dist/esm/components/Navigation/Navigation.js

Shopify’s product component library

import React$1 from 'react';
import { useTheme } from '../../utilities/theme/hooks.js';
import { useFeatures } from '../../utilities/features/hooks.js';
import { classNames } from '../../utilities/css.js';
import { Image as Image$1 } from '../Image/Image.js';
import { Scrollable as Scrollable$1 } from '../Scrollable/Scrollable.js';
import { UnstyledLink as UnstyledLink$1 } from '../UnstyledLink/UnstyledLink.js';
import { WithinContentContext } from '../../utilities/within-content-context.js';
import { getWidth as getWidth$1 } from '../../utilities/get-width.js';
import { NavigationContext } from './context.js';
import styles from './Navigation.scss.js';
import { Item as Item$1 } from './components/Item/Item.js';
import { Section as Section$1 } from './components/Section/Section.js';

var Navigation = function Navigation({
  children,
  contextControl,
  location,
  onDismiss
}) {
  var {
    logo
  } = useTheme();
  var {
    newDesignLanguage
  } = useFeatures();
  var width = getWidth$1(logo, 104);
  var logoMarkup = logo ? /*#__PURE__*/React$1.createElement("div", {
    className: styles.LogoContainer
  }, /*#__PURE__*/React$1.createElement(UnstyledLink$1, {
    url: logo.url || '',
    className: styles.LogoLink,
    style: {
      width
    }
  }, /*#__PURE__*/React$1.createElement(Image$1, {
    source: logo.topBarSource || '',
    alt: logo.accessibilityLabel || '',
    className: styles.Logo,
    style: {
      width
    }
  }))) : null;
  var mediaMarkup = contextControl ? /*#__PURE__*/React$1.createElement("div", {
    className: styles.ContextControl
  }, contextControl) : logoMarkup;
  var className = classNames(styles.Navigation, newDesignLanguage && styles['Navigation-newDesignLanguage']);
  var context = {
    location,
    onNavigationDismiss: onDismiss
  };
  return /*#__PURE__*/React$1.createElement(NavigationContext.Provider, {
    value: context
  }, /*#__PURE__*/React$1.createElement(WithinContentContext.Provider, {
    value: true
  }, /*#__PURE__*/React$1.createElement("nav", {
    className: className
  }, mediaMarkup, /*#__PURE__*/React$1.createElement(Scrollable$1, {
    className: styles.PrimaryNavigation
  }, children))));
};
Navigation.Item = Item$1;
Navigation.Section = Section$1;

export { Navigation };