@patreon/studio/module/components/TopNav/index.jsx

Patreon Studio Design System

'use client';
import React from 'react';
import { styled } from 'styled-components';
import { HeadingText } from '~/components/HeadingText';
import { PatreonMark, PatreonWordmark } from '~/components/Logo';
import { tokens } from '~/tokens';
import { convertLegacyUnitValue } from '~/utilities/legacy-units';
import { Items } from './components/Items';
import { Search } from './components/Search';
/** @deprecated `TopNav` should not be used in new development. */
// TODO (legacied react-prefer-function-component/react-prefer-function-component)
// This failure is legacied in and should be updated. DO NOT COPY.
// eslint-disable-next-line react-prefer-function-component/react-prefer-function-component
export class TopNav extends React.Component {
    static Search = Search;
    static defaultProps = {
        logo: {
            type: 'wordmark',
            url: '/',
        },
    };
    renderLogo = () => {
        const { logo: { onClick, type, url }, } = this.props;
        let LogoComponent;
        let width;
        let height;
        switch (type) {
            case 'mark':
                LogoComponent = PatreonMark;
                width = 3;
                height = 3;
                break;
            case 'wordmark':
            default:
                LogoComponent = PatreonWordmark;
                width = 12;
                height = 4;
                break;
        }
        return (<LogoWrapper aria-label="Go to home page" href={url} onClick={onClick}>
        <LogoComponent height={convertLegacyUnitValue(height)} width={convertLegacyUnitValue(width)}/>
      </LogoWrapper>);
    };
    render() {
        const { bottomNode, items, itemsRight, itemsLeft, notFixed, title } = this.props;
        const rightItems = itemsRight || items;
        return (<NavWrapper notFixed={notFixed} title={title}>
        <LeftWrapper>
          {this.renderLogo()}
          {itemsLeft && <Items items={itemsLeft}/>}
        </LeftWrapper>
        {title && (<TitleWrapper>
            <HeadingText as="h2" size="sm" ellipsis>
              {title}
            </HeadingText>
          </TitleWrapper>)}
        <RightWrapper>{rightItems && <Items items={rightItems} rightAlign/>}</RightWrapper>
        {bottomNode && <BottomWrapper>{bottomNode}</BottomWrapper>}
      </NavWrapper>);
    }
}
const NavWrapper = styled.header `
  align-items: center;
  background-color: ${tokens.global.bg.base.default};
  border-bottom: ${tokens.global.borderWidth.thin} solid ${tokens.global.border.muted.default};
  box-sizing: border-box;
  display: grid;
  grid-column-gap: ${tokens.global.space.x16};
  grid-template-columns: ${(props) => (props.title ? '1fr auto 1fr' : 'auto auto')};
  grid-template-rows: 64px;
  padding: 0 ${tokens.global.space.x16};
  position: ${(props) => (props.notFixed ? 'relative' : 'fixed')};
  width: 100%;
`;
const LeftWrapper = styled.div `
  display: flex;
`;
const RightWrapper = styled.div `
  justify-self: end;
`;
const BottomWrapper = styled.div `
  grid-row-start: 2;
  grid-column: 1 / -1;
`;
const LogoWrapper = styled.a `
  display: flex;
  align-items: center;
  padding: ${tokens.global.space.x16} ${tokens.global.space.x16} ${tokens.global.space.x16} 0;

  &:hover {
    opacity: 0.8;
  }
`;
const TitleWrapper = styled.div `
  overflow: hidden;
`;
//# sourceMappingURL=index.jsx.map