import Navbar from './Navbar'
import Sidebar from './Sidebar'
import { Outlet } from 'react-router-dom'

export default function Layout() {
	return (
		<>

			<header className="fixed-navbar" data-bs-theme="dark">
				<Navbar />
			</header>
			
			<div className='d-flex vh-100 flex-row bg-light-subtle' data-bs-theme="dark">
				<div className="col-2 fixed-sidebar align-items-stretch flex-shrink-0 bg-dark-subtle">
					<Sidebar />
				</div>
				<div className='flex-column w-100 p-2 overflow-y-scroll sticky-top'><Outlet  /></div>
			</div>
			
    	</>
  	)

	// return (
	// 	<>
	// 		<div className='container-xxl m-0' style={{width: '100%'}}>
	// 			<div className='row p-0 pe-4 vh-100 overflow-y-scroll' data-bs-theme="dark">
	// 				<aside className={sidebarCommonClasses + ' position-fixed' }><Sidebar /></aside>
	// 				{/* <div className={sidebarCommonClasses}></div> */}
	// 				<div className='col-2 m-4'></div>
	// 				{/* <div className='col h-100 overflow-scroll'> */}
	// 				<div className='col-8'>
	// 					<Outlet  />
	// 				</div>
	// 			</div>
	// 		</div>
			
	// 		{/* <div className='row p-0 pe-4' data-bs-theme="dark" style={{height: '100%', overflowX: 'hidden', overflowY: 'scroll'}}> */}
	// 		{/* <div className='row p-0 pe-4 vh-100 overflow-y-scroll' data-bs-theme="dark"> */}
	// 		<div className='row p-0 pe-4 vh-100 overflow-y-scroll' data-bs-theme="dark">
	// 			<aside className={sidebarCommonClasses + ' position-fixed' }><Sidebar /></aside>
	// 			{/* <div className={sidebarCommonClasses}></div> */}
	// 			<div className='col-2 m-4'></div>
    //         	{/* <div className='col h-100 overflow-scroll'> */}
    //         	<div className='col-8'>
	// 				<Outlet  />
	// 			</div>
    //     	</div>
	// 	</>
	// )
}
