1 files changed, 83 insertions, 0 deletions
diff --git a/apps/settings/src/components/PersonalInfo/ProfileSection/EditProfileAnchorLink.vue b/apps/settings/src/components/PersonalInfo/ProfileSection/EditProfileAnchorLink.vue
new file mode 100644
index 00000000000..3deb5340751
--- /dev/null
+++ b/apps/settings/src/components/PersonalInfo/ProfileSection/EditProfileAnchorLink.vue
@@ -0,0 +1,83 @@
+<!--
+  - SPDX-FileCopyrightText: 2021 Nextcloud GmbH and Nextcloud contributors
+  - SPDX-License-Identifier: AGPL-3.0-or-later
+-->
+
+<template>
+	<a :class="{ disabled }"
+		href="#profile-visibility"
+		v-on="$listeners">
+		<ChevronDownIcon class="anchor-icon"
+			:size="22" />
+		{{ t('settings', 'Edit your Profile visibility') }}
+	</a>
+</template>
+
+<script>
+import ChevronDownIcon from 'vue-material-design-icons/ChevronDown.vue'
+
+export default {
+	name: 'EditProfileAnchorLink',
+
+	components: {
+		ChevronDownIcon,
+	},
+
+	props: {
+		profileEnabled: {
+			type: Boolean,
+			required: true,
+		},
+	},
+
+	computed: {
+		disabled() {
+			return !this.profileEnabled
+		},
+	},
+}
+</script>
+
+<style lang="scss">
+html {
+	scroll-behavior: smooth;
+
+	@media screen and (prefers-reduced-motion: reduce) {
+		scroll-behavior: auto;
+	}
+}
+</style>
+
+<style lang="scss" scoped>
+a {
+	display: block;
+	height: 44px;
+	width: min(100%, 290px);
+	overflow: hidden;
+	text-overflow: ellipsis;
+	line-height: 44px;
+	padding: 0 16px;
+	margin: 14px auto;
+	border-radius: var(--border-radius-pill);
+	color: var(--color-text-maxcontrast);
+	background-color: transparent;
+
+	.anchor-icon {
+		display: inline-block;
+		vertical-align: middle;
+		margin-top: 6px;
+		margin-inline-end: 8px;
+	}
+
+	&:hover,
+	&:focus,
+	&:active {
+		color: var(--color-main-text);
+		background-color: var(--color-background-dark);
+	}
+
+	&.disabled {
+		pointer-events: none;
+	}
+}
+</style>