Fix navbar

Author: nolimits4web

index.html

@@ -17,9 +17,10 @@
     <!-- Left Panel -->
     <f7-panel left reveal layout="dark">
       <f7-view id="left-panel-view" navbar-through :dynamic-navbar="true">
-        <f7-navbar title="Left Panel"></f7-navbar>
+        <f7-navbar v-if="$theme.ios" title="Left Panel" sliding></f7-navbar>
         <f7-pages>
           <f7-page>
+            <f7-navbar v-if="$theme.ios" title="Left Panel" sliding></f7-navbar>
             <f7-block inner>
               <p>Left panel content goes here</p>
             </f7-block>
@@ -41,9 +42,10 @@
     <!-- Right Panel -->
     <f7-panel right cover layout="dark">
       <f7-view id="right-panel-view" navbar-through :dynamic-navbar="true">
-        <f7-navbar title="Right Panel" sliding></f7-navbar>
+        <f7-navbar v-if="$theme.ios" title="Right Panel" sliding></f7-navbar>
         <f7-pages>
           <f7-page>
+            <f7-navbar v-if="$theme.ios" title="Right Panel" sliding></f7-navbar>
             <f7-block>
               <p>Right panel content goes here</p>
             </f7-block>
@@ -65,8 +67,8 @@
     <!-- Main Views -->
     <f7-views>
       <f7-view id="main-view" navbar-through :dynamic-navbar="true" main>
-        <!-- Navbar -->
-        <f7-navbar>
+        <!-- iOS Theme Navbar -->
+        <f7-navbar v-if="$theme.ios">
           <f7-nav-left>
             <f7-link icon="icon-bars" open-panel="left"></f7-link>
           </f7-nav-left>
@@ -78,6 +80,16 @@
         <!-- Pages -->
         <f7-pages>
           <f7-page>
+            <!-- Material Theme Navbar -->
+            <f7-navbar v-if="$theme.material">
+              <f7-nav-left>
+                <f7-link icon="icon-bars" open-panel="left"></f7-link>
+              </f7-nav-left>
+              <f7-nav-center sliding>Framework7</f7-nav-center>
+              <f7-nav-right>
+                <f7-link icon="icon-bars" open-panel="right"></f7-link>
+              </f7-nav-right>
+            </f7-navbar>
             <f7-block-title>Welcome to my App</f7-block-title>
             <f7-block inner>
               <p>Duis sed erat ac eros ultrices pharetra id ut tellus. Praesent rhoncus enim ornare ipsum aliquet ultricies. Pellentesque sodales erat quis elementum sagittis.</p>