feat(nav): implement navigation as component

Signed-off-by: Kai Henseler <[email protected]>

src/App.vue

@@ -19,18 +19,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
 <template>
 	<content>
 		<div class="navigation">
-			<a href="/">Previous</a>
-			<ul>
-				<li>
-					<a @click="scrollToElement('account')">Account Settings</a>
-				</li>
-				<li>
-					<a @click="scrollToElement('security')">Security & Privacy</a>
-				</li>
-				<li>
-					<a @click="scrollToElement('help')">Help & Support</a>
-				</li>
-			</ul>
+			<Navigation @scroll-to="scrollToElement" />
 		</div>
 		<div class="settings">
 			<a id="close-icon" href="/">
@@ -60,6 +49,7 @@ import WebDavUrl from './components/files/WebDavUrl.vue'
 import Software from './components/help/Software.vue'
 import LanguageSection from './components/account/LanguageSection.vue'
 import Quota from './components/account/Quota.vue'
+import Navigation from './components/navigation/Navigation.vue'
 import IconClose from 'vue-material-design-icons/Close.vue'
 import { defineComponent } from 'vue'
 
@@ -71,14 +61,13 @@ export default defineComponent({
 		WebDavUrl,
 		Software,
 		Quota,
+		Navigation,
 		IconClose,
 	},
-
 	methods: {
-		scrollToElement(ref: string) {
-			const el = this.$refs[ref] as HTMLElement
-
-			el?.scrollIntoView({ behavior: 'smooth', inline: 'start' })
+		scrollToElement(element: string) {
+			const el = this.$refs[element] as HTMLElement
+			el?.scrollIntoView({ behavior: 'smooth', block: 'start' })
 		},
 	},
 })

src/components/navigation/Navigation.vue

@@ -0,0 +1,71 @@
+<template>
+	<div class="settings-navigation">
+		<ul class="app-navigation-entry">
+			<NcAppNavigationItem
+				id="backButton"
+				:name="t('simplesettings', 'Back to Files')"
+				href="/">
+				<IconChevronLeft slot="icon" :size="24" />
+			</NcAppNavigationItem>
+			<NcAppNavigationItem
+				:name="t('simplesettings', 'Account Settings')"
+				@click="scrollToElement('account')">
+				<IconAccount slot="icon" :size="20" />
+			</NcAppNavigationItem>
+			<NcAppNavigationItem
+				:name="t('simplesettings', 'Security & Privacy')"
+				@click="scrollToElement('security')">
+				<IconLock slot="icon" :size="20" />
+			</NcAppNavigationItem>
+			<NcAppNavigationItem
+				:name="t('simplesettings', 'Help & Support')"
+				@click="scrollToElement('help')">
+				<IconHeadset slot="icon" :size="20" />
+			</NcAppNavigationItem>
+		</ul>
+	</div>
+</template>
+
+<script lang="ts">
+import { translate as t } from '@nextcloud/l10n'
+import { defineComponent } from 'vue'
+
+import IconAccount from 'vue-material-design-icons/Account.vue'
+import IconLock from 'vue-material-design-icons/Lock.vue'
+import IconHeadset from 'vue-material-design-icons/Headset.vue'
+import IconChevronLeft from 'vue-material-design-icons/ChevronLeft.vue'
+
+// @ts-expect-error: Cannot find module or its corresponding type declarations.
+import NcAppNavigationItem from '@nextcloud/vue/dist/Components/NcAppNavigationItem.js'
+
+export default defineComponent({
+	name: 'Navigation',
+	components: {
+		IconAccount,
+		IconLock,
+		IconHeadset,
+		IconChevronLeft,
+		NcAppNavigationItem,
+	},
+	methods: {
+		scrollToElement(ref: string) {
+			this.$emit('scroll-to', ref)
+		},
+		t,
+	},
+})
+</script>
+
+<style scoped>
+.settings-navigation {
+	margin-left: 14px;
+	margin-top: 24px;
+
+	ul {
+		#backButton {
+			margin-top: -8px;
+			margin-left: -14px;
+		}
+	}
+}
+</style>