AppBar

import React from 'react';

import { AppBar } from 'react-magma-dom';

export function Example() {
  return <AppBar>AppBar content</AppBar>;
}

import React from 'react';

import { AppBar } from 'react-magma-dom';

export function Example() {
  return <AppBar isCompact>AppBar content</AppBar>;
}

import React from 'react';

import {
  AppBar,
  AppBarPosition,
  SkipLink,
  SkipLinkContent,
  Paragraph,
} from 'react-magma-dom';

export function Example() {
  return (
    <div style={{ height: '400px', overflow: 'auto', position: 'relative' }}>
      <AppBar isInverse position={AppBarPosition.sticky}>
        AppBar content
      </AppBar>
      <SkipLink>Skip to the end!</SkipLink>

      <Paragraph>
        Peel the onion peel the onion, so the horse is out of the barn per my
        previous email, nor draw a line in the sand. I just wanted to give you a
        heads-up drink from the firehose, game plan back-end of third quarter
        viral engagement. Eat our own dog food driving the initiative forward
        tribal knowledge increase the pipelines, but run it up the flag pole.
      </Paragraph>
      <SkipLinkContent>
        <Paragraph id="last-one">
          Turn the crank regroup can we align on lunch orders, so regroup, yet
          the last person we talked to said this would be ready, for this vendor
          is incompetent , or pipeline. We've bootstrapped the model zeitgeist,
          so let's schedule a standup during the sprint to review our kpis, so
          not the long pole in my tent we're ahead of the curve on that one, and
          we're ahead of the curve on that one.{' '}
        </Paragraph>
      </SkipLinkContent>
    </div>
  );
}

import React from 'react';

import { AppBar } from 'react-magma-dom';

export function Example() {
  return <AppBar isInverse>AppBar content</AppBar>;
}

import React from 'react';

import { AppBar, AppBarPosition, Heading, Paragraph } from 'react-magma-dom';

export function Example() {
  return (
    <div style={{ height: '300px', overflow: 'auto', position: 'relative' }}>
      <AppBar isInverse position={AppBarPosition.sticky}>
        AppBar content
      </AppBar>
      <Heading level={2}>Lorem Ipsum</Heading>
      <Paragraph>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus mattis,
        libero eu posuere hendrerit, turpis massa placerat ex, sit amet luctus
        enim nunc a arcu. Mauris at lobortis urna. Nam suscipit purus convallis
        mauris iaculis, vitae fermentum ipsum faucibus. Lorem ipsum dolor sit
        amet, consectetur adipiscing elit. Donec congue eu felis a blandit.
      </Paragraph>
      <Paragraph>
        Phasellus sodales ut lorem at semper. Curabitur id hendrerit est, ac
        vestibulum neque. Curabitur ac elementum elit. Quisque eleifend tortor
        vitae ultrices tristique. Integer a elementum magna. Cras eget erat
        feugiat, dignissim ante in, blandit lectus. Donec sodales justo ligula,
        ornare congue felis facilisis mattis.
      </Paragraph>
      <Paragraph>
        Fusce faucibus venenatis arcu, ac sollicitudin nibh iaculis vitae. Nam
        risus nunc, mattis et maximus ac, dignissim at lectus. Sed eleifend
        euismod diam, at ornare lectus vestibulum et. Maecenas at sodales magna.
        Proin mollis elit nec lorem rhoncus, a suscipit metus imperdiet.
        Vestibulum ut magna imperdiet, bibendum felis semper, volutpat est. Duis
        congue porta justo, et interdum ligula vulputate et.
      </Paragraph>
      <Paragraph>
        Fusce vitae convallis ante. Pellentesque et enim ac dolor cursus
        ultricies at eget quam. Vestibulum euismod volutpat nulla eget
        porttitor. Morbi tempor fermentum viverra. Suspendisse potenti.
      </Paragraph>
    </div>
  );
}

import React from 'react';

import {
  AppBar,
  NavTabs,
  NavTab,
  Search,
  Spacer,
  TabsIconPosition,
  magma,
} from 'react-magma-dom';
import { ImageIcon, FavoriteIcon, WorkIcon } from 'react-magma-icons';

export function Example() {
  return (
    <AppBar
      isInverse
      style={{ display: 'flex', justifyContent: 'space-between', gap: '48px' }}
    >
      <div
        style={{
          alignItems: 'center',
          display: 'flex',
          whiteSpace: 'nowrap',
        }}
      >
        <ImageIcon size={24} />
        <Spacer size={magma.spaceScale.spacing03} />
        <strong>LOGO</strong>
      </div>
      <div style={{ flex: '0 0 auto' }}>
        <Search onSearch={() => {}} placeholder="Search for content..." />
      </div>
      <div style={{ flex: '1 1 auto' }}>
        <NavTabs
          aria-label="Navigation"
          backgroundColor="transparent"
          iconPosition={TabsIconPosition.left}
        >
          <NavTab icon={<FavoriteIcon />} isActive to="#">
            Favorites
          </NavTab>
          <NavTab icon={<WorkIcon />} to="#">
            Workspace
          </NavTab>
        </NavTabs>
      </div>
    </AppBar>
  );
}