diff --git a/packages/client/src/components/global/page-header.vue b/packages/client/src/components/global/page-header.vue index 106e216b9bd6a37d623299494cda4165fb769966..ba75b2446b8249892ccdde5042ab865203a53112 100644 --- a/packages/client/src/components/global/page-header.vue +++ b/packages/client/src/components/global/page-header.vue @@ -1,5 +1,8 @@ <template> <div v-if="show" ref="el" class="fdidabkb" :class="{ slim: narrow, thin: thin_ }" :style="{ background: bg }" @click="onClick"> + <div v-if="narrow" class="buttons left"> + <MkAvatar v-if="props.displayMyAvatar && $i" class="avatar" :user="$i" :disable-preview="true"/> + </div> <template v-if="metadata"> <div v-if="!hideTitle" class="titleContainer" @click="showTabsPopup"> <MkAvatar v-if="metadata.avatar" class="avatar" :user="metadata.avatar" :disable-preview="true" :show-indicator="true"/> @@ -41,6 +44,7 @@ import { scrollToTop } from '@/scripts/scroll'; import { i18n } from '@/i18n'; import { globalEvents } from '@/events'; import { injectPageMetadata } from '@/scripts/page-metadata'; +import { $i } from '@/account'; type Tab = { key?: string | null; @@ -59,6 +63,7 @@ const props = defineProps<{ handler: (ev: MouseEvent) => void; }[]; thin?: boolean; + displayMyAvatar?: boolean; }>(); const emit = defineEmits<{ @@ -197,7 +202,6 @@ onUnmounted(() => { > .titleContainer { flex: 1; margin: 0 auto; - margin-left: var(--height); > *:first-child { margin-left: auto; @@ -213,9 +217,24 @@ onUnmounted(() => { --margin: 8px; display: flex; align-items: center; + min-width: var(--height); height: var(--height); margin: 0 var(--margin); + &.left { + margin-right: auto; + + > .avatar { + $size: 32px; + display: inline-block; + width: $size; + height: $size; + vertical-align: bottom; + margin: 0 8px; + pointer-events: none; + } + } + &.right { margin-left: auto; } diff --git a/packages/client/src/pages/timeline.vue b/packages/client/src/pages/timeline.vue index f62ab95b5b1f0d628035160c5d7aeaf1d540b0d8..1c62964a5f5187d5050ffb3a506ac36bf98b10a9 100644 --- a/packages/client/src/pages/timeline.vue +++ b/packages/client/src/pages/timeline.vue @@ -1,6 +1,6 @@ <template> <MkStickyContainer> - <template #header><MkPageHeader v-model:tab="src" :actions="headerActions" :tabs="headerTabs"/></template> + <template #header><MkPageHeader v-model:tab="src" :actions="headerActions" :tabs="headerTabs" :display-my-avatar="true"/></template> <MkSpacer :content-max="800"> <div ref="rootEl" v-hotkey.global="keymap" class="cmuxhskf"> <XTutorial v-if="$store.reactiveState.tutorial.value != -1" class="tutorial _block"/>