CODEWITHSUNDEEP
javascriptcssreactjs
Paul Miranda
Paul Miranda

Reputation: 748

Components appearing on top of my Sidebar in React

I want to create a Login application with a landing page using React Router and Redux. I want the landing page to have a Sidebar that is always present in the following components that are inside the application, for this I have assigned the Sidebar component to a route that is always present on the url. I have done something like this:

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;
    /* Fixed Sidebar (stay in place on scroll and position relative to viewport) */
    height: 100%;
    width: 75px;
    /* Set the width of the sidebar */
    z-index: 1;
    /* Stay on top of everything */
    top: 3.4em;
    /* Stay at the top */
    background-color: #222;
    /* Black */
    overflow-x: hidden;
    /* Disable horizontal scroll */
    padding-top: 10px;
}

Dashboard

export default function Dashboard() {
    return (
        <Fragment>
            Hola
        </Fragment>
    )
}

I use Sidebar.css to make the Sidebar to stick to the left of the screen, this is working properly, the problem is the Dashboard component, this is showing on the top of the screen like this: enter image description here

How can I solve this and make all the components that I will add to the app to adjust it size for the navbar to appear always on the left?

Upvotes: 0

Views: 2774

Answers (2)

Chukwuemeka Inya
Chukwuemeka Inya

Reputation: 2671

@Avinash's answer should help you fix your css styling issue.

In addition, I think using layouts and children prop is a better way to go about what you are trying to achieve i.e making Sidebar appear in every component.

You can achieve that by creating a Layout component and importing Sidebar into it. And then every component that will have that sidebar should simply make use of that layout.

Layout.js

import Sidebar from './Sidebar'

export default function Layout(props) {
    const { children } = props
    return (
        <div>
            <Sidebar />
            {children}
        </div>
    )
}

And then your Dashboard.js should look like this:

import Layout from './Layout'

export default function Dashboard() {
    return (
        <Layout>
            <div style={{marginLeft: 75}}>
                Hola
            </div>
        </Layout>
    )
}

This way, you wouldn't have a need for this extra route: <Route path="/p" component={Sidebar} />

Upvotes: 1

Avinash
Avinash

Reputation: 1994

The top property affects the vertical position from the top edge.

here you are adding 3.4em hence theres a gap, set it as 0 if you dont want top spacing

.sidebar {
    ...other stuff
    top: 0;
}

Since this is fixed, it will be on top of other ui, So for Dashboard you need to set margin-left: 75px (or whatever's the width of the sidebar)

    export default function Dashboard() {
        return (
            <div style={{marginLeft: 75}}>
                Hola
            </div>
        )
    }

Upvotes: 1

Related Questions