import Head from 'next/head';
import { NextPage } from 'next';
import { Navbar } from './Navbar';
import Sidebar from './Sidebar';


interface Props {
    title: string;
    children?: React.ReactNode;
    
}

export const MainLayout:NextPage<Props> = ({ children, title} ) => {

 return (
   <>
        <Head>
            <title>{ title }</title>
            <meta name="viewport" content="width=device-width, initial-scale=1" />
        </Head>
        <nav>
            <Navbar />
        </nav>

        <div className='flex'>
            <Sidebar />

            <main className='flex-1 mx-2'>
                { children }
            </main>
        </div>

   </>
 )
}

