import { Canvas, Meta, Controls } from "@storybook/addon-docs/blocks";

import * as HeaderBarStories from "./HeaderBar.stories";

<Meta of={HeaderBarStories} />

# HeaderBar

The HeaderBar component is a versatile navigation element that provides a consistent header layout across the application. It divides the header space into three sections (start, middle, and end), allowing for flexible content placement.

## Usage

<Canvas of={HeaderBarStories.Documentation} source={ { code: `
import React from "react";
import { HeaderBar, Button, IconButton, Avatar, Text } from "@webiny/admin-ui";
import { ReactComponent as KeyboardArrowRightIcon } from "@webiny/icons/keyboard_arrow_down.svg";

const HeaderBarExample = () => {
const StartContent = () => (

<Text size={"sm"} className={"text-neutral-dimmed"}>
  {"Headless CMS / Articles / The best article ever"}
</Text>
);

    const MiddleContent = () => <>Content in the middle</>;

    const EndContent = () => (
        <div className={"flex gap-x-sm"}>
            <Button variant={"ghost"} size={"md"} text={"Root tenant"} />
            <div
                className={
                    "flex items-center rounded-md gap-xxs py-xs px-xs bg-neutral-light"
                }
            >
                <Avatar
                    size={"sm"}
                    variant={"strong"}
                    image={<Avatar.Image src={"https://i.pravatar.cc/300"} />}
                    fallback={<Avatar.Fallback delayMs={0}>W</Avatar.Fallback>}
                />
                <IconButton
                    variant={"ghost"}
                    size={"xs"}
                    color={"neutral-strong"}
                    icon={<KeyboardArrowRightIcon />}
                    onClick={() => console.log("clicked")}
                />
            </div>
        </div>
    );

    return (
        <HeaderBar
            start={<StartContent />}
            middle={<MiddleContent />}
            end={<EndContent />}
        />
    );

};

export default HeaderBarExample;

` } }
additionalActions={[
{
title: 'Open in GitHub',
onClick: () => {
window.open(
'https://github.com/webiny/webiny-js/blob/feat/new-admin-ui/packages/admin-ui/src/HeaderBar/HeaderBar.tsx',
'_blank'
);
},
}
]}
/>

<Controls of={HeaderBarStories.Documentation} />

```tsx
import React from "react";
import { HeaderBar, Button, IconButton, Avatar, Text } from "@webiny/admin-ui";
import { ReactComponent as KeyboardArrowRightIcon } from "@webiny/icons/keyboard_arrow_down.svg";

const HeaderBarExample = () => {
  const StartContent = () => (
    <Text size={"sm"} className={"text-neutral-dimmed"}>
      {"Headless CMS / Articles / The best article ever"}
    </Text>
  );

  const MiddleContent = () => <>Content in the middle</>;

  const EndContent = () => (
    <div className={"flex gap-x-sm"}>
      <Button variant={"ghost"} size={"md"} text={"Root tenant"} />
      <div className={"flex items-center rounded-md " + "gap-xxs py-xs px-xs bg-neutral-light"}>
        <Avatar
          size={"sm"}
          variant={"strong"}
          image={<Avatar.Image src={"https://i.pravatar.cc/300"} />}
          fallback={<Avatar.Fallback delayMs={0}>W</Avatar.Fallback>}
        />
        <IconButton
          variant={"ghost"}
          size={"xs"}
          color={"neutral-strong"}
          icon={<KeyboardArrowRightIcon />}
          onClick={() => console.log("clicked")}
        />
      </div>
    </div>
  );

  return <HeaderBar start={<StartContent />} middle={<MiddleContent />} end={<EndContent />} />;
};

export default HeaderBarExample;
```

## Examples

### Start Content Only

<Canvas of={HeaderBarStories.StartContentOnly} source={ { code: `
import React from "react";
import { HeaderBar, Text } from "@webiny/admin-ui";

const StartContentOnlyExample = () => {
const StartContent = () => (

<Text size={"sm"} className={"text-neutral-dimmed"}>
  {"Headless CMS / Articles / The best article ever"}
</Text>
);

    return <HeaderBar start={<StartContent />} />;

};

export default StartContentOnlyExample;
` } } />

### Middle Content Only

<Canvas of={HeaderBarStories.MiddleContentOnly} source={ { code: `
import React from "react";
import { HeaderBar } from "@webiny/admin-ui";

const MiddleContentOnlyExample = () => {
const MiddleContent = () => <>Content in the middle</>;

    return <HeaderBar middle={<MiddleContent />} />;

};

export default MiddleContentOnlyExample;
` } } />

