src/js/app.js

@@ -13,6 +13,7 @@ import 'framework7/css/bundle';
 // Import Icons and App Custom Styles
 import '../css/icons.css';
 import '../css/app.css';
+import '../fonts/outlined.css';
 
 // Import App Component
 import App from '../components/app.vue';

src/js/routes.js

@@ -1,6 +1,7 @@
 
 import HomePage from '../pages/home.vue';
 import AboutPage from '../pages/about.vue';
+import DetectPage from '../pages/detect.vue';
 
 import DynamicRoutePage from '../pages/dynamic-route.vue';
 import RequestAndLoad from '../pages/request-and-load.vue';
@@ -15,6 +16,10 @@ var routes = [
     path: '/about/',
     component: AboutPage,
   },
+  {
+    path: '/detect/',
+    component: DetectPage,
+  },
 
 
   {

src/pages/detect.vue

@@ -0,0 +1,37 @@
+<template>
+    <f7-page name="detect">
+      <!-- Top Navbar -->
+      <f7-navbar large :sliding="false">
+        <f7-nav-left>
+          <f7-link icon-ios="f7:menu" icon-md="material:menu" panel-open="left"></f7-link>
+        </f7-nav-left>
+        <f7-nav-title sliding>Region</f7-nav-title>
+      </f7-navbar>
+      <!-- Toolbar-->
+      <f7-toolbar bottom>
+        <f7-link>Left Link</f7-link>
+        <f7-link>Right Link</f7-link>
+      </f7-toolbar>
+
+      <f7-block>
+        <f7-col>
+            <f7-block>
+                Image goes here
+            </f7-block>
+            <f7-row>
+                <f7-link>
+                    Region menu
+                </f7-link>
+                <f7-link icon="material-icons-outlined" icon-material="visibility" icon-size="48" />
+                <f7-link icon="material-icons-outlined" icon-material="image" icon-size="48" />
+                <f7-link icon="material-icons-outlined" icon-material="videocam" icon-size="48" />
+            </f7-row>
+            <f7-list>
+                <f7-list-item>
+                    Results list
+                </f7-list-item>
+            </f7-list>
+        </f7-col>
+      </f7-block>
+    </f7-page>
+</template>

src/pages/home.vue

@@ -34,6 +34,7 @@
     </div>
     <f7-block-title>Navigation</f7-block-title>
     <f7-list strong inset dividersIos>
+      <f7-list-item link="/detect/" title="Detect"></f7-list-item>
       <f7-list-item link="/about/" title="About"></f7-list-item>
     </f7-list>