viewfinder/packages/base/src/widgets/TopBar.ts

import { css } from '@tesseract-design/css-utils';
import {LayoutArgs, Span} from '../common';

export const Base = () => css.cx(
  css`
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: var(--height-topbar, 4rem);
    z-index: 2;
    & > * {
      display: block;
      width: 100%;
      height: 100%;
      background-color: white;
    }
    & ~ * {
      padding-top: var(--height-topbar, 4rem);;
    }
    ~ main ~ * {
      padding-top: 0;
    }
  `,
  css.media('(min-width: 1080px)')(
    css`
      ~ main ~ * {
        padding-top: var(--height-topbar, 4rem);
      }
    `
  )
);

export const Container = ({
  span,
}: LayoutArgs) => css.cx(
  css`
    padding: 0 1rem;
    box-sizing: border-box;
    margin: 0 auto;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    position: relative;
    z-index: 1;
  `,
  css.if(span === Span.NARROW)(
    css`
      max-width: var(--base-width);
    `
  ),
  css.if(span === Span.NORMAL)(
    css`
      max-width: calc(var(--base-width) * 3);
    `
  ),
  css.if(span === Span.WIDE)(
    css.media('(min-width: 1080px)')(
      css`
        max-width: calc(var(--base-width) * 3);
      `
    )
  ),
);

export const CenterContainer = () => css.cx(
  css`
    flex: auto;
    padding: 0 1rem;
    box-sizing: border-box;
  `,
  css.nest(':first-child')(
    css`
      padding-left: 0;
    `
  )
)

export const ActionContainer = () => css.cx(
  css`
    display: flex;
    align-items: center;
    justify-content: flex-end;
    height: 100%;
    white-space: nowrap;
  `,
  css.media('(min-width: 720px)')(
    css`
      min-width: 8rem;
    `
  )
);

export const LinkContainer = () => css.cx(
  css`
    width: var(--height-topbar, 4rem);
    height: 100%;
    & > * {
      width: 100%;
      height: 100%;
      display: inline-grid;
      place-content: center;
    }
  `
);

export const MenuLinkContainer = () => css.cx(
  css`
    width: var(--height-topbar, 4rem);
    height: 100%;
    & > * {
      width: 100%;
      height: 100%;
      display: inline-grid;
      place-content: center;
    }
  `,
  css.media('(min-width: 1080px)')(
    css`
      position: absolute;
      left: -999999px;
    `
  )
);