siriwatknp / mui-layout

Jump start Material-UI project with out tears

This project is moved to mui-treasury

Material-UI Layout

A set of components that allows you to build dynamic and responsive layout based on Material-UI

Prerequisites

This project based on React Material-UI, so you have to install @material-ui/core @material-ui/styles

Installation

// yarn
yarn add mui-layout @material-ui/core @material-ui/styles @material-ui/icons

// npm
npm install mui-layout @material-ui/core @material-ui/styles @material-ui/icons

Demo

see demo here Storybook Demo

Usage

// this example use icon from material-ui/icons, you can use your own!
import React from 'react';
import { ThemeProvider } from '@material-ui/styles';
import { createMuiTheme } from '@material-ui/core/styles';
import ChevronLeft from '@material-ui/icons/ChevronLeft';
import ChevronRight from '@material-ui/icons/ChevronRight';
import MenuRounded from '@material-ui/icons/MenuRounded';

import {
 Root,
 Header,
 Nav,
 Content,
 Footer,
 presets,
} from 'mui-layout';

const baseTheme = createMuiTheme(); // or use your own theme;
const config = presets.createStandardLayout();

const App = () => (
  <ThemeProvider theme={baseTheme}>
   <Root config={config}>
     <Header
       renderMenuIcon={open => (open ? <ChevronLeft /> : <MenuRounded />)}
     >
       header
     </Header>
     <Nav
       renderIcon={collapsed =>
         collapsed ? <ChevronRight /> : <ChevronLeft />
       }
     >
       nav
     </Nav>
     <Content>
       content
     </Content>
     <Footer>
       footer
     </Footer>
   </Root>
  </ThemeProvider>
)

export default App;

Built-in Features

• Collapsible Nav

  

• Header Magnet

  

• Auto Collapsed

  

