@maruware/material-ui-basic-layout

Material UI Basic Layout

Simple Basic Layout using Material UI

Install

yarn add @maruware/material-ui-basic-layout

Usage

import React, { useState } from 'react'
import { BasicLayout, DrawerMenu } from '@maruware/material-ui-basic-layout'

import DashboardIcon from '@material-ui/icons/Dashboard'
import PostIcon from '@material-ui/icons/PhotoCamera'
import { useRouter } from 'next/router'

export interface DefaultLayoutProps {
  title: string
}

export const DefaultLayout: React.FC<DefaultLayoutProps> = ({
  title,
  children,
}) => {
  const [menues] = useState<DrawerMenu[]>([
    { name: 'Dashboard', path: '/', icon: DashboardIcon },
    { name: 'Posts', path: '/posts', icon: PostIcon },
  ])

  const router = useRouter()
  const handleChangePath = (path: string) => router.push(path)
  const handleCheckActive = (path: string) => router.pathname === path
  const handleLogout = () => console.log('logout')
  return (
    <BasicLayout
      title={title}
      menues={menues}
      onChangePath={handleChangePath}
      onCheckActive={handleCheckActive}
      onLogout={handleLogout}
    >
      {children}
    </BasicLayout>
  )
}

import React from 'react'
import { Dashboard } from './Dashboard'
import { DefaultLayout } from './DefaultLayout'

export default function DashboardPage() {
  return (
    <DefaultLayout title="Dashboard">
      <Dashboard />
    </DefaultLayout>
  )
}

If you use react-router, replace onChangePath and onCheckActive.