Mobile web app layout from scratch

by Gene — posted on 22 July 2018

Though the topic covered on this post might still be actual, this content referrers to an older version of zuix.js library. See zuix.js website for up-to-date documentation.

First we add the header bar, with the logo and a menu button.

<div class="logo">
    <a href="/">app-logo</a>
</div>
<div data-ui-load="@lib/components/hamburger_icon"
     data-ui-options="options.menuButton"
     class="menu-button"></div>

See the actual code in the layout folder of the example below

To take some action when the menu button is clicked we "pass" to the data-ui-options attribute the options.menuButton object which is defined in the index.js like this:

  menuButton: {
    on: {
      'menu:open': function() {
        // TODO: handle event
      },
      'menu:close': function() {
        // TODO: handle event
      }
    }
  }

Next we add a so called DrawerLayout which is basically a panel that contains the app menu and it will show in when the menu button is clicked or with a swipe gesture from left edge to the right.

<div data-ui-load="@lib/controllers/drawer_layout"
  data-ui-options="options.drawerLayout">

  <!-- Add Navigation Drawer menu and content here -->

</div>

Also for the drawer layout component we pass the options.drawerLayout object, so we can open/close the menu button as well, when the drawer is open/closed.

  drawerLayout: {
    on: {
      'drawer:open': function(e) {
        if (menuButton) menuButton.open();
      },
      'drawer:close': function(e) {
        if (menuButton) menuButton.close();
      }
    }
  }

And the following is the live example (swipe from left edge or click the menu button)

Now if we put a very long content in the page we might want the header to fade out/in as the user scrolls up/down. For the purpose we load the header_auto_hide component on the body element.

<body data-ui-load="@lib/controllers/header_auto_hide"
      data-o-target="header-bar">

And this was the last piece of this mobile app layout