CSS Position In SlideBar - css

Question

I am using Tailwind with reactJS,
I have 2 different jsx file i.e Navpanel.jsx & Home.jsx
When I used fixed Position Home Text is going in navpanel. I also use block instead of flex but Navpanel then cover entire screen.
Please give me solution.
function Navpanel() {
return (
<div className="fixed flex h-full w-1/5 overflow-hidden from-gray-800 to-blue-800 before:h-full before:absolute before:w-screen before:bg-gradient-to-r before:content-[''] before:-z-10"></div>
)
}
function Home() {
return (
<div className='flex relative'>Home</div>
)
}

Answer 1

Keep the nav and the below nav component in App.js file. You can write you app.js file like this
const App = () => {
return (
<>
<div className="max-h-screen w-full">
<Navbar />
<div className="flex items-center w-full" >
<SidePanel />
<HomePage />
</div>
</div>
</>
)
}
export default App;
And inside home page component you can define any thing you want .
You can take refer from below example
<script src="https://cdn.tailwindcss.com"></script>
<div class="max-h-screen h-full w-full">
<div class="flex items-center w-full ">
<div class="w-1/3 h-screen bg-rose-500">Side Panel</div>
<div class="w-2/3 h-screen bg-blue-500">Home Panel</div>
</div>
</div>