Vertical state overlays px-branding-bar

[akshayeshenoi]

Expected behavior and actual behavior:

Branding bar shouldn't be overlaid.

Steps to reproduce the problem:

    <!-- Branding -->
    <px-branding-bar></px-branding-bar>
    <!-- Nav bar -->
    <px-app-nav
      slot="app-nav"
      selected-route="{{selected}}"
      items='[[navItems]]'
      vertical>
    </px-app-nav>

Screenshots (optional, but very helpful):

Fix

Add top: 2rem css to px-app-nav.

[randyaskin]

We can't guarantee that all applications will use the px-branding-bar, or they may want to bump the branding bar to the right instead of bumping the app-nav down (which is a valid design alternative). Also note that the branding bar does not appear on small devices by design. You should handle this in your application, e.g. https://github.com/PredixDev/px-sample-app/blob/master/sass/px-sample-app.scss#L107-L112