import Example from "../../components/example";
import Exports from "../../components/exports";
import Layout from "../../components/layout";

import FloatingMobileHeader from "examples/mobile-header/floating.tsx";
import TextContentMobileHeader from "examples/mobile-header/text-content.tsx";

import { MobileHeader, TYPE } from "baseui/mobile-header";
import * as MobileHeaderExports from "baseui/mobile-header";

import Yard from "../../components/yard/index";
import mobileHeaderYardConfig from "../../components/yard/config/mobile-header";

export default Layout;

# Mobile Header

<Yard placeholderHeight={52} {...mobileHeaderYardConfig} />

The mobile header sits directly below the status bar and above all content on the screen.
It allows users to move through flows and sets the context for content on the screen.

## Fixed vs Floating

There are two types of headers: one that is fixed to the top of the screen with an opaque
background and one that floats over maps and images.

The fixed header consists of three parts: a title, a navigation button, and a set of up to two
additional buttons. It also has two states: an expanded state and a collapsed state.

The floating header does not include a title, and there is no expanded state. The area between
the buttons is accessible to touch feedback, which frees up more space to interact with and view
areas on a map or photo.

## Examples

<Example title="Floating header" path="mobile-header/floating.tsx">
  <FloatingMobileHeader />
</Example>

<Example
  title="Buttons with text content"
  path="mobile-header/text-content.tsx"
>
  <TextContentMobileHeader />
</Example>

The content of the navigation and action buttons can be icons or text.

<Exports
  component={MobileHeaderExports}
  title="MobileHeader exports"
  path="baseui/mobile-header"
/>