title: Components appearing on top of my Sidebar in React
body: <p>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:</p>
  <p><strong>index.js</strong></p>
  <pre><code>ReactDOM.render(
    &lt;Provider store={store}&gt;
      &lt;Router history={history}&gt;
            &lt;App/&gt;
        &lt;/Router&gt;
    &lt;/Provider&gt;,
    document.getElementById('root')
  );
  </code></pre>
  <p><strong>App.jsx</strong></p>
  <pre><code>export default function App() {
      return (
          &lt;Fragment&gt;
              &lt;Route exact path=&quot;/login&quot; component={Login} /&gt;
              &lt;Route path=&quot;/p&quot; component={Sidebar} /&gt;
              &lt;PrivateRoute exact path=&quot;/p&quot; component={Dashboard} /&gt;
          &lt;/Fragment&gt;
      );
  }
  </code></pre>
  <p><strong>Sidebar.jsx</strong></p>
  <pre><code>function Sidebar({ logout }) {
      return (
          &lt;div className=&quot;sidebar&quot;&gt;
              &lt;Button onClick={logout}&gt;Logout&lt;/Button&gt;
          &lt;/div&gt;
      )
  }
  </code></pre>
  <p><strong>Sidebar.css</strong></p>
  <pre><code>.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;
  }
  </code></pre>
  <p><strong>Dashboard</strong></p>
  <pre><code>export default function Dashboard() {
      return (
          &lt;Fragment&gt;
              Hola
          &lt;/Fragment&gt;
      )
  }
  </code></pre>
  <p>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:
  <a href="https://i.stack.imgur.com/kOtYK.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/kOtYK.png" alt="enter image description here" /></a></p>
  <p>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?</p>