<div class="row">
    <div class="col-sm-3">
      <h3>webapp creation</h3>
      <p>Step by step </p>
      <div class="input-group mb-3">
        <input class="form-control me-1" type="search" placeholder="Search" aria-label="Search">
        <button class="btn btn-outline-primary" onclick="app.search(this)">
          <i class="fa-solid fa-magnifying-glass"></i>
        </button>
      </div>  
      <h4 class="mt-4">Articles</h4>
      <p>Most read</p>
      <ul class="nav nav-pills flex-column">
      {{#mostread}}
          <li class="nav-item">
          <a class="nav-link" onclick="app.load('apxmain','{{tplname}}','{{tpldata}}')">{{{title}}}</a>
        </li>
      {{/mostread}}
      </ul>
            <hr class="d-sm-none">
       <p>News</p>
      <ul class="nav nav-pills flex-column">
      {{#news}}
          <li class="nav-item">
          <a class="nav-link" onclick="app.load('apxmain','{{tplname}}','{{tpldata}}')">{{{title}}}</a>
        </li>
      {{/news}}
      </ul>
      <hr class="d-sm-none">
    </div>
    <div class="col-sm-9">
      {{#articles}}
      <h2>{{{heading}}</h2>
      <h5>{{{shortdescdate}}}</h5>
      <div class="fakeimg">Fake Image</div>
      {{{htmlcontent}}}
      {{/articles}}
    </div>
  </div>