fill sidebar and add button for new ticket

src/App.vue

@@ -1,12 +1,18 @@
 <template>
 	<div id="content" class="app-upschooling">
-		<AppNavigation />
+		<AppNavigation>
+			<AppNavigationCaption title="Meine Support-Tickets" />
+				<template>
+					<AppNavigationItem v-for="item in tickets" :key="item.ticketId" v-bind:title="item.title" @click="openTicket(item.ticketId)" /> 
+					<!-- TODO: show only proper tickets -->
+				</template> 
+		</AppNavigation>
 		<AppContent>
 			<div v-if="currentTicket">
 				<Ticket :ticket="currentTicket" @save-ticket="saveTicket" @show-ticket-list="deselectTicket" />
 			</div>
 			<div v-else>
-				<TicketList :tickets="tickets" @open-ticket="openTicket" />
+				<TicketList :tickets="tickets" @open-ticket="openTicket" @new-ticket="newTicket" />
 			</div>
 		</AppContent>
 	</div>
@@ -14,7 +20,9 @@
 
 <script>
 import AppContent from '@nextcloud/vue/dist/Components/AppContent'
-import AppNavigation from '@nextcloud/vue/dist/Components/AppNavigation'
+import { AppNavigation } from '@nextcloud/vue'
+import AppNavigationItem from '@nextcloud/vue/dist/Components/AppNavigationItem'
+import AppNavigationCaption from '@nextcloud/vue/dist/Components/AppNavigationCaption'
 import TicketList from './components/TicketList'
 import Ticket from './Ticket'
 import '@nextcloud/dialogs/styles/toast.scss'
@@ -27,6 +35,8 @@ export default {
 		TicketList,
 		AppContent,
 		AppNavigation,
+		AppNavigationItem,
+		AppNavigationCaption
 	},
 
 	data() {
@@ -99,6 +109,9 @@ export default {
 		deselectTicket() {
 			this.currentTicket = null
 		},
+		newTicket(){
+			//TODO generate new empty ticket
+		}
 	},
 }
 </script>

src/components/TicketList.vue

@@ -1,4 +1,10 @@
 <template>
+<div class="ticketlist">
+	<div class="header-bar">
+				<button @click="newTicket">
+					{{ t('upschooling', 'Neues Ticket') }}
+				</button>
+	</div>
 	<table
 		id="ticketlist"
 		class="list-container has-controls">
@@ -51,6 +57,7 @@
 			</tr>
 		</tbody>
 	</table>
+</div>
 </template>
 
 <script>
@@ -72,14 +79,14 @@ export default {
 		openTicket(ticketId) {
 			this.$emit('open-ticket', ticketId)
 		},
+		newTicket() {
+			this.$emit('new-ticket')
+		}
 	},
 }
 </script>
 
 <style scoped>
-	#ticketlist {
-		margin-top: 4rem;
-	}
 
 	table {
 		width: 100%;
@@ -100,4 +107,9 @@ export default {
 	a:hover .ticket-number, a:focus .ticket-number, a:active .ticket-number {
 		opacity: 1;
 	}
+	.header-bar {
+	display: flex;
+	width: 100%;
+	flex-direction: row-reverse;
+}
 </style>