### End Content Only

<Canvas of={HeaderBarStories.EndContentOnly} source={ { code: `
import React from "react";
import { HeaderBar, Button, IconButton, Avatar } from "@webiny/admin-ui";
import { ReactComponent as KeyboardArrowRightIcon } from "@webiny/icons/keyboard_arrow_down.svg";

const EndContentOnlyExample = () => {
const EndContent = () => (

<div className={"flex gap-x-sm"}>
<Button variant={"ghost"} size={"md"} text={"Root tenant"} />
<div
className={
"flex items-center rounded-md gap-xxs
py-xs px-xs bg-neutral-light"
} >
<Avatar
size={"sm"}
variant={"strong"}
image={<Avatar.Image src={"https://i.pravatar.cc/300"} />}
fallback={<Avatar.Fallback delayMs={0}>W</Avatar.Fallback>}
/>
<IconButton
variant={"ghost"}
size={"xs"}
color={"neutral-strong"}
icon={<KeyboardArrowRightIcon />}
onClick={() => console.log("clicked")}
/>
</div>
</div>
);

    return <HeaderBar end={<EndContent />} />;

};

export default EndContentOnlyExample;
` } } />

### Start and End Content Only

<Canvas of={HeaderBarStories.StartEndContentOnly} source={ { code: `
import React from "react";
import { HeaderBar, Button, IconButton, Avatar, Text } from "@webiny/admin-ui";
import { ReactComponent as KeyboardArrowRightIcon } from "@webiny/icons/keyboard_arrow_down.svg";

const StartEndContentOnlyExample = () => {
const StartContent = () => (

<Text size={"sm"} className={"text-neutral-dimmed"}>
  {"Headless CMS / Articles / The best article ever"}
</Text>
);

    const EndContent = () => (
        <div className={"flex gap-x-sm"}>
            <Button variant={"ghost"} size={"md"} text={"Root tenant"} />
            <div
                className={
                    "flex items-center rounded-md gap-xxs py-xs px-xs bg-neutral-light"
                }
            >
                <Avatar
                    size={"sm"}
                    variant={"strong"}
                    image={<Avatar.Image src={"https://i.pravatar.cc/300"} />}
                    fallback={<Avatar.Fallback delayMs={0}>W</Avatar.Fallback>}
                />
                <IconButton
                    variant={"ghost"}
                    size={"xs"}
                    color={"neutral-strong"}
                    icon={<KeyboardArrowRightIcon />}
                    onClick={() => console.log("clicked")}
                />
            </div>
        </div>
    );

    return <HeaderBar start={<StartContent />} end={<EndContent />} />;

};

export default StartEndContentOnlyExample;
` } } />

### Multiple Start Content Items

<Canvas of={HeaderBarStories.MoreStartContent} source={ { code: `
import React from "react";
import { HeaderBar, Button, IconButton, Avatar, Text } from "@webiny/admin-ui";
import { ReactComponent as KeyboardArrowRightIcon } from "@webiny/icons/keyboard_arrow_down.svg";

const MoreStartContentExample = () => {
const StartContent = () => (

<Text size={"sm"} className={"text-neutral-dimmed"}>
  {"Headless CMS / Articles / The best article ever"}
</Text>
);

    const MiddleContent = () => <>Content in the middle</>;

    const EndContent = () => (
        <div className={"flex gap-x-sm"}>
            <Button variant={"ghost"} size={"md"} text={"Root tenant"} />
            <div
                className={
                    "flex items-center rounded-md gap-xxs py-xs px-xs bg-neutral-light"
                }
            >
                <Avatar
                    size={"sm"}
                    variant={"strong"}
                    image={<Avatar.Image src={"https://i.pravatar.cc/300"} />}
                    fallback={<Avatar.Fallback delayMs={0}>W</Avatar.Fallback>}
                />
                <IconButton
                    variant={"ghost"}
                    size={"xs"}
                    color={"neutral-strong"}
                    icon={<KeyboardArrowRightIcon />}
                    onClick={() => console.log("clicked")}
                />
            </div>
        </div>
    );

    return (
        <HeaderBar
            start={
                <>
                    <StartContent />
                    <StartContent />
                    <StartContent />
                </>
            }
            middle={<MiddleContent />}
            end={<EndContent />}
        />
    );

};

export default MoreStartContentExample;
` } } />