reactjs make content appear next to sidebar

Question

When I call my SideBar component in App.js it appears on top of everything with the main page under it and I understand why it does this but I don't know how to get it so that the sidebar appears to the left of the screen with the main app component it right next to it.

Here is my code:

const AppRoute=({component:Component, layout:Layout,...rest}) => { <Route {...rest} render = {props=> ( <Layout> <Component {...props}/> </Layout> )}/> ) const MainLayout = props =>( <div> <SideBar/> {props.children} <div> class App extends Component { render() { return( <BrowswerRouter> <div> <Switch> <AppRoute path = "/dashboard" layout={MainLayout} component={Dashboard}/> </Switch> </div> </BrowserRouter> ) } }

Any help is greatly appreciated!

Cecil · Accepted Answer · 2018-11-22 18:38:55Z

const MainLayout = props =>( <div style={{display: 'flex'}}> <SideBar style={{flex: '1 auto'}} /> {props.children} <div>

try this maybe

you could also apply float: left on both the sidebar, and the main content elements, giving the sidebar a fixed width

or you could try css grid:

const MainLayout = props =>( <div style={{display: 'grid', gridTemplateColumns: '200px auto'}}> <SideBar /> {props.children} <div>

thanks both methods worked. For the second I just had to adjust the gridTemplateColumns to get rid of overlapping of the components. Appreciate it !

Collectives™ on Stack Overflow

reactjs make content appear next to sidebar

1 Answer 1

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Related