frontend/pages/settings.vue

<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>