Merge branch 'settings-page'

co-authored-by: JustTemmie <git@beaver.mom>

pages/settings.vue

@@ -0,0 +1,159 @@
+<template>
+  <div id="settings-page-container">
+    <div id="settings-page">
+      <div id="sidebar">
+        <h4>(Search bar here)</h4>
+        <ul>
+          <div v-for="category in categories" :key="category.displayName">
+            <h2>{{ category.displayName }}</h2>
+            <li v-for="page in category.pages" :key="page.displayName" @click="selectCategory(page)"
+              :class="{ 'sidebar-focus': selectedPage === page.displayName }">
+              {{ page.displayName }}
+            </li>
+            <span class="spacer"></span>
+          </div>
+
+          <Button text="Log Out" :callback=logout variant="scary"></Button>
+        </ul>
+      </div>
+      <div id="sub-page">
+        <component :is="currentPage.pageData" />
+      </div>
+    </div>
+  </div>
+</template>
+
+
+<script lang="ts" setup>
+import Button from '~/components/Button.vue';
+
+const { logout } = useAuth()
+
+interface Page {
+  displayName: string;
+  pageData: any; // is actually Component but TS is yelling at me :(
+}
+  
+interface Category {
+  displayName: string;
+  pages: Page[];
+}
+
+import Account from '~/components/Settings/UserSettings/Account.vue';
+import Privacy from '~/components/Settings/UserSettings/Privacy.vue';
+import Devices from '~/components/Settings/UserSettings/Devices.vue';
+import Connections from '~/components/Settings/UserSettings/Connections.vue';
+
+import Appearance from '~/components/Settings/AppSettings/Appearance.vue';
+import Notifications from '~/components/Settings/AppSettings/Notifications.vue';
+import Keybinds from '~/components/Settings/AppSettings/Keybinds.vue';
+import Language from '~/components/Settings/AppSettings/Language.vue';
+
+const settingsCategories = {
+  userSettings: {
+    displayName: "User Settings",
+    pages: [
+      { displayName: "My Account", pageData: Account },
+      { displayName: "Privacy", pageData: Privacy },
+      { displayName: "Devices", pageData: Devices },
+      { displayName: "Connections", pageData: Connections },
+    ]
+  },
+  appSettings: {
+    displayName: "App Settings",
+    pages: [
+      { displayName: "Appearance", pageData: Appearance },
+      { displayName: "Notifications", pageData: Notifications },
+      { displayName: "Keybinds", pageData: Keybinds },
+      { displayName: "Language", pageData: Language },
+    ]
+  },
+};
+
+const categories = Object.values(settingsCategories);
+
+let currentPage = ref(categories[0].pages[0]);
+let selectedPage = ref(currentPage.value.displayName); // used to highlight the current channel
+
+function selectCategory(page: Page) {
+  currentPage.value = page;
+  selectedPage.value = page.displayName;
+};
+
+</script>
+
+<style scoped>
+#settings-page-container {
+  height: 100%;
+  align-content: center;
+  overflow-y: hidden;
+  margin: 0;
+}
+
+#settings-page {
+  height: 100vh;
+  display: flex;
+}
+
+#sidebar {
+  min-width: 25dvw;
+  max-width: 25dvw;
+  background-color: #2f3136;
+  color: white;
+  padding: 1dvh 1dvw;
+  margin-left: auto;
+
+  overflow-y: auto;
+  height: 100vh;
+}
+
+#sidebar h2 {
+  font-size: 0.95em;
+  padding: 0 0.8dvw;
+}
+
+#sidebar ul {
+  list-style-type: none;
+  padding: 0;
+  margin: 0;
+}
+
+#sidebar li {
+  border-radius: 8px;
+  padding: 0.8dvh 0.8dvw;
+  font-size: 1.4em;
+  cursor: pointer;
+  transition: background-color 0.3s;
+}
+
+.sidebar-focus {
+  background-color: #383B41;
+}
+
+#sidebar li:hover {
+  background-color: #40444b;
+}
+
+#sub-page {
+  flex-grow: 1;
+  min-width: 70dvw;
+  max-width: 70dvw;
+  padding-left: 1.5rem;
+  margin-right: auto;
+
+  overflow-y: auto;
+  height: 100vh;
+}
+
+.spacer {
+  height: 0.2dvh;
+  display: block;
+  margin: 0.8dvh 1dvw;
+  background-color: #2c2e32;
+}
+
+/* applies to child pages too */
+:deep(h5) {
+  color: red;
+}
+</style>