WIP feat(nav): adds basic naivgation to settings page

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

src/App.vue

@@ -18,15 +18,32 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
 
 <template>
 	<content>
-		<Quota />
-		<hr>
-		<LanguageSection />
-		<hr>
-		<AuthTokenSection />
-		<hr>
-		<WebDavUrl />
-		<hr>
-		<Software />
+		<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>
+		</div>
+		<div class="settings">
+			<hr ref="account">
+			<Quota />
+			<hr>
+			<LanguageSection />
+			<hr ref="security">
+			<AuthTokenSection />
+			<hr ref="help">
+			<WebDavUrl />
+			<hr>
+			<Software />
+		</div>
 	</content>
 </template>
 
@@ -47,16 +64,39 @@ export default defineComponent({
 		Software,
 		Quota,
 	},
+
+	methods: {
+		scrollToElement(ref) {
+			const el = this.$refs[ref] as HTMLElement
+
+			if (el) {
+				// Use el.scrollIntoView() to instantly scroll to the element
+				el.scrollIntoView({ behavior: 'smooth', inline: 'start' })
+			}
+		},
+	},
 })
 </script>
 
 <style scoped lang="scss">
 content {
+	display: flex;
+	align-items: stretch;
+	flex-direction: row;
 	width: 100%;
-	overflow-y: scroll;
 	background-color: var(--color-main-background);
 }
 
+.settings {
+	width: 85%;
+	overflow-y: scroll;
+}
+
+.navigation {
+	background-color: var(--ion-color-cool-grey-c1);
+	width: 15%;
+}
+
 hr {
 	margin: 0 30px;
 }