Making bottom toolbar on mobile but top nav bar on desktop

I have an app I made that has a bottom toolbar for use on mobile devices. I want to detect that the user is on desktop and instead offer them a top navbar with all the view options as text links. What is the F7 way to create a navigation system with the toolbar for mobile and the navbar or appbar on top on desktop?

Secondary question is whether you use navbar or appbar for desktop in this situation.

Say I have the folliwing, what would I do to make a top bar for desktop?

  <div class="toolbar tabbar-labels toolbar-bottom">
    <div class="toolbar-inner">
      <a href="#view-offers" class="tab-link tab-link-active">
        <i class="icon f7-icons ios-only">persons</i>
        <i class="icon f7-icons ios-only icon-ios-fill">persons_fill</i>
        <i class="icon material-icons md-only">people</i>
        <span class="tabbar-label">Coaches</span>
      </a>
      <a href="#view-chats" class="tab-link">
        <i class="icon f7-icons ios-only">messages</i>
        <i class="icon f7-icons ios-only icon-ios-fill">messages_fill</i>
        <i class="icon material-icons md-only" style="width:24px">messages</i>
        <span class="tabbar-label">Chats</span>
      </a>
    </div>
  </div>

Just check app.device.desktop which is true when it is not mobile and change toolbar-bottom to toolbar-top class in this case

Thanks for that.

I think in the case of Desktop I would likely go with a navbar that had the site logo and then text links to the various pages rather than the icon tabs.

In that case on my index.html since its not a componentUrl that uses the template engine I imagine I would test for app.device.desktop and then hide either the navbar or toolbar? I imagine that would create an odd rendering blip where both would be visible for a moment.

How would you do the switch in the index.html file?

Here is the full tabbed view description from my index.html

<div class="views tabs">
  <!-- Tabbar for switching views-tabs -->
  <div class="toolbar tabbar-labels toolbar-bottom">
    <div class="toolbar-inner">
      <a href="#view-offers" class="tab-link tab-link-active">
        <i class="icon f7-icons ios-only">persons</i>
        <i class="icon f7-icons ios-only icon-ios-fill">persons_fill</i>
        <i class="icon material-icons md-only">people</i>
        <span class="tabbar-label">Coaches</span>
      </a>
      <a href="#view-chats" class="tab-link">
        <i class="icon f7-icons ios-only">messages</i>
        <i class="icon f7-icons ios-only icon-ios-fill">messages_fill</i>
        <i class="icon material-icons md-only" style="width:24px">messages</i>
        <span class="tabbar-label">Chats</span>
      </a>
    </div>
  </div>

  <div id="view-home" class="view view-main view-init tab safe-areas">
  </div>

  <!-- Sessions View -->
  <div id="view-sessions" class="view tab safe-areas">
  </div>
  
  <!-- Offers View -->
  <div id="view-offers" class="view tab tab-active safe-areas">
  </div>

  <!-- Chats View -->
  <div id="view-chats" class="view tab safe-areas">
  </div>

  <!-- Post Offers View -->
  <div id="view-postoffers" class="view safe-areas">
  </div>

  <!-- Create Offer View -->
  <div id="view-createoffer" class="view safe-areas">
  </div>      
</div>

Not hide, but remove/add instead.

Shouldn’t be issues if you do it before app init:

if (Framework7.device.desktop) {
  $$('.views > .toolbar').remove();
}

var app = new Framework7(...);
1 Like