Feature

Multiple Headers

Note: this feature is available from @mui-treasury/layout v4.5.0 onward.

Some website might have header more than 1, take Auth0 as an example.

image

Now if you scroll down you will see only main header stick to top.

image

This is a perfect case to use multiple headers. However, in this library we define multiple headers as subheaders because main Header should only have one per layout (to follow semantic html markup). Another reason is to minimize the complexity of the existing code. Subheader also work with header magnet feature so you can setup config as usual.

We will use Auth0 as an example. To set up Subheader, the 1st thing is to add configuration

// assume that you already have scheme
scheme.configureHeader(builder => {
  builder.registerConfig('xs', {
    position: 'sticky',
    top: 0,
    initialHeight: 64,
    clipped: true
  })
})

// since subheader can be more than 1,
// need to call .create('id')
scheme.configureSubheader(builder => {
  builder.create('subheader_1')
    .registerConfig('xs', {
      position: 'relative',
      initialHeight: 45,
      clipped: true
    })
})

That’s it for the configuration part, next is render Subheader component

import {
  getHeader,
  getSubheader,
  // ...other
 } from '@mui-treasury/layout';

const Header = getHeader(styled)
const Subheader = getSubheader(styled)

function App() {
  return (
    <Root scheme={scheme}>
      <Header>
        ...header content
      </Header>
      <Subheader subheaderId='subheader_1'> // subheaderId is required
        ...subheader content
      </Subheader>
    </Root>
  )
}

Most of the time, user might want to hide subheader if it is a marketing banner. Layout also provide an api to hide subheader like this.

  • create a state that store hidden flag. when hidden state changed to true, this component will rerender and subheader will be hidden (subheader’s height will be 0, it will not unmount in this case).
// ... scheme configuration

function App() {
  const [hidden, setHidden] = React.useState(false);
  scheme.configureSubheader(builder => {
    builder.hide('subheader_1', hidden);
  });
  return (
    <Root scheme={scheme}>
      <Header>
        ...header content
      </Header>
      <Subheader subheaderId='subheader_1'> // subheaderId is required
        ...subheader content
        <button onClick={() => setHidden(true)}>Hide</button>
      </Subheader>
    </Root>
  )
}

Now if you refresh the page, you will see that subheader appear again. To fix this, we need to store this flag in localstorage (this is out of layout scope, just to give you an idea of how real app works) so that when user refresh the page, react use it as initial value.

// ... scheme configuration

function App() {
  const [hidden, setHidden] = React.useState(localStorage.getItem('subheaderHidden') === 'true');
  scheme.configureSubheader(builder => {
    builder.hide('subheader_1', hidden);
  });
  const onHideSubheader = () => {
    setHidden(true)
    localStorage.setItem('subheaderHidden', 'true')
  }
  return (
    <Root scheme={scheme}>
      <Header>
        ...header content
      </Header>
      <Subheader subheaderId='subheader_1'> // subheaderId is required
        ...subheader content
        <button onClick={onHideSubheader}>Hide</button>
      </Subheader>
    </Root>
  )
}

If you want to see more advance subheader configuration, check this example out!

API