refactor: hide theme toggle and lang dropdown in header when logged in
This commit is contained in:
@@ -121,54 +121,56 @@ class AppHeader extends HTMLElement {
|
|||||||
<span class="btn-create-text" data-i18n="header.createListing">${t('header.createListing')}</span>
|
<span class="btn-create-text" data-i18n="header.createListing">${t('header.createListing')}</span>
|
||||||
</a>
|
</a>
|
||||||
|
|
||||||
<button
|
${!auth.isLoggedIn() ? `
|
||||||
class="btn btn-icon btn-outline"
|
|
||||||
id="theme-toggle"
|
|
||||||
data-i18n-title="header.toggleTheme"
|
|
||||||
title="${t('header.toggleTheme')}"
|
|
||||||
>
|
|
||||||
<svg class="icon-sun" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
||||||
<circle cx="12" cy="12" r="5"></circle>
|
|
||||||
<line x1="12" y1="1" x2="12" y2="3"></line>
|
|
||||||
<line x1="12" y1="21" x2="12" y2="23"></line>
|
|
||||||
<line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line>
|
|
||||||
<line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line>
|
|
||||||
<line x1="1" y1="12" x2="3" y2="12"></line>
|
|
||||||
<line x1="21" y1="12" x2="23" y2="12"></line>
|
|
||||||
<line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line>
|
|
||||||
<line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line>
|
|
||||||
</svg>
|
|
||||||
<svg class="icon-moon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="display:none;">
|
|
||||||
<path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path>
|
|
||||||
</svg>
|
|
||||||
</button>
|
|
||||||
|
|
||||||
<div class="dropdown" id="lang-dropdown">
|
|
||||||
<button
|
<button
|
||||||
class="btn btn-icon btn-outline"
|
class="btn btn-icon btn-outline"
|
||||||
id="lang-toggle"
|
id="theme-toggle"
|
||||||
aria-haspopup="listbox"
|
data-i18n-title="header.toggleTheme"
|
||||||
aria-expanded="${this.langDropdownOpen}"
|
title="${t('header.toggleTheme')}"
|
||||||
aria-label="${t('header.selectLanguage')}"
|
|
||||||
title="${t('header.selectLanguage')}"
|
|
||||||
>
|
>
|
||||||
<svg width="20" height="20" viewBox="0 0 16 16" fill="currentColor">
|
<svg class="icon-sun" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||||
<path d="M8 .25a7.77 7.77 0 0 1 7.75 7.78 7.75 7.75 0 0 1-7.52 7.72h-.25A7.75 7.75 0 0 1 .25 8.24v-.25A7.75 7.75 0 0 1 8 .25zm1.95 8.5h-3.9c.15 2.9 1.17 5.34 1.88 5.5H8c.68 0 1.72-2.37 1.93-5.23zm4.26 0h-2.76c-.09 1.96-.53 3.78-1.18 5.08A6.26 6.26 0 0 0 14.17 9zm-9.67 0H1.8a6.26 6.26 0 0 0 3.94 5.08 12.59 12.59 0 0 1-1.16-4.7l-.03-.38zm1.2-6.58-.12.05a6.26 6.26 0 0 0-3.83 5.03h2.75c.09-1.83.48-3.54 1.06-4.81zm2.25-.42c-.7 0-1.78 2.51-1.94 5.5h3.9c-.15-2.9-1.18-5.34-1.89-5.5h-.07zm2.28.43.03.05a12.95 12.95 0 0 1 1.15 5.02h2.75a6.28 6.28 0 0 0-3.93-5.07z"></path>
|
<circle cx="12" cy="12" r="5"></circle>
|
||||||
|
<line x1="12" y1="1" x2="12" y2="3"></line>
|
||||||
|
<line x1="12" y1="21" x2="12" y2="23"></line>
|
||||||
|
<line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line>
|
||||||
|
<line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line>
|
||||||
|
<line x1="1" y1="12" x2="3" y2="12"></line>
|
||||||
|
<line x1="21" y1="12" x2="23" y2="12"></line>
|
||||||
|
<line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line>
|
||||||
|
<line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line>
|
||||||
|
</svg>
|
||||||
|
<svg class="icon-moon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="display:none;">
|
||||||
|
<path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path>
|
||||||
</svg>
|
</svg>
|
||||||
</button>
|
</button>
|
||||||
<div class="dropdown-menu" role="listbox" aria-label="${t('header.selectLanguage')}">
|
|
||||||
${i18n.getSupportedLocales().map(locale => `
|
<div class="dropdown" id="lang-dropdown">
|
||||||
<button
|
<button
|
||||||
class="dropdown-item ${locale === i18n.getLocale() ? 'active' : ''}"
|
class="btn btn-icon btn-outline"
|
||||||
data-locale="${locale}"
|
id="lang-toggle"
|
||||||
role="option"
|
aria-haspopup="listbox"
|
||||||
aria-selected="${locale === i18n.getLocale()}"
|
aria-expanded="${this.langDropdownOpen}"
|
||||||
>
|
aria-label="${t('header.selectLanguage')}"
|
||||||
${i18n.getLocaleDisplayName(locale)}
|
title="${t('header.selectLanguage')}"
|
||||||
</button>
|
>
|
||||||
`).join('')}
|
<svg width="20" height="20" viewBox="0 0 16 16" fill="currentColor">
|
||||||
|
<path d="M8 .25a7.77 7.77 0 0 1 7.75 7.78 7.75 7.75 0 0 1-7.52 7.72h-.25A7.75 7.75 0 0 1 .25 8.24v-.25A7.75 7.75 0 0 1 8 .25zm1.95 8.5h-3.9c.15 2.9 1.17 5.34 1.88 5.5H8c.68 0 1.72-2.37 1.93-5.23zm4.26 0h-2.76c-.09 1.96-.53 3.78-1.18 5.08A6.26 6.26 0 0 0 14.17 9zm-9.67 0H1.8a6.26 6.26 0 0 0 3.94 5.08 12.59 12.59 0 0 1-1.16-4.7l-.03-.38zm1.2-6.58-.12.05a6.26 6.26 0 0 0-3.83 5.03h2.75c.09-1.83.48-3.54 1.06-4.81zm2.25-.42c-.7 0-1.78 2.51-1.94 5.5h3.9c-.15-2.9-1.18-5.34-1.89-5.5h-.07zm2.28.43.03.05a12.95 12.95 0 0 1 1.15 5.02h2.75a6.28 6.28 0 0 0-3.93-5.07z"></path>
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
<div class="dropdown-menu" role="listbox" aria-label="${t('header.selectLanguage')}">
|
||||||
|
${i18n.getSupportedLocales().map(locale => `
|
||||||
|
<button
|
||||||
|
class="dropdown-item ${locale === i18n.getLocale() ? 'active' : ''}"
|
||||||
|
data-locale="${locale}"
|
||||||
|
role="option"
|
||||||
|
aria-selected="${locale === i18n.getLocale()}"
|
||||||
|
>
|
||||||
|
${i18n.getLocaleDisplayName(locale)}
|
||||||
|
</button>
|
||||||
|
`).join('')}
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
` : ''}
|
||||||
|
|
||||||
${auth.isLoggedIn() ? `
|
${auth.isLoggedIn() ? `
|
||||||
<div class="dropdown" id="profile-dropdown">
|
<div class="dropdown" id="profile-dropdown">
|
||||||
@@ -241,12 +243,12 @@ class AppHeader extends HTMLElement {
|
|||||||
|
|
||||||
setupEventListeners() {
|
setupEventListeners() {
|
||||||
const themeToggle = this.querySelector('#theme-toggle')
|
const themeToggle = this.querySelector('#theme-toggle')
|
||||||
themeToggle.addEventListener('click', () => this.toggleTheme())
|
themeToggle?.addEventListener('click', () => this.toggleTheme())
|
||||||
|
|
||||||
const langDropdown = this.querySelector('#lang-dropdown')
|
const langDropdown = this.querySelector('#lang-dropdown')
|
||||||
const langToggle = this.querySelector('#lang-toggle')
|
const langToggle = this.querySelector('#lang-toggle')
|
||||||
|
|
||||||
langToggle.addEventListener('click', (e) => {
|
langToggle?.addEventListener('click', (e) => {
|
||||||
e.stopPropagation()
|
e.stopPropagation()
|
||||||
if (this.langDropdownOpen) {
|
if (this.langDropdownOpen) {
|
||||||
this.closeLangDropdown()
|
this.closeLangDropdown()
|
||||||
@@ -255,10 +257,9 @@ class AppHeader extends HTMLElement {
|
|||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
langDropdown.querySelectorAll('[data-locale]').forEach(btn => {
|
langDropdown?.querySelectorAll('[data-locale]').forEach(btn => {
|
||||||
btn.addEventListener('click', async () => {
|
btn.addEventListener('click', async () => {
|
||||||
await i18n.setLocale(btn.dataset.locale)
|
await i18n.setLocale(btn.dataset.locale)
|
||||||
// render() wird vom i18n-Subscriber in app-shell.js aufgerufen
|
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
|
|
||||||
|
|||||||
@@ -156,11 +156,10 @@ class DirectusService {
|
|||||||
if (response.status === 401 && this.refreshToken && !endpoint.startsWith('/auth/')) {
|
if (response.status === 401 && this.refreshToken && !endpoint.startsWith('/auth/')) {
|
||||||
const refreshed = await this.refreshSession()
|
const refreshed = await this.refreshSession()
|
||||||
if (refreshed) {
|
if (refreshed) {
|
||||||
headers['Authorization'] = `Bearer ${this.accessToken}`
|
|
||||||
return this.request(endpoint, options)
|
return this.request(endpoint, options)
|
||||||
} else {
|
} else {
|
||||||
// Refresh failed - clear tokens to prevent loops
|
|
||||||
this.clearTokens()
|
this.clearTokens()
|
||||||
|
return this.request(endpoint, options)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user