Navbar - Språkväxlare demo

Den här demon visar LangSwitcherPlugin som lägger till en språkväxlare längst ner i drawer-menyn.

Aktuellt språk: Svenska (sv)

1. Använd språkväxlaren

Öppna drawer-menyn (hamburgermeny) och scrolla ner till botten för att se språkväxlaren.

✓ Placering: Språkväxlaren visas längst ner i drawer-menyn med en separator-linje ovanför.

✓ Svenska läge: Visar 🇬🇧 "Switch to English"

✓ Engelskt läge: Visar 🇸🇪 "Växla till svenska"

Testa språkväxling

Klicka på språkväxlaren längst ner i menyn för att byta språk

2. Beteende och events

⚠️ Standard beteende: Sidan laddar om automatiskt när språk byts.

Detta säkerställer att all innehåll uppdateras korrekt till det nya språket.

Event listener

Du kan lyssna på navbar:languageSwitch eventet för att hantera språkbyten:

Väntar på språkbyte-events...

Anpassat beteende

Du kan också använda en callback istället för att ladda om sidan:

Med anpassad callback: Sidan laddas INTE om automatiskt.

Du kan hantera språkbytet själv, t.ex. uppdatera innehåll med JavaScript.

3. Integration och API

Lyssna på språkbyte

window.addEventListener(
  'navbar:languageSwitch',
  function(event) {
    const { oldLanguage, newLanguage } = event.detail;
    console.log('Språk bytt från', oldLanguage, 'till', newLanguage);

    // Uppdatera din apps innehåll här
  }
);

Programmatisk språkbyte

// Byt språk programmatiskt
SweNavbar.setLanguage('en');

// eller
SweNavbar.setLanguage('sv');

4. Kodexempel - Installation

Grundkonfiguration

<script>
    window.NAVBAR_CONFIG = {
        language: 'sv',  // Startar på svenska
        drawerEnabled: true
    };
</script>
<script src="../navbar/navbar.js"></script>

Med anpassad callback (utan sidladdning)

// I navbar-konfigurationen kan du skicka in en plugin-konfiguration
// som inkluderar LangSwitcherPlugin med custom callback
import { LangSwitcherPlugin } from './plugins-swedac/LangSwitcherPlugin';

const navbar = new NavbarCore({
    language: 'sv',
    drawerEnabled: true
});

// Lägg till LangSwitcherPlugin med custom callback
navbar.pluginManager.registerPlugin(
    new LangSwitcherPlugin({
        reloadOnSwitch: false,  // Ladda inte om sidan
        onLanguageSwitch: function(newLanguage) {
            console.log('Nytt språk:', newLanguage);
            // Uppdatera innehåll dynamiskt
            updatePageContent(newLanguage);
        }
    })
);

Lyssna på event utan att påverka standard-beteendet

// Lyssna på språkbyte för att t.ex. logga analytics
window.addEventListener('navbar:languageSwitch', function(event) {
    const { oldLanguage, newLanguage } = event.detail;

    // Logga till analytics
    if (window.gtag) {
        gtag('event', 'language_switch', {
            'from': oldLanguage,
            'to': newLanguage
        });
    }

    // Spara användarens språkpreferens
    localStorage.setItem('preferred_language', newLanguage);
});

5. Användningsfall

🔄 Standard (med reload)

Bäst för statiska sidor eller server-renderad innehåll.

Enklast att implementera
Garanterar att allt innehåll uppdateras
Fungerar med traditionella webbplatser

⚡ Med callback (utan reload)

Bäst för SPA (Single Page Applications).

Snabbare användarupplevelse
Behåller applikationstillstånd
Kräver att du uppdaterar innehåll manuellt

6. Tillgänglighet

✓ Tangentbordsnavigation: Språkväxlaren kan nås med Tab och aktiveras med Enter eller Space.

✓ ARIA-attribut: Korrekt roll och tabindex för skärmläsare.

✓ Visuell feedback: Hover-effekter visar att elementet är klickbart.

✓ Tydliga flaggor: Visuella indikatorer för båda språken.