Multi-level navigation

htdocs/App.vue

@@ -1,4 +1,5 @@
 <template>
+	<Submenu :value="menu" />
 	<div class="container-fluid" style="padding-top: 5rem;">
 		<Navbar v-model:server="server" :user="user" />
 		<Throbber :client="client" />
@@ -10,6 +11,7 @@
 </template>
 
 <script>
+	import Submenu from './Submenu.vue';
 	import Navbar from './Navbar.vue';
 	import Throbber from './Throbber.vue';
 	import Login from './Login.vue';
@@ -24,7 +26,7 @@
 
 	export default {
 		components: {
-			Navbar, Throbber, Login
+			Submenu, Navbar, Throbber, Login
 		},
 		props: {
 			secret: String
@@ -36,7 +38,16 @@
 				user: null,
 				heartbeat: null,
 				banner: '',
-				authenticated: false
+				authenticated: false,
+				menu: {
+					name: 'Main',
+					items: [
+						{ name: 'Schedule', href: '/' },
+						{ name: 'Lookup', href: '/lookup' },
+						{ name: 'Planner', href: '/planner' },
+						{ name: 'Recall', href: '/recall' }
+					]
+				}
 			};
 		},
 		watch: {