Fix UI and chat toggle issue

frappe/public/js/frappe/chat.js

@@ -1761,6 +1761,8 @@ class extends Component {
 
 		if ( props.target )
 			$(props.target).click(() => this.toggle())
+
+		frappe.chat.widget = this;
 	}
 
 	toggle  (active) {
@@ -2655,7 +2657,7 @@ frappe.chat.render = (render = true, force = false) =>
 	// Avoid re-renders. Once is enough.
 	if ( !frappe.chatter || force ) {
 		frappe.chatter = new frappe.Chat({
-			target: desk ? '.navbar .frappe-chat-toggle' : null
+			target: desk ? '.frappe-chat-toggle' : null
 		})
 
 		if ( render ) {

frappe/public/js/frappe/social/components/ActivitySidebar.vue

@@ -3,7 +3,10 @@
 		<div class="muted-title">Upcoming Events</div>
 		<div class="event" v-for="event in events" :key="event.name">
 			<span class="bold">{{ get_time(event.starts_on) }}</span>
-			<span> {{ event.subject }}</span>
+			<a @click="open_event(event)"> {{ event.subject }}</a>
+		</div>
+		<div class="event" v-if="!events.length">
+			No upcoming events
 		</div>
 		<div class="muted-title">Chat</div>
 		<a @click="open_chat">
@@ -32,11 +35,14 @@ export default {
 			})
 		},
 		open_chat() {
-			frappe.chat.widget.toggle();
+			setTimeout(frappe.chat.widget.toggle);
 		},
 		get_time(timestamp) {
 			return frappe.datetime.get_time(timestamp)
 		},
+		open_event(event) {
+			frappe.set_route('Form', 'Event', event.name);
+		}
 	}
 }
 </script>

frappe/public/js/frappe/social/components/PostSidebar.vue

@@ -1,15 +1,21 @@
 <template>
 	<div class="flex flex-column">
-		<div class="muted-title">
-			Frequently Visited Links
+		<div class="user-details">
+			<div class="user-avatar" v-html="user_avatar"></div>
+			<a class="user_name" @click="go_to_profile_page()">{{ user.fullname }}</a>
 		</div>
-		<div class="flex flex-column">
-			<a class="route-link"
-				@click.prevent="goto_list(route_obj.route)"
-				v-for="route_obj in frequently_visited_list"
-				:key="route_obj.route">
-				{{ get_label(route_obj.route) }}
-			</a>
+		<div class="links">
+			<div class="muted-title">
+				Frequently Visited Links
+			</div>
+			<div class="flex flex-column">
+				<a class="route-link"
+					@click.prevent="goto_list(route_obj.route)"
+					v-for="route_obj in frequently_visited_list"
+					:key="route_obj.route">
+					{{ get_label(route_obj.route) }}
+				</a>
+			</div>
 		</div>
 	</div>
 </template>
@@ -17,7 +23,9 @@
 export default {
 	data() {
 		return {
-			frequently_visited_list: []
+			frequently_visited_list: [],
+			user: frappe.user_info(frappe.session.user),
+			user_avatar: frappe.avatar(this.user_id, 'avatar-xl')
 		}
 	},
 	created() {
@@ -35,18 +43,37 @@ export default {
 		},
 		get_label(route) {
 			return frappe.utils.get_route_label(route);
+		},
+		go_to_profile_page() {
+			frappe.set_route('social', 'profile', this.user.name)
 		}
 	}
 }
 </script>
 <style lang="less" scoped>
 .route-link {
-	margin: 10px;
-	margin-left: 0;
+	margin: 0px 10px 10px 0;
 	text-transform: capitalize;
 }
 .stats {
 	min-height: 150px
 }
+.links {
+	margin-top: 20px;
+}
+.user-details {
+	.user-avatar {
+		/deep/.avatar-xl {
+			height: 150px;
+			width: 150px;
+		}
+	}
+	.user_name {
+		display: block;
+		margin-top: 10px;
+		font-size: 2rem;
+		font-weight: 600
+	}
+}
 </style>
 

frappe/public/js/frappe/social/components/ProfileSidebar.vue

@@ -10,6 +10,7 @@
 				<span class="text-muted"><i class="fa fa-gratipay">&nbsp;</i>{{ user.interest }}</span>
 			</div>
 		</div>
+		<a @click="go_to_home()"> ← Back To Home</a>
 	</div>
 </template>
 <script>
@@ -22,6 +23,11 @@ export default {
 			'user': frappe.user_info(this.user_id)
 		}
 	},
+	methods: {
+		go_to_home() {
+			frappe.set_route('social', 'home');
+		}
+	}
 }
 </script>