How to make website content go after sidebar to the right?-CodePudding

This is an angular 12 project. I have a sidebar which I have defined with fixed position. It is in the app-component, so present on every page. However, when I click on the home button, how do I ensure that the contents in home are always after the sidebar to the right with equal spacing between left that is the sidebar and right of the screen?

Here is my code:

<nav class="navbar navbar-expand d-flex flex-column align-item-start sidebar">
    <a class="navbar-brand mt-2">
      <img  [src]="IconUrl" height="50" width="120">
    </a>

 <ul class="navbar-nav d-flex flex-column mt-2 w-100">
     <li class="nav-item w-100">
         <a class="nav-link text-light pl-4" [routerLink]="['home']" 
          routerLinkActive="active"><i class="fa fa-home me-2"></i>Home</a>
    </li>

 </nav>

styles.scss

.sidebar {
 width: 20%;
 height: 100vh;
 position: fixed;
 background-color: $purple;
 transition: all 0.4s ease;
color: $white;
}

CodePudding user response：

You could set padding or margin for your content element. Assume your side bar has 200px width, you should add margin-left : 210px for your content element.

CodePudding user response：

I think you just need margin-right for your sidebar

so you can add margin-right: 16px to sidebar class or add <nav > to nav tag.

*the margin value depends on you

You can also get better help by adding an image