mobile toolbar implementation

resources/js/views/MobileNavigationToolbar.vue

@@ -0,0 +1,30 @@
+<template>
+	<div class="flex text-center py-5 px-4 w-full justify-between items-center z-20 lg:hidden block">
+
+		<!-- Go back-->
+		<div @click="$router.back()" class="go-back-button flex text-left items-center">
+			<chevron-left-icon size="17" class="transform align-middle mr-2 -ml-1" />
+
+			<!--Folder Title-->
+			<div class="text-sm align-middle font-bold overflow-hidden overflow-ellipsis inline-block whitespace-nowrap transition-all duration-200" style="max-width: 200px;">
+				{{ $t('Profile') }}
+			</div>
+		</div>
+
+		<!--More Actions-->
+		<div @click="$showMobileMenu('user-navigation')" class="pr-2">
+			<menu-icon size="17" />
+		</div>
+	</div>
+</template>
+<script>
+    import {MenuIcon, ChevronLeftIcon } from 'vue-feather-icons'
+
+	export default {
+		name: 'MobileNavigationToolbar',
+		components: {
+			ChevronLeftIcon,
+			MenuIcon,
+		}
+	}
+</script>