how to widen the sidebar in css for the elements-CodePudding

I would like to widen my sidebar because my items are not positioned correctly.

Here is an image, below: enter image description here

HTML

<ng-icon-sidebar>
   <ul>
      <li>
         <a href="#">
            <span class="icon-container">
            <i class="material-icons">account_balance_wallet</i>
            </span>
            <div class="linkMenu">Sélection Portefeuille</div>
         </a>
      </li>
      <li>
         <a href="#">
            <span class="icon-container">
            <i class="material-icons">trending_up</i>
            </span>
            <div class="linkMenu">Corporate Actions</div>
         </a>
      </li>
      <li>
         <a href="#">
            <span class="icon-container">
            <i class="material-icons">account_balance</i>
            </span>
            <div class="linkMenu">Indices Boursiers</div>
         </a>
      </li>
      <li>
         <a href="#">
            <span class="icon-container">
            <i class="material-icons">currency_exchange</i>
            </span>
            <div class="linkMenu">Devises</div>
         </a>
      </li>
      <li>
         <a href="#">
            <span class="icon-container">
            <i class="material-icons">input</i>
            </span>
            <div class="linkMenu">Tableau de valeurs</div>
         </a>
      </li>
   </ul>
</ng-icon-sidebar>

I think that the problem is in the CSS.

.ng-icon-sidebar {
  background-color: #01b0f1;
  margin-top: 98px;
}

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

li {
  width: 256px;
}

.ng-icon-sidebar .icon-container {
  align-items: center;
  display: flex;
  height: 48px;
  justify-content: center;
  width: 48px;
  color: #fff;
}

.ng-icon-sidebar .linkMenu {
  color: #fff;
  font-size: 26px;
  padding-left: 25px;
}

a {
  align-items: center;
  display: flex;
  text-decoration: none;
}

My code is here Stackblitz. The access is test1.

For information:

The menu HTML code is on Views > Home > home.component.html

The CSS is in the file styles.css.

Thank you in advance for your help and your time.

CodePudding user response：

pls checkout sidebar/sidebar.component.ts. There you can see that the width of the sidebar is defined as 256px when opened.

lines 34-37:

 .ng-icon-sidebar--opened {
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.1);
    width: 256px;
  }