feat(nav): move navigation to own component

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

src/App.vue

@@ -19,20 +19,12 @@ 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="/">
+				<IconClose :size="24" />
+			</a>
 			<h2 ref="account">
 				Account Settings
 			</h2>
@@ -57,6 +49,8 @@ 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'
 
 export default defineComponent({
@@ -67,19 +61,21 @@ 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' })
 		},
 	},
 })
 </script>
 
 <style scoped lang="scss">
+@use '../../../core/css/variables.scss' as variables;
+
 content {
 	display: flex;
 	align-items: stretch;
@@ -98,11 +94,36 @@ content {
 	width: 15%;
 }
 
+#close-icon {
+	display: none;
+}
+
 h2 {
 	padding-top: 25px;
 	padding-left: 30px;
 	margin-bottom: 0;
 	font-weight: 700;
 	font-size: 24px;
 }
+
+@media screen and (max-width: calc(variables.$breakpoint-mobile / 2)) {
+	.settings {
+		position: relative;
+		width: 100%;
+	}
+
+	.navigation {
+		display: none;
+	}
+
+	#close-icon {
+		display: block;
+		position: absolute; /* Absolutely positioned within the .settings container */
+		top: 0; /* Position it at the top */
+		right: 0; /* Align it to the right */
+		z-index: 10; /* Ensure it floats above other content */
+		font-size: 24px;
+		padding: 10px;
+	}
+}
 </style>

src/components/navigation/Navigation.vue

@@ -0,0 +1,72 @@
+<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 {
+			/* move the back button up and to the left */
+			margin-top: -8px;
+			margin-left: -14px;
+		}
+	}
+}
+</style>