Header

Displays a configurable page header.

Example

<div id="header"></div>
<div class="page-content"></div>

/* override common styles */
:root body {
  margin: 0;
  background: #e8e8e9;
}

:global(.page-content) {
  background: #FFF;
  padding: 32px;
  height: 370px;
}

import {render} from 'react-dom';
import React from 'react';

import hubLogo from '@jetbrains/logos/hub/hub.svg';
import {DragIcon, ExpandIcon} from '@jetbrains/ring-ui/components/icon';
import Auth from '@jetbrains/ring-ui/components/auth/auth';
import showAuthDialog from '@jetbrains/ring-ui/components/auth-dialog-service/auth-dialog-service';
import Header, {Logo, Tray, TrayIcon, SmartProfile, SmartServices} from '@jetbrains/ring-ui/components/header/header';
import Link from '@jetbrains/ring-ui/components/link/link';
import Input from '@jetbrains/ring-ui/components/input/input';
import Button from '@jetbrains/ring-ui/components/button/button';
import Dropdown from '@jetbrains/ring-ui/components/dropdown/dropdown';
import PopupMenu from '@jetbrains/ring-ui/components/popup-menu/popup-menu';

import hubConfig from '@ring-ui/docs/components/hub-config';

const container = document.getElementById('header');
const auth = new Auth(hubConfig);
auth.setAuthDialogService(showAuthDialog);
auth.init();

const Comp = props => <a {...props}>This is component</a>;

const renderHeaderDemo = () => (
  <Header>
    <a href="/">
      <Logo glyph={hubLogo} size={Logo.Size.Size48} />
    </a>
    <Link active href="#">Users</Link>
    <Link href="#">Groups</Link>
    <Link href="#">Spaces</Link>
    <Link href="#">Services</Link>
    <Tray>
      <TrayIcon
        primary
        title="Create issue"
        icon={ExpandIcon}
      />
      <Dropdown
        anchor={({active}) => (
          <TrayIcon
            active={active}
            icon={DragIcon}
          />
        )}
      >
        <PopupMenu
          top={-12}
          closeOnSelect
          data={[
            {label: 'Test'},
            {label: 'Test2'}
          ]}
        />
      </Dropdown>
      <SmartServices auth={auth} />
      <SmartProfile
        auth={auth}
        hasUpdates
        LinkComponent={Comp}
      />
    </Tray>
  </Header>
);

render(renderHeaderDemo(), container);

Light header

Example

<div id="header"></div>
<div></div>

/* override common styles */
:root body {
  margin: 0;
  background: #f7f9fa;
}

import {render} from 'react-dom';
import React from 'react';

import hubLogo from '@jetbrains/logos/hub/hub.svg';
import {DragIcon, ExpandIcon} from '@jetbrains/ring-ui/components/icon';
import Auth from '@jetbrains/ring-ui/components/auth/auth';
import Theme from '@jetbrains/ring-ui/components/global/theme';
import Header, {Logo, Tray, TrayIcon, SmartProfile, SmartServices} from '@jetbrains/ring-ui/components/header/header';
import Link from '@jetbrains/ring-ui/components/link/link';
import Dropdown from '@jetbrains/ring-ui/components/dropdown/dropdown';
import PopupMenu from '@jetbrains/ring-ui/components/popup-menu/popup-menu';

import hubConfig from '@ring-ui/docs/components/hub-config';

const container = document.getElementById('header');
const auth = new Auth(hubConfig);
auth.init();

const Comp = props => <a {...props}>This is component</a>;

const renderHeaderDemo = () => (
  <Header theme={Theme.LIGHT}>
    <a href="/">
      <Logo glyph={hubLogo} size={Logo.Size.Size48} />
    </a>
    <Link active href="#">Users</Link>
    <Link href="#">Groups</Link>

    <Tray>
      <Dropdown
        anchor={({active}) => (
          <TrayIcon
            active={active}
            icon={DragIcon}
          />
        )}
      >
      <PopupMenu
        top={-12}
        closeOnSelect
        data={[
          {label: 'Test'},
          {label: 'Test2'}
        ]}
      />
      </Dropdown>
      <SmartServices auth={auth} />
      <SmartProfile
        auth={auth}
        hasUpdates
        LinkComponent={Comp}
      />
    </Tray>
  </Header>
);

render(renderHeaderDemo(), container);

Compact header

Example

<div id="header"></div>
<div class="page-content"></div>

body {
  margin: 0 !important;
  background: #e8e8e9;
}

:global(.page-content) {
  background: #FFF;
  padding: 32px;
  height: 394px;
}

/* override Header */
:global(.header.header) {
  height: 40px;
}

:global(.logo.logo) {
  color: #fff;
  position: relative;
  top: -2px;
}

import {render} from 'react-dom';
import React from 'react';

import hubLogo from '@jetbrains/logos/hub/hub-text.svg';
import {DragIcon, ExpandIcon} from '@jetbrains/ring-ui/components/icon';
import Auth from '@jetbrains/ring-ui/components/auth/auth';
import Header, {Logo, Tray, TrayIcon, SmartProfile, SmartServices} from '@jetbrains/ring-ui/components/header/header';
import Link from '@jetbrains/ring-ui/components/link/link';
import Button from '@jetbrains/ring-ui/components/button/button';
import Dropdown from '@jetbrains/ring-ui/components/dropdown/dropdown';
import PopupMenu from '@jetbrains/ring-ui/components/popup-menu/popup-menu';

import hubConfig from '@ring-ui/docs/components/hub-config';

const container = document.getElementById('header');
const auth = new Auth(hubConfig);
auth.init();

const renderHeaderDemo = () => (
  <Header className="header">
    <a href="/" >
      <Logo className="logo" glyph={hubLogo} size={Logo.Size.Size96} />
    </a>
    <Link active href="#">Users</Link>
    <Link href="#">Groups</Link>
    <Link href="#">Spaces</Link>
    <Link href="#">Services</Link>
    <Tray>
      <TrayIcon
        primary
        title="Create issue"
        icon={ExpandIcon}
      />
      <Dropdown
        anchor={({active}) => (
          <TrayIcon
            active={active}
            icon={DragIcon}
          />
        )}
      >
        <PopupMenu
          top={-12}
          closeOnSelect
          data={[
            {label: 'Test'},
            {label: 'Test2'}
          ]}
        />
      </Dropdown>
      <SmartServices auth={auth} />
      <SmartProfile
        auth={auth}
        hasUpdates
        size={SmartProfile.Size.Size24}
      />
    </Tray>
  </Header>
);

render(renderHeaderDemo(), container);