gorb/frontend
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages 1 Wiki Activity Actions

feat: change colour of focused settings category
All checks were successful
ci/woodpecker/push/build-and-publish Pipeline was successful
Details

Browse source
This commit is contained in:
JustTemmie 2025-06-01 07:28:09 +02:00
parent 39fb0a9eab
commit 162ca6833f
1 changed files with 18 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

23
pages/settings.vue
View file

@ -6,12 +6,17 @@
<ul> <ul>
<template v-for="category in categories" :key="category.display_name"> <template v-for="category in categories" :key="category.display_name">
<h2>{{ category.display_name }}</h2> <h2>{{ category.display_name }}</h2>
<li v-for="page in category.pages" :key="page.display_name" @click="selectCategory(page)"> <li
v-for="page in category.pages"
:key="page.display_name"
@click="selectCategory(category, page)"
:class="{ 'sidebar-focus': selectedPage === page.display_name }"
>
{{ page.display_name }} {{ page.display_name }}
</li> </li>
<span class="spacer"></span> <span class="spacer"></span>
</template> </template>
<ButtonScary text="Log Out" :callback=logout></ButtonScary> <ButtonScary text="Log Out" :callback=logout></ButtonScary>
</ul> </ul>
</div> </div>
@ -71,9 +76,11 @@ const settingsCategories = {
const categories = Object.values(settingsCategories); const categories = Object.values(settingsCategories);
let currentPage = ref(categories[0].pages[0]); let currentPage = ref(categories[0].pages[0]);
let selectedPage = ref(currentPage.value.display_name);
const selectCategory = (page: Page) => { const selectCategory = (_category: Category, page: Page) => {
currentPage.value = page; currentPage.value = page;
selectedPage.value = page.display_name;
console.log(`switching to ${page.display_name}`) console.log(`switching to ${page.display_name}`)
}; };
@ -102,7 +109,7 @@ function logout() {
color: white; color: white;
padding: 10px; padding: 10px;
margin-left: auto; margin-left: auto;
overflow-y: auto; overflow-y: auto;
height: 100vh; height: 100vh;
} }
@ -119,9 +126,15 @@ function logout() {
} }
#sidebar li { #sidebar li {
border-radius: 8px;
padding: 8px; padding: 8px;
margin: 2px 0;
cursor: pointer; cursor: pointer;
transition: all 0.3s; transition: background-color 0.3s;
}
.sidebar-focus {
background-color: #383B41;
} }
#sidebar li:hover { #sidebar li:hover {