Create TopBar component

Signed-off-by: Marco Ambrosini <marcoambrosini@pm.me>

src/assets/variables.scss

@@ -62,5 +62,13 @@ $message-max-width: 900px;
 //message utils width
 $message-utils-width: 120px;
 
+<<<<<<< HEAD
 //message form max height
 $message-form-max-height: 150px;
+<<<<<<< HEAD
+=======
+$top-bar-height: 50px;
+>>>>>>> Create TopBar component
+=======
+$top-bar-height: 60px;
+>>>>>>> 4067ea36... fixup! Create TopBar component

src/components/MessagesList/MessagesGroup/MessagesGroup.vue

@@ -137,10 +137,10 @@ export default {
 	flex-direction: column;
 	&__avatar {
 		position: sticky;
-		top: 0;
+		top: 44px;
 		height: 52px;
 		width: 52px;
-		padding: 20px 10px 10px 10px;
+		padding: 0 10px 10px 10px;
 	}
 }
 </style>

src/components/Navigation/AppNavigationSearch/AppNavigationSearch.vue

@@ -90,14 +90,17 @@ export default {
 @import '../../../assets/variables.scss';
 
 .app-navigation-search {
+	height: $top-bar-height !important;
 	position: sticky;
 	top: 0;
 	background-color: var(--color-main-background);
 	border-bottom: 1px solid var(--color-border-dark);
 	z-index: 1;
+	display: flex;
+	justify-content: center;
 	&__input {
+		align-self: center;
 		width: $navigation-width - 20px;
-		margin: 10px;
 	}
 }
 </style>

src/components/TopBar/TopBar.vue

@@ -0,0 +1,70 @@
+<!--
+  - @copyright Copyright (c) 2019 Marco Ambrosini <marcoambrosini@pm.me>
+  -
+  - @author Marco Ambrosini <marcoambrosini@pm.me>
+  -
+  - @license GNU AGPL version 3 or any later version
+  -
+  - This program is free software: you can redistribute it and/or modify
+  - it under the terms of the GNU Affero General Public License as
+  - published by the Free Software Foundation, either version 3 of the
+  - License, or (at your option) any later version.
+  -
+  - This program is distributed in the hope that it will be useful,
+  - but WITHOUT ANY WARRANTY; without even the implied warranty of
+  - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+  - GNU Affero General Public License for more details.
+  -
+  - You should have received a copy of the GNU Affero General Public License
+  - along with this program. If not, see <http://www.gnu.org/licenses/>.
+-->
+
+<template>
+	<div class="top-bar">
+		<button class="top-bar__button primary">
+			Start a call
+		</button>
+		<Actions v-if="showOpenSidebarButton" class="top-bar__button" close-after-click="true">
+			<ActionButton icon="icon-settings" @click="handleClick" />
+		</Actions>
+	</div>
+</template>
+
+<script>
+import { ActionButton } from 'nextcloud-vue/dist/Components/ActionButton'
+
+export default {
+	name: 'TopBar',
+
+	components: {
+		ActionButton
+	},
+
+	methods: {
+		handleClick() {
+
+		}
+	}
+}
+</script>
+
+<style lang="scss" scoped>
+
+@import '../../assets/variables';
+
+.top-bar {
+	height: $top-bar-height;
+	position: absolute;
+	width:100%;
+	top: 0;
+	right: 0;
+	display: flex;
+	z-index: 10;
+	justify-content: flex-end;
+	padding: 0 6px;
+	&__button {
+		background: white;
+	}
+
+}
+</style>

src/views/ChatView.vue

@@ -1,5 +1,6 @@
 <template>
 	<div class="chatview">
+		<TopBar />
 		<MessagesList :token="token" />
 		<NewMessageForm />
 	</div>
@@ -8,12 +9,13 @@
 <script>
 import MessagesList from '../components/MessagesList/MessagesList'
 import NewMessageForm from '../components/NewMessageForm/NewMessageForm'
-
+import TopBar from '../components/TopBar/TopBar'
 export default {
 	name: 'ChatView',
 	components: {
 		MessagesList,
 		NewMessageForm,
+		TopBar
 	},
 	props: {
 		token: {