Beginner Tutorial

Blog Layout

If you haven’t go through Dashboard Layout Tutorial, please check it out first.

Quick start

We will not start from scratch in this tutorial but reuse layout from Dashboard Layout Tutorial. If you’ve already deleted the code, below is the final source code. Replace it in App.js and you are ready to go!.

import React from 'react';
import {
  Root,
  Header,
  Sidebar,
  CollapseBtn,
  CollapseIcon,
  SidebarTrigger,
  SidebarTriggerIcon,
  Content,
  Footer,
} from '@mui-treasury/layout';
import {
  NavHeaderMockUp,
  NavContentMockUp,
  ContentMockUp,
  FooterMockUp,
} from '@mui-treasury/mockup/layout';
import { createMuiTheme } from '@material-ui/core/styles';
import { Toolbar } from '@material-ui/core';

const customTheme = createMuiTheme({
  palette: { primary: { main: '#ff5252' } },
});

const config = {
  sidebar: {
    anchor: 'left',
    width: 256,
    variant: 'persistent',
    collapsible: true,
    collapsedWidth: 64,
  },
  header: {
    position: 'relative',
    offsetHeight: 64,
    clipped: false,
    persistentBehavior: 'fit',
  },
  content: {
    persistentBehavior: 'fit',
  },
  footer: {
    persistentBehavior: 'flexible',
  },
};

function App() {
  return (
    <Root theme={customTheme} config={config}>
      {({ sidebarStyles, headerStyles }) => (
        <>
          <Header>
            <Toolbar>
              <SidebarTrigger className={headerStyles.leftTrigger}>
                <SidebarTriggerIcon />
              </SidebarTrigger>
              Header
            </Toolbar>
          </Header>
          <Sidebar>
            <div className={sidebarStyles.container}>
              <NavHeaderMockUp />
              <NavContentMockUp />
            </div>
            <CollapseBtn className={sidebarStyles.collapseBtn}>
              <CollapseIcon />
            </CollapseBtn>
          </Sidebar>
          <Content>
            <ContentMockUp />
          </Content>
          <Footer>
            <FooterMockUp />
          </Footer>
        </>
      )}
    </Root>
  );
}

export default App;

Blog Example

Usually, blog post will have a design like the image below. Header is on top (fixed), Sidebar & Content stay inside a Container Footer can also be inside a Container as well.

image

The first step is to change the config in sidebar to be inset and anchor to the right hand side of the page. insetProps will be given to InsetSidebar component which we will import in the next step.

const config = {
  sidebar: {
    variant: "persistent", // won't affect inset sidebar
    collapsible: true, // won't affect inset sidebar
    collapsedWidth: 64, // won't affect inset sidebar    
    width: 256, // can be percentage
    anchor: "right",    inset: true,    insetProps: {      position: 'sticky',      top: 0,    }  },
  header: { ... },
  content: { ... },
  footer: { ... }
};

Because we want to render Sidebar inside a container, we need to use InsetSidebar instead of Sidebar. So, let’s add Container from material-ui to the page and change Sidebar to InsetSidebar

import {
  ...
  InsetSidebar,  ...
} from "@mui-treasury/layout";
import { Toolbar, Container } from "@material-ui/core";
<Root theme={customTheme} config={config}>
  {({ headerStyles, containerStyles }) => (
    <>
      <Header>...</Header>
      <Container className={containerStyles.root}>        <Content>          <ContentMockUp />        </Content>        <InsetSidebar>          <NavContentMockUp />        </InsetSidebar>      </Container>      <Footer>
        <FooterMockUp />
      </Footer>
    </>
  )}
</Root>

Here is the result.

gif

In some blog or documentation (like reactjs.org), the InsetSidebar is fixed to the page. we can do that by just changing the insetProps config be position: fixed

Awesome!, you can see that the InsetSidebar automatically stick to Header (position: relative). If you don’t like this feature, you can disable it by adding this config.

const config = {
  heightAdjustmentDisabled: true,  header: { ... },
  ...
}

image

But the problem arise at Footer, the fixed InsetSidebar overlap the content of Footer. To fix this, we need to add insetBehavior: fit to footer config.

const config = {
  header: { ... },
  sidebar: { ... },
  footer: {
    insetBehavior: 'fit',  }
}

image

Nice! now the Footer is fit to the space that it should be. Last but not least, I want to change it to a drawer when the viewport is below tablet. I can do that by adding insetHiddenBreakpoint: xs | sm | md to config

const config = {
  insetHiddenBreakpoint: 'sm',  header: { ... },
  ...
}

Now when you reduce your browser down below 960px, the InsetSidebar is changed to drawer. If you set to xs, it will change below 600px viewport.

You can adjust the drawer to show on left or right by this config.

const config = {
  sidebar: {
    anchor: "right",
    width: 256,
    inset: true,
    insetProps: {
      position: 'sticky',
      top: 0,
      drawerAnchor: 'right',    }
  },
  header: { ... },
  content: { ... },
  footer: { ... }
};

Congratulations! you have completed this tutorial.

You can look at clone examples to see advance layout like documentation site, e-commerce site or even chat site.