modernize group.vue

packages/client/src/pages/my-groups/group.vue

@@ -1,4 +1,6 @@
 <template>
+<MkStickyContainer>
+	<template #header><MkPageHeader/></template>
 	<div class="mk-group-page">
 		<transition :name="$store.state.animation ? 'zoom' : ''" mode="out-in">
 			<div v-if="group" class="_section">
@@ -10,10 +12,8 @@
 				</div>
 			</div>
 		</transition>
-
 		<transition :name="$store.state.animation ? 'zoom' : ''" mode="out-in">
 			<div v-if="group" class="_section members _gap">
-			<div class="_title">{{ $ts.members }}</div>
 				<div class="_content">
 					<div class="users">
 						<div v-for="user in users" :key="user.id" class="user _panel">
@@ -31,11 +31,14 @@
 			</div>
 		</transition>
 	</div>
+</MkStickyContainer>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
 import { computed, defineComponent } from 'vue';
 import MkButton from '@/components/MkButton.vue';
+import { definePageMetadata } from '@/scripts/page-metadata';\
+import { i18n } from '@/i18n';
 import * as os from '@/os';
 
 export default defineComponent({
@@ -139,10 +142,22 @@ export default defineComponent({
 		}
 	}
 });
+
+definePageMetadata(computed(() => ({
+	title: i18n.ts.members,
+	icon: 'fas fa-users',
+})));
+
 </script>
 
 <style lang="scss" scoped>
 	.mk-group-page {
+		> ._section {
+			> ._content {
+				padding-top: 1rem;
+				justify-content: center;
+			}
+		}
 		> .members {
 			> ._content {
 				> .users {