I am working on developing a Login application with a landing page using React Router and Redux. In order to have a Sidebar that is always present in all the components within the application, I have setup the Sidebar component as a route that is constantly visible in the URL. Here's how I have implemented it:
index.js
ReactDOM.render(
<Provider store={store}>
<Router history={history}>
<App/>
</Router>
</Provider>,
document.getElementById('root')
);
App.jsx
export default function App() {
return (
<Fragment>
<Route exact path="/login" component={Login} />
<Route path="/p" component={Sidebar} />
<PrivateRoute exact path="/p" component={Dashboard} />
</Fragment>
);
}
Sidebar.jsx
function Sidebar({ logout }) {
return (
<div className="sidebar">
<Button onClick={logout}>Logout</Button>
</div>
)
}
Sidebar.css
.sidebar {
position: fixed;
height: 100%;
width: 75px;
z-index: 1;
top: 3.4em;
background-color: #222;
overflow-x: hidden;
padding-top: 10px;
}
Dashboard
export default function Dashboard() {
return (
<Fragment>
Hola
</Fragment>
)
}
To ensure the Sidebar sticks to the left of the screen, I have defined styles in Sidebar.css which are functioning correctly. However, the issue arises when adding components like the Dashboard, as it appears at the top of the screen instead of resizing to fit alongside the navbar. See the current layout here: https://i.sstatic.net/kOtYK.png
How can I address this issue and make all subsequent components added to the app adjust their size appropriately for the Navbar to consistently appear on the left side?