• Responsive Config

  const extendedConfigs2 = {
    ...defaultConfig,
  
    // navVariant is 'temporary' in mobile and tablet, 'permanent' in desktop and greater
    navVariant: {
      xs: 'temporary',
      md: 'permanent',
    },
  

Custom Styles

Mostly, you will custom Header & Nav. This is an example for Header

Explanation is in storybook

import { makeStyles } from '@material-ui/styles';

const useHeaderStyles = makeStyles(({ palette, spacing }) => ({
  header: {
    backgroundColor: palette.secondary.main,
  },
  menuBtn: {
    padding: spacing(2.5),
    borderRadius: 0,
  },
  icon: {
    color: palette.common.white,
  },
  toolbar: {
    padding: spacing(0, 1),
  },
}));

function App() {
  const {
    icon: iconCss,
    toolbar: toolbarCss,
    header: headerCss,
    menuBtn: menuBtnCss,
  } = useHeaderStyles();
  return (
    <Header
      classes={{ root: headerCss }}
      renderMenuIcon={open =>
        open ? (
          <ChevronLeft className={iconCss} />
        ) : (
          <MenuRounded classes={{ root: iconCss }} />
        )
      }
      menuButtonProps={{ className: menuBtnCss }}
      toolbarProps={{ className: toolbarCss }}
    />
  );
}

Presets

• Standard

  

• Fixed

  

• Content Based

  

• Cozy

  

How it works

• They are basically material-ui components that are combined to make things easier. AppBar, Toolbar, Drawer

• use @material-ui/styles to style components

• use react-hooks

Contributing

Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.

Please make sure to update tests as appropriate.

License

MIT

mui-layout's Issues

How to detect when sidenav is open or not?

I am looking to see if there is a way to see if the sidenav bar is open or closed. I trying using useConfig() but had not luck. Please let me know!

Problem of space on main page by Navigation Drawer

I have just used the standard Header and Nav components given as follows,

<Header
  renderMenuIcon={opened =>
  opened ? <Icon>chevron_left</Icon> : <Icon>menu_rounded</Icon>
  }
>
  {({ screen, collapsed }) => (
    <TopNavbar screen={screen} collapsed={collapsed} />
  )}
</Header>
<div style={{ border: '1px solid red' }}>
  <Nav
   renderIcon={collapsed =>
     collapsed ? <Icon>chevron_right</Icon> : <Icon>chevron_left</Icon>
   }
   header={({ collapsed }) => (
     <SideNavDrawer collapsed={collapsed} header />
   )}
  />
</div>

This is however causing a block of blank space between the header and the next component following the Nav.

Also the bottom part of the Logo is cutting off.

Am I doing something wrong?

Thanks,
Raghu

Nav gets temporarily clipped using preset standard

In 1.2.8, go here: https://siriwatknp.github.io/mui-layout/?path=/story/presets--standard

Refresh the page and the nav will be clipped. Change routes and go back to that page and all is well. An uninitialized variable perhaps?

Clipped header overlays content of the nav

I'am not quite sure if this behaviour is a bug or works as designed:
Using the clipped setting in my config for a full width header.

On navVariant persistent and permanent the header overlays the content of the navigation component. I was expecting, that the content of the navigation will start below the clipped header.

Thanks and best regards!

Nav component should accept an extra prop to set the background color of the renderIcon area

In the following example, the whole navbar had the same background color.

I'm unable to reproduce it because there isn't a prop that allows changing the background of the renderIcon area for the Nav component. I can change the color of the icon but not the color of the button that wraps it.

I'm getting the following result:

It would be great if you can add this prop to set the background, the border-color and the background-color on hover for the Button that uses classes.collapseButton in src/components/Nav.js

Auto disable height adjustment when nav's variant is "temporary"

Config to get Nav Collapsed on start ?

I am looking to have the nav initially collapsed, what do I set in the config to allow this to happen? Right now when I hit the page it starts out as open and I would like it to start closed.

Add types definition

Add types definitions so we can use it in a typescript project

SSR support

It would be great to try this super useful package with next.js to support SSR.
I did it and I fixed this bug:
ReferenceError: the window is not defined in ... \ mui-layout \ dist \ hooks \ useEventListener.js.11.85
Simply adding global.window

After this fix, it worked perfectly but when refreshing the page in the browser, it first showed the nav (drawer) collapsed and then, once it was completely downloaded, it showed it open.
I don't know if this weird behavior could be easily fixed up to support SSR.

Thank you @siriwatknp for your time and for working in this interesting package.

TypeError: Cannot read property 'breakpoints' of null

First: Create initiative

But I have problems getting it to work. This is what I have done:

create-react-app tzt
cd tzt
npm install --save mui-layout @material-ui/core @material-ui/styles @material-ui/icons

I edited my App.js file to this:

import React, { Component } from 'react';
// this example use icon from material-ui/icons, you can use your own!
import ChevronLeft from '@material-ui/icons/ChevronLeft';
import ChevronRight from '@material-ui/icons/ChevronRight';
import MenuRounded from '@material-ui/icons/MenuRounded';

import {
 Root,
 Header,
 Nav,
 Content,
 Footer,
 presets,
} from 'mui-layout';


class App extends Component {
  render() {

    const config = presets.createStandardLayout();

    return (
      <Root config={config}>
        <Header
          renderMenuIcon={open => (open ? <ChevronLeft /> : <MenuRounded />)}
        >
          header
        </Header>
        <Nav
          renderIcon={collapsed =>
            collapsed ? <ChevronRight /> : <ChevronLeft />
          }
        >
          nav
        </Nav>
        <Content>
          content
        </Content>
        <Footer>
          footer
        </Footer>
      </Root>
    );
  }
}

export default App;

Then I started my project npm start.

I get the following error:

TypeError: Cannot read property 'breakpoints' of null
useWidth
node_modules/mui-layout/dist/hooks/useWidth.js:118
  115 | 
  116 | function useWidth() {
  117 |   var theme = (0, _styles.useTheme)();
> 118 |   var breakpoints = theme.breakpoints;
  119 | 
  120 |   var _useState = (0, _react.useState)(getScreen(breakpoints)),
  121 |       _useState2 = _slicedToArray(_useState, 2),

Compatibility for material 4.3.0

just updated to material-ui 4.3.0 and I'm getting the following issue, maybe was changed something in the useMediaQuery API

Material-UI error on Nav Drawer classes customization

Hello,

I am customizing the Drawer of the Nav component. I'am doing simply :

import { Nav } from 'mui-layout';

<Nav
    classes={{
        container: navClasses.container,
        paper: navClasses.paper,
        paperAnchorDockedLeft: navClasses.paperAnchorDockedLeft,
    }}
>

This is working fine since Nav is doing :

<Drawer
        {...props}
        className={`${className} ${classes.root}`}
        open={opened}
        onClose={() => setOpened(false)}
        variant={navVariant}
        anchor={navAnchor}
>

My only problem is : Material-UI is printing me some errors in console :

Material-UI: the key `container` provided to the classes prop is not implemented in ForwardRef(Drawer).
You can only override one of the following: root,docked,paper,paperAnchorLeft,paperAnchorRight,paperAnchorTop,paperAnchorBottom,paperAnchorDockedLeft,paperAnchorDockedTop,paperAnchorDockedRight,paperAnchorDockedBottom,modal

Or

Material-UI: the key `container` provided to the classes prop is not implemented in ForwardRef(Drawer).
You can only override one of the following: root,docked,paper,paperAnchorLeft,paperAnchorRight,paperAnchorTop,paperAnchorBottom,paperAnchorDockedLeft,paperAnchorDockedTop,paperAnchorDockedRight,paperAnchorDockedBottom,modal. 

Am I doing something wrong ?

Nav breaks when using provided "dark" style from the Storybook

First, thank you for this package. It is useful to have these standard elements pulled out.

The issue I'm seeing is with the customization of the Nav. The "paper" class provided through drawerStyles are breaking in the hierarchy somewhere. This code copied from the "dark theme" in Storybook.

The error I'm getting is below.

Material-UI: the key `paper` provided to the classes prop is not implemented in undefined.
You can only override one of the following: root,heightAdjustment,container,content,toggleButton,closeButton.

height adjustment should not work when Header position is "fixed"

Nav collapsed at the beginning of very large screen

Any plans to add typescript support?

As the title says. I am loving your package, as it makes the ui layout design a breeze, letting me focus on more pressing backend content.

However, the only thing I feel is missing is type support, since we use Typescript for our development
Are there any plans to support types in the future?

If the screen width is greater or equal than 1920 the screen prop is 'xs' when should be 'xl'

Hi, first of all, congrats for the excellent job, you are killing it.

I noticed an issue when the screen width is greater or equal than 1920, at that point the screen prop is set as 'xs' when should be 'xl'.

I take a look at the code and I think the issue was caused by the function getScreen in src/hooks/useWidth.js

You are initializing screen at 'xs' and only changing that value on:

if (width < breakpoints.values[key]) {
  screen = key;
  return true;
} 

The maximum value that breakpoints.values[key] takes is 1920 so if width is greater or equal than that, the screen variable stays as 'xs'. I could be easily fixed adding an:

else if (width >= 1920) { 
  screen = 'xl'; 
  return true;
}

Of course, should exist a more elegant solution, I threw the first that came to my mind.

It would be great if you can fix it, but if you're too busy now, tell me and I'll make a PR 👍