I am working on creating a page layout similar to this design: here is what I want to achieve
The goal is to have a simple homepage with a navbar and split screen. The challenge is to prevent the entire page from scrolling normally and enable independent scrolling for two separate sections. On the left side, there is a list of components that can be scrolled. However, on the right side, there is a single component that should scroll internally. Currently, this is how it looks with my code implementation: view current state here
Below are snippets of both my tailwind and react code.
App.tsx
function App() {
return (
<div className='App'>
<Navbar/>
<HomePage/>
</div>
);
}
Home.tsx
function HomePage() {
return (
<div className='flex bg-primary-grey h-screen'>
<div className='w-1/2 h-full max-h-screen p-5 overflow-y-auto scrollbar-thin scrollbar-thumb-primary-blue'>
<ul>
{
items.map((item) => {
return (
<Item item={item}/>
)
})
}
</ul>
</div>
<div className='p-5 w-1/2 max-h-screen'>
<RightComponent/>
</div>
</div>
);
}
RightComponent.tsx
function RightComponent() {
return (
<div className='bg-white rounded-md p-5 shadow overflow-y-auto'>
<div className='rounded-md shadow text-center p-5 mt-10'>
<p className='text-lg font-bold text-left mb-3'>Items</p>
<ul className='flex mt-1'>
{
exampleItems.map((name) => {
return (
<ExampleItem name={name}/>
)
})
}
</ul>
</div>
<div className='rounded-md shadow text-center p-5 mt-10'>
<p className='text-lg font-bold text-left mb-3'>Description</p>
<p className='text-left'>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ultricies odio ex, at malesu...
</p>
</div>
</div>
);
}
Nav.tsx
function Navbar() {
return (
<nav className='bg-primary-grey border-b border-secondary-grey'>
<div className='max-w-7xl mx-auto px-4'>
<div className='flex justify-between'>
<div className='flex'>
<div>
<a href='#' className='flex items-center py-5 px-2'>
<svg xmlns="http://www.w3.org/2000/svg" fill="non...
<path stroke-linecap="round" stroke-linejoin="ro...
</svg>
<span className='font-bold text-3xl text-blue'>App</span>
</a>
</div>
</div>
<div className='flex items-center justify-center'>
<form action="">
<div className='relative'>
<input type="text"
className='bg-white rounded-full py-3 px-4 w-96 bord...
</form>
</div>
<div className='flex items-center space-x-3'>
<a href='#' className='py-2 px-6 border border-solid borde...
<a href='#' className='bg-primary-blue py-2 px-6 bo...
The issue is that the <code>RightComponent extends below the page when more content is added. It should remain stacked in the middle of the right section with scrollable content inside.