Building BookNest's Tab Bar

BookNest now has three tabs, each a view with its own history. src/app.f7 swaps BookNest Setup's single view for the CLI Tabs template's layout: a views tabs wrapper holding a toolbar tabbar tabbar-icons toolbar-bottom with three links in a .toolbar-pane, then three view view-init tab views, #view-home (also view-main tab-active, data-url="/"), #view-catalog and #view-cart. The Cart link:

The Cart tab link in src/app.f7HTMLLive

<a href="#view-cart" class="tab-link">
  <i class="icon f7-icons if-not-md">cart_fill${badge()}</i>
  <i class="icon material-icons if-md">shopping_cart${badge()}</i>
  <span class="tabbar-label">Cart</span>
</a>

Each tab-link shows the view its href names; on iOS a .tab-link-highlight capsule slides behind the active tab. routes.js gains /catalog/, /cart/ and the book detail route (/books/3/ and so on, Defining and Navigating Routes); store.js gains a cart array, a cartCount getter and an addToCart action. The script's badge() helper returns <span class="badge color-red"> with the count, or nothing for an empty cart, and one "Add to cart" re-rendered both icons with a "1". Take $h from the component context ({ $h, $store }) to build that markup: without it the app failed with $h is not defined.

MENU