Committed Layout

Committed Layout library

For documentation see https://committed.software/layout

This is a simple layout for standard looking material based apps, based on Mui Layout but using @committed/components as its base.

🔗 Live Demo

Here's a live demo using layout and the storybook

🚀 Quickstart

For use with @committed/components,

yarn add @committed/layout

add any missing peer dependencies

yarn add @committed/components @material-ui/core @material-ui/icons react react-dom

Usage

import React from 'react'
import ReactDOM from 'react-dom'
import { ThemeProvider } from '@committed/components'
import {
  Root,
  Header,
  Nav,
  NavListItem,
  Content,
  Footer,
  LayoutConfig,
} from '@committed/layout'

const config: Partial<LayoutConfig> = {
  // Only permanently show nav drawer at higher resolutions
  navVariant: {
    sm: 'temporary',
    lg: 'permanent',
  },
}

const App = () => (
  <ThemeProvider theme={theme}>
    <Root config={config}>
      <Header>
        <Typography variant="h5">Application Name</Typography>
      </Header>
      <Nav header={(ctx) => null}>
        <List>
          <NavListItem text="Menu Item 1" icon={<AccountCircle />} />
        </List>
      </Nav>
      <Content>Content</Content>
      <Footer>Footer</Footer>
    </Root>
  </ThemeProvider>
)

ReactDOM.render(<App />, document.getElementById('root'))

If your own components need to respond to the layout use the useLayout hook to obtain the current layout details.

📱 Responsive

The layout adjusts for small screen sizes.

📝 Config

For each config parameter a single value or an object with breakpoint keys ('xs' | 'sm' | 'md' | 'lg' | 'xl') can be supplied, e.g.

const config = {
  clipped: false,
  collapsible: {
    // fully specified
    xs: true,
    sm: false,
    md: true,
    lg: false,
    xl: true,
  }
  navWidth: {
    // partial specified, other use closest
    sm: 200, // smDown and in sm
    md: 256, // mdUp
  },
}

📝 Config

For each config parameter a single value or an object with breakpoint keys ('xs' | 'sm' | 'md' | 'lg' | 'xl') can be supplied, e.g.

const config = {
  clipped: false,
  collapsible: {
    // fully specified
    xs: true,
    sm: false,
    md: true,
    lg: false,
    xl: true,
  }
  navWidth: {
    // partial specified, other use closest
    sm: 200, // smDown and in sm
    md: 256, // mdUp
  },
}

Config parameter	Type	Description	Default Value
collapsible	boolean | ScreenProps<boolean>	Can the navigation be collapsed to a smaller form	true
collapsedWidth	number | ScreenProps<number>	Width of the collapsed navigation	64
navAnchor	Orientation | ScreenProps<Orientation>	Which side of the screen to show the nav panel	left
navVariant	Variant | ScreenProps<Variant>	Permanent: stays all the time. Persistent: remains open but can be hidden with button. Temporary: hides on click away (and selection).	permanent
navWidth	number | ScreenProps<number>	Width of the navigation drawer	256
headerPosition	Position | ScreenProps<Position>	Position applied to the AppBar header. one of 'static', 'relative', 'sticky', 'fixed', 'absolute' See https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Positioning	relative
headerResponse	HeaderResponse | ScreenProps<HeaderResponse>	How should the Header adjust its size and position when navigation expanded . One of 'clipped', 'static', 'squeezed', 'pushed'.	'squeezed'
contentResponse	Response | ScreenProps<Response>	How should the Content adjust its size and position when navigation expanded. One of 'static', 'squeezed', 'pushed'.	'squeezed'
footerResponse	Response | ScreenProps<Response>	How should the Footer adjust its size and position when navigation expanded. One of 'static', 'squeezed', 'pushed'.	'squeezed'

Response

How the elements respond to the navigation position changes is configured using the xxxResponse parameters. The values are:

• static: does not move for the navigation drawer, which sits on top
• squeezed: size is reduced to allow for the navigation draw
• pushed: the size remains the same but is moved over to allow for the drawer, only effective for navAnchor left
• clipped: (Header only) moves the header over the top of the navigation drawer

Props

For component props, see the storybook

💻 Development

On first use run yarn install in both the root folder and the example folder.

The main build is performed using:

yarn build

For development use

yarn start

the same command can be run in the example folder to run a usage example.

🤖 CI

Pull requests go through CI checks using GitHub actions.

👏 Credit

It is based on Mui Layout from https://mui-treasury.com/ for further reference see https://github.com/siriwatknp/mui-layout.

©️ License

MIT - © Committed Software 2019 https://committed.io