copenhagentruckwash/pleno-vue
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add responsive language selector with desktop buttons and mobile dropdown

Browse Source
This commit is contained in:
Jeppe Bundgaard
2026-02-27 05:39:08 +01:00
parent c071ba0ebe
commit 892c786a85
1 changed files with 70 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/i18n/LanguageSelector.vue
+70 -36
View File
@@ -11,52 +11,86 @@ const changeLanguage = (lang) => {
<template>
<div class="language-selector">
<button
class="lang-btn"
:class="{ active: locale === 'da' }"
@click="changeLanguage('da')"
>
DA
</button>
<button
class="lang-btn"
:class="{ active: locale === 'en' }"
@click="changeLanguage('en')"
>
EN
</button>
<button
class="lang-btn"
:class="{ active: locale === 'sv' }"
@click="changeLanguage('sv')"
>
SV
</button>
<button
class="lang-btn"
:class="{ active: locale === 'de' }"
@click="changeLanguage('de')"
>
DE
</button>
<button
class="lang-btn"
:class="{ active: locale === 'no' }"
@click="changeLanguage('no')"
>
NO
</button>
<div class="language-buttons is-hidden-touch">
<button
class="lang-btn"
:class="{ active: locale === 'da' }"
@click="changeLanguage('da')"
>
DA
</button>
<button
class="lang-btn"
:class="{ active: locale === 'en' }"
@click="changeLanguage('en')"
>
EN
</button>
<button
class="lang-btn"
:class="{ active: locale === 'sv' }"
@click="changeLanguage('sv')"
>
SV
</button>
<button
class="lang-btn"
:class="{ active: locale === 'de' }"
@click="changeLanguage('de')"
>
DE
</button>
<button
class="lang-btn"
:class="{ active: locale === 'no' }"
@click="changeLanguage('no')"
>
NO
</button>
</div>
<div class="language-select is-hidden-desktop">
<div class="select is-fullwidth">
<select :value="locale" @change="changeLanguage($event.target.value)">
<option value="da">DA</option>
<option value="en">EN</option>
<option value="sv">SV</option>
<option value="de">DE</option>
<option value="no">NO</option>
</select>
</div>
</div>
</div>
</template>
<style scoped>
.language-selector {
.language-buttons {
display: flex;
gap: 8px;
padding: 16px;
justify-content: center;
}
.language-select {
padding: 16px;
display: flex;
justify-content: center;
align-items: center;
}
.language-select .select select {
padding: 8px 16px;
border: 1px solid #ccc;
border-radius: 4px;
background: #fff;
cursor: pointer;
font-weight: 500;
transition: all 0.2s ease;
}
.language-select .select select:hover {
background: #f0f0f0;
}
.lang-btn {
padding: 8px 16px;
border: 1px solid #ccc;