@equinor/eds-core-react/dist/esm/components/TopBar/TopBar.js

The React implementation of the Equinor Design System

import { forwardRef } from 'react';
import styled, { css, ThemeProvider } from 'styled-components';
import { bordersTemplate, spacingsTemplate, typographyTemplate, useToken } from '@equinor/eds-utils';
import { topbar } from './TopBar.tokens.js';
import { jsx } from 'react/jsx-runtime';
import { Paper } from '../Paper/Paper.js';
import { useEds } from '../EdsProvider/eds.context.js';

const StyledTopBar = styled(Paper).withConfig({
  displayName: "TopBar__StyledTopBar",
  componentId: "sc-1yj236q-0"
})(({
  theme,
  $sticky
}) => {
  return css(["height:", ";background:", ";box-sizing:border-box;display:grid;grid-column-gap:", ";grid-template-columns:auto 1fr auto;grid-template-areas:'left center right';align-items:center;", " ", ";", " ", ""], theme.height, theme.background, theme.spacings.left, bordersTemplate(theme.border), spacingsTemplate(theme.spacings), typographyTemplate(theme.typography), $sticky && css(["position:sticky;top:0;z-index:1100;"]));
});
const TopBar = /*#__PURE__*/forwardRef(function TopBar({
  children,
  elevation = 'none',
  sticky = true,
  ...props
}, ref) {
  const {
    density
  } = useEds();
  const token = useToken({
    density
  }, topbar);
  const rest = {
    ...props,
    ref
  };
  return /*#__PURE__*/jsx(ThemeProvider, {
    theme: token,
    children: /*#__PURE__*/jsx(StyledTopBar, {
      forwardedAs: 'header',
      elevation: elevation,
      $sticky: sticky,
      ...rest,
      children: children
    })
  });
});

// TopBar.displayName = 'eds-topbar'

export { TopBar };