He tenido problemas para posicionar de forma correcta el header, sidebar y el main de mi página. Ya logré que el header se mantenga en su lugar, pero he tenido problemas para que el main se mantenga a la derecha del sidebar de forma correcta. He utilizado flex para que el main se acomode a la derecha pero solo le permite aparecer en el espacio que genera la palabra "Main". Las tecnologías que estoy utilizando son React y Tailwind CSS.
Este es mi App.jsx
const App = () => {
return (
<div className="flex flex-col">
<Header />
<div className="flex">
<Sidebar />
<BrowserRouter>
<Layout>
<Routes>
<Route path="/" element={<Dummy />} />
<Route path="/rey" element={<Dummy2 />} />
</Routes>
</Layout>
</BrowserRouter>
</div>
</div>
);}
Header.jsx
export const Header = () => {
return (
<div className="bg-menu">
<div className="w-full">
<div className="flex flex-row items-center h-12">
{/* Left */}
<div className="flex items-center w-1/6 bg-menu justify-start pl-5">
<Logo />
</div>
{/* Center */}
<div className="flex items-center w-4/6 bg-menu justify-start">
<div className="w-3/6">
<SearchHeader />
</div>
<div className="w-3/6"></div>
</div>
{/* Right */}
<div className="flex items-center w-1/6 bg-menu justify-end">
<HeaderDropdown />
</div>
</div>
</div>
</div>
)
}
Sidebar.jsx
export default function Sidebar() {
return (
<div className="top-0 left-0 h-screen w-40 bg-menu shadow-lg">
<div className="bg-white h-28 m3" />
{SidebarData.map((item, index) => {
return (
<SideBarButton
icon={item.icon}
text={item.title}
selected={index == 0 ? true : false}
key={index}
/>
)
})}
</div>
);
}
const SideBarButton = ({ icon, text, selected }) => (
<button className={selected ? 'button-selected' : 'button'}>
<div className="m-1">{selected ? icon.selected : icon.unselected}</div>
<div className="">{text}</div>
</button>
);
Dummy.jsx (Igual a Dummy2)
export default function dummy() {
return (
<div className="bg-gray-200 shadow-innermain w-400">
<h1 className="bg-red-90 text-4xl text-center">Main</h1>
</div>
)
}
Ayuda :(
main
tiene la clasew-400
? ¿Para qué sirve esa clase?