mui-layout

MUI React component for layouts

Install

npm install @winkgroup/mui-layout

Usage

import { Layout } from "@winkgroup/mui-layout";

Theme override:

const themeOptions = {
    palette: {
      primary: {
        main: "#9c27b0", // primary color (button and menù items)
      },
      background: {
        default: "#f5f5f5",  // background sidebar and navbar
        neutral: "#e1bee7",  // background username badge
        footer: "lightgray"  // background footer
      },
      text: {
        primary: "#6a1b9a", // primary text color
        secondary: "#8e24aa", // secondary text color (username badge)
        company: "#c62828", // company color (footer)
      },
    },
  };

Sidebar config:

const sidebarConfig = [
    {
      title: 'Homepage',  // label
      path: '/dashboard/app', // path
      act: true,  // link active or disabled
      onClick: () => {}  // onclick function
    }
];

Layout Props:

sidebarConfig={sidebarConfig} // sidebar configuration
activePathname="/dashboard/app" // current path

import logo from './assets/sample-logo.svg';
logo={logo} // company logo in sidebar

import avatar from './assets/sample-avatar.png';
avatar={avatar}  // (optional) user avatar

companyInfo={{ name: "WiNK", link: "https://wink.codes" }}  // footer info

goToHome={() => {}}  // onclick function on logo

onLogoutClick={() => {}} // onclick function for logout

customThemeOptions={themeOptions} // (optional) custom theme object

Wrap the content inside the Layout tag:

<Layout>
    <div>
        {"Content"}
    </ div>
</ Layout>

Tips & Tricks

This module is built with node 18, but storybook seems not be tested with this version (still v16), we need to force node env as you can see under npm run storybook script

Maintainers