Syndria98/aranroig.com
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Big update
All checks were successful
Build and Deploy Nuxt / build (push) Successful in 35s
Details

Browse Source
This commit is contained in:
BinarySandia04
2026-03-20 23:10:38 +01:00
parent 63cb32779f
commit c105669065
25 changed files with 268 additions and 135 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
frontend/app/components/parts/HeaderLinks.vue
View File

@@ -1,8 +1,13 @@
<script setup lang="ts">
const localePath = useLocalePath()
</script>
<template>
<div class="menus">
<NuxtLink href="/">About</NuxtLink>
<NuxtLink href="/blog">Blog</NuxtLink>
<NuxtLink class="disabled">Drawings</NuxtLink>
<NuxtLink :to="localePath('index')">/</NuxtLink>
<NuxtLink :to="localePath('blog')">/{{ $t('header.links.blog') }}</NuxtLink>
<NuxtLink :to="localePath('contact')">/{{ $t('header.links.contact') }}</NuxtLink>
<!-- <NuxtLink class="disabled">Drawings</NuxtLink> -->
</div>
</template>

2
frontend/app/components/parts/TableHeader.vue
View File

@@ -35,7 +35,7 @@ import SiteOptions from './site_options/SiteOptions.vue';
position: relative;
left: 45px;
margin-top: 300px;
margin-left: -500px;
margin-left: -360px;
margin-bottom: 25px;
user-select: none;
}

26
frontend/app/components/parts/site_options/LanguageSelector.vue
View File

@@ -1,6 +1,5 @@
<script setup>
import { ref } from 'vue'
import { useI18n } from 'vue-i18n'
const dropdownVisible = ref(false);
@@ -26,29 +25,24 @@ onUnmounted(() => {
// i18n
const { locale } = useI18n()
const { locales, setLocale, locale } = useI18n()
const setLocale = (lang) => {
locale.value = lang
const changeLocale = (lang) => {
setLocale(lang.code);
dropdownVisible.value = false
}
</script>
<template>
<div class="menu-container" ref="menuContainer">
<button class="menu-button" @click="toggleDropdown">Language </button>
<button class="menu-button" @click="toggleDropdown">{{ $t("site_options.language_selector.dropdown") }} </button>
<div class="dropdown" v-show="dropdownVisible">
<div class="section">
<div class="menu-item" @click="setLocale('en')">
🇬🇧 English
</div>
<div class="menu-item" @click="setLocale('es')">
🇪🇸 Spanish
</div>
<div class="menu-item" @click="setLocale('ca')">
🇦🇩 Catalan
</div>
<div :class="{'menu-item': true, 'active': locale === loc.code}"
v-for="loc in locales" @click="changeLocale(loc)">
{{ $t('locales.' + loc.code) }}
</div>
</div>
</div>
</div>
@@ -64,6 +58,10 @@ const setLocale = (lang) => {
border-radius: 6px;
cursor: pointer;
margin-right: 15px;
&.active {
background-color: #30363d;
}
}
.dropdown {
z-index: 10;

2
frontend/app/components/parts/site_options/SiteOptions.vue
View File

@@ -13,5 +13,7 @@ import ThemeSelector from './ThemeSelector.vue';
<style lang="scss" scoped>
.site-options {
display: flex;
justify-content: right;
width: 400px;
}
</style>

15
frontend/app/components/parts/site_options/ThemeSelector.vue
View File

@@ -30,36 +30,39 @@ onUnmounted(() => {
<template>
<div class="menu-container" ref="menuContainer">
<button class="menu-button" @click="toggleDropdown">Theme </button>
<button class="menu-button" @click="toggleDropdown">{{ $t('site_options.theme_selector.dropdown') }} </button>
<div class="dropdown" v-show="dropdownVisible">
<div class="two-columns">
<div class="section">
<div class="menu-section">
<div class="menu-header">
Theme
{{ $t('site_options.theme_selector.dropdown') }}
</div>
</div>
<div class="divider"></div>
<div class="menu-section">
<div :class="{'menu-item': true, 'active': theme === 'dark' }" @click="setTheme('dark')">
<div class="circle dark"></div>Dark
<div class="circle dark"></div>
{{ $t('themes.dark') }}
</div>
<div :class="{'menu-item': true, 'active': theme === 'light' }" @click="setTheme('light')">
<div class="circle light"></div>Light
<div class="circle light"></div>
{{ $t('themes.light') }}
</div>
</div>
</div>
<div class="section">
<div class="menu-section">
<div class="menu-header">
Dragon
{{ $t('site_options.theme_selector.dragon') }}
</div>
</div>
<div class="divider"></div>
<div class="menu-section">
<div :class="{'menu-item': true, 'active': accent === 'katlum' }" @click="setAccent('katlum')">
<div class="circle katlum"></div>Katlum
<div class="circle katlum"></div>
{{ $t('themes.accents.katlum') }}
</div>
<!--
<div :class="{'menu-item': true, 'active': accent === 'solus' }" @click="setAccent('solus')">