jqwidgets-framework/demos/Angular/src/navigationbar/fittocontainer/app.component.html

jQWidgets is an advanced Angular, Vue, Blazor, React, Web Components, jquery, ASP .NET MVC, Custom Elements and HTML5 UI framework.

<div style="width: 370px; height: 450px; border: none;">

  <div id="leftPanel" style="width: 225px; height: 100%; margin-top:10px;">
      <jqxNavigationBar [width]="'100%'" [height]="'100%'" [expandMode]="'singleFitHeight'">
          <div>
            Fantasy
          </div>
          <div>
            <ul>
              <li>J. R. R. Tolkien</li>
              <li>Terry Brooks</li>
              <li>J. K. Rowling</li>
            </ul>
          </div>
          <div>
            Science Fiction
          </div>
          <div>
            <ul>
              <li>H. G. Wells</li>
              <li>Simon R. Green</li>
            </ul>
          </div>
          <div>
            Horror
          </div>
          <div>
            <ul>
              <li>H. P. Lovecraft</li>
              <li>Stephen King</li>
            </ul>
          </div>
      </jqxNavigationBar>
  </div>

  <div style="width: 370px;  height: 100%; margin-top:20px;" id="rightPanel">
    <div id='rightPanelContent' className='jqx-widget-content'>
      <div id="bookShelf" style="margin: 5px; width: 444px; height: 425px;">
      </div>
      <div id="shoppingCart" style="float: left; margin-left: 5px;">
        <img style="float: left;" width="16" height="16" src="./../../../images/shopping_cart.png" />
        <div id='text'>
          Shopping cart is empty.
        </div>
      </div>
    </div>
  </div>

</